Handling Errors

No error handling

Open Live Example

Full Example Source

What happens when you render a page that throws an error? Let's find out!

page.tsx
export default function NoHandling() {
  return (
    <>
      <p>
        This page demonstrates what happens when an error is thrown in a
        component and there is no error boundary to catch it. The error will
        bubble up to the nearest error boundary, which in this case is the root
        of the app.
      </p>

      <ErrorComponent />
    </>
  )
}

function ErrorComponent() {
  throw new Error('Error thrown in component')

  return 'This will never be rendered'
}

What you see will depend on whether you are running in dev or production mode. Here's what dev looks like:

This is what you will see in dev mode
This is what you will see in dev mode

And here's what production looks like:

This is what you will see in production mode
This is what you will see in production mode

That's not the greatest user experience in the world, and even though only one component in our app is throwing an error, the entire app is affected. Let's see how we can improve this with either an explicit error boundary or an error.tsx.

Live Demo

This example can't be easily inlined as it demonstrates how a full-page feels to the end user. Here it is inside an iframe, and there's a looping video below too.

Click here to test it out yourself

This is an iframe pointing to /examples/errors/no-handling

Similar Examples

Using error.tsx

pageerrorboundary

Using the error.tsx convention to catch errors

Previous
Various data types
Next
Explicit Error Boundary