Missing Error Boundary

What this is

When a React component throws during render, React unmounts the entire tree above it. Without an error boundary to catch the error, users see a blank white page. On Next.js App Router, the file app/error.tsx defines the error boundary for a route segment.

78% of apps in FinishKit's scan of 100 vibe-coded apps had zero error boundaries.

Why AI tools ship this

Error boundaries only matter when something breaks. The generated demo always works. The AI tool confirms the happy path, moves on, and never adds the boundary.

How to detect

Look for any error.tsx inside app/:

find app -name "error.tsx" -o -name "error.jsx"

If nothing is found, the app has no error boundaries. Add at least a global one.

How to fix

Create app/error.tsx:

'use client'
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // send to your error tracker
    console.error(error)
  }, [error])
 
  return (
    <div className="mx-auto max-w-md py-20 text-center">
      <h2 className="mb-3 text-2xl font-semibold">Something went wrong</h2>
      <p className="mb-6 text-muted-foreground">
        We have been notified. Try again in a moment.
      </p>
      <button
        onClick={reset}
        className="rounded-md bg-foreground px-4 py-2 text-sm text-background"
      >
        Try again
      </button>
    </div>
  )
}

Add the same pattern for any route segment that handles sensitive operations (dashboard, settings, checkout). Each gets its own error.tsx.

Related

• Glossary: error boundary
• Blog: Error handling in AI-built apps