Add Error Boundaries Around Unreliable Content

// ❌ If AnalyticsChart throws, the entire dashboard crashes
export default async function DashboardPage() {
  const user = await fetchUser()
  const analytics = await fetchAnalytics()
 
  return (
    <div>
      <UserHeader user={user} />
      <AnalyticsChart data={analytics} />  {/* If this throws = blank page */}
      <RecentActivity />
    </div>
  )
}

// app/dashboard/error.tsx
'use client'
 
export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong loading the dashboard.</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

// ✅ Isolate failures so the rest of the page still works
import { ErrorBoundary } from 'react-error-boundary'
 
export default async function DashboardPage() {
  const user = await fetchUser()
 
  return (
    <div>
      <UserHeader user={user} />
 
      <ErrorBoundary fallback={<p>Charts temporarily unavailable.</p>}>
        <Suspense fallback={<ChartSkeleton />}>
          <AnalyticsChart userId={user.id} />
        </Suspense>
      </ErrorBoundary>
 
      <ErrorBoundary fallback={<p>Could not load activity feed.</p>}>
        <Suspense fallback={<ActivitySkeleton />}>
          <RecentActivity userId={user.id} />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}

// app/dashboard/[id]/not-found.tsx
export default function NotFound() {
  return <p>This dashboard does not exist.</p>
}
 
// app/dashboard/[id]/page.tsx
import { notFound } from 'next/navigation'
 
export default async function DashboardPage({ params }: { params: { id: string } }) {
  const dashboard = await fetchDashboard(params.id)
  if (!dashboard) notFound()
 
  return <Dashboard data={dashboard} />
}

# Find route segments missing error.tsx
find src/app -type d | while read dir; do
  if [ -f "$dir/page.tsx" ] && [ ! -f "$dir/error.tsx" ]; then
    echo "Missing error.tsx: $dir"
  fi
done