[V0_FILE]typescriptreact:file="middleware.ts" import { type NextRequest, NextResponse } from "next/server" export function middleware(request: NextRequest) { try { // Simulate some middleware logic that might throw an error const authToken = request.cookies.get("auth-token")?.value // Example: Check if user is authenticated for protected routes if (request.nextUrl.pathname.startsWith("/dashboard")) { if (!authToken) { throw new Error("Authentication required") } // Simulate token validation that might fail if (authToken === "invalid-token") { throw new Error("Invalid authentication token") } } // Example: Rate limiting check if (request.nextUrl.pathname.startsWith("/api/")) { const rateLimitExceeded = request.headers.get("x-rate-limit") === "exceeded" if (rateLimitExceeded) { throw new Error("Rate limit exceeded. Please try again later.") } } return NextResponse.next() } catch (error) { console.error("Middleware error:", error) // Create response with error information const response = NextResponse.next() // Set error information in cookies that the client can read response.cookies.set( "middleware-error", JSON.stringify({ message: error instanceof Error ? error.message : "An unexpected error occurred", timestamp: Date.now(), path: request.nextUrl.pathname, }), { httpOnly: false, // Allow client-side access maxAge: 60, // Expire after 1 minute path: "/", }, ) // For API routes, return error response directly if (request.nextUrl.pathname.startsWith("/api/")) { return NextResponse.json( { error: error instanceof Error ? error.message : "Internal server error" }, { status: 500 }, ) } // For page routes, continue to the page but with error cookie set return response } } export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"], } [V0_FILE]typescriptreact:file="contexts/error-context.tsx" "use client" import { createContext, useContext, useEffect, useState, type ReactNode } from "react" interface ErrorContextType { error: string | null showError: (message: string) => void clearError: () => void } const ErrorContext = createContext(undefined) export function ErrorProvider({ children }: { children: ReactNode }) { const [error, setError] = useState(null) const showError = (message: string) => { setError(message) } const clearError = () => { setError(null) } // Check for middleware errors on mount and route changes useEffect(() => { const checkMiddlewareError = () => { const errorCookie = document.cookie.split("; ").find((row) => row.startsWith("middleware-error=")) if (errorCookie) { try { const errorData = JSON.parse(decodeURIComponent(errorCookie.split("=")[1])) showError(errorData.message) // Clear the error cookie after reading it document.cookie = "middleware-error=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;" } catch (e) { console.error("Failed to parse error cookie:", e) } } } // Check immediately checkMiddlewareError() // Check on route changes const handleRouteChange = () => { setTimeout(checkMiddlewareError, 100) // Small delay to ensure cookie is set } // Listen for navigation events window.addEventListener("popstate", handleRouteChange) return () => { window.removeEventListener("popstate", handleRouteChange) } }, []) return {children} } export function useError() { const context = useContext(ErrorContext) if (context === undefined) { throw new Error("useError must be used within an ErrorProvider") } return context } [V0_FILE]typescriptreact:file="components/error-modal.tsx" "use client" import { useError } from "@/contexts/error-context" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { AlertTriangle } from "lucide-react" export function ErrorModal() { const { error, clearError } = useError() return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ErrorProvider } from "@/contexts/error-context" import { ErrorModal } from "@/components/error-modal" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Error Modal Middleware Demo", description: "Demonstrating error handling in middleware with modal display", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { useError } from "@/contexts/error-context" import Link from "next/link" export default function HomePage() { const { showError } = useError() const simulateClientError = () => { showError("This is a client-side error for demonstration") } const simulateApiError = async () => { try { const response = await fetch("/api/test-error") if (!response.ok) { const data = await response.json() showError(data.error || "API request failed") } } catch (error) { showError("Network error occurred") } } return (

Error Modal Middleware Demo

Test different error scenarios to see the modal in action

Middleware Errors These will trigger errors in middleware Client Errors Test client-side error handling Valid Actions These should work without errors

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import { Button } from "@/components/ui/button" export default function DashboardPage() { return (

Dashboard You successfully accessed the protected dashboard!

This page is protected by middleware authentication. If you're seeing this, your authentication token was valid.

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import Link from "next/link" import { Button } from "@/components/ui/button" export default function AboutPage() { return (

About This is a public page that doesn't require authentication

This page demonstrates that not all routes trigger middleware errors. Public pages should work normally.

) } [V0_FILE]typescriptreact:file="app/api/test-error/route.ts" import { NextResponse } from "next/server" export async function GET() { // Simulate an API error return NextResponse.json({ error: "This is a simulated API error" }, { status: 500 }) }