Error

1
'use client';
2

3
export default function Error({
4
  error,
5
  reset,
6
}: {
7
  error: Error & { digest?: string };
8
  reset: () => void;
9
}) {
10
  return (
11
    <div className="error-container">
12
      <h2>Something went wrong</h2>
13
      <p>{error.message}</p>
14
      // !mark
15
      <button onClick={() => reset()}>Try again</button>
16
    </div>
17
  );
18
}

Demo

1. Navigate through categories using the tabs above.
2. Trigger an error by clicking the "Trigger Error" button.
3. Observe containment — only the affected segment shows the error.
4. Try the reset button — attempt to recover from the error state.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Always include a recovery path — reset button or navigation link.
• Avoid leaking sensitive error details to users in production.
• Log errors server-side for debugging while showing friendly messages client-side.

Learn More

• Error Handling
• Recovering from Errors