Careeroza

error.tsx

Error Boundaries per Segment

If a Server or Client Component in a segment throws, the nearest error.tsx renders instead of that segment. The layout above it keeps working. error.tsx must be a Client Component.

app/products/error.tsx

'use client';

import { useEffect } from 'react';

export default function ProductsError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error); // send to Sentry / your logger
  }, [error]);

  return (
    <div role="alert">
      <h2>Could not load products</h2>
      <p>Please try again. (Ref: {error.digest})</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Security Detail

Note: In production, errors thrown in Server Components reach the browser without their message (so secrets in error text do not leak). You only get a digest that matches the server log line.

Example

npm run start   # then open /products while the API is down

Example output

 ⨯ Error: Failed to load products: 503
    at getProducts (.next/server/app/products/page.js:1:1823) {
  digest: '2938417652'
}

Expected Errors Are Not Exceptions

Tip: Validation errors, "out of stock" and "not found" are expected. Return them as values (or call notFound()) instead of throwing. Use error.tsx for unexpected failures.