135 lines
3.4 KiB
Text
135 lines
3.4 KiB
Text
---
|
|
title: error.js
|
|
description: API reference for the error.js special file.
|
|
---
|
|
|
|
An **error** file defines an error UI boundary for a route segment.
|
|
|
|
```tsx filename="app/dashboard/error.tsx" switcher
|
|
'use client' // Error components must be Client Components
|
|
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error
|
|
reset: () => void
|
|
}) {
|
|
useEffect(() => {
|
|
// Log the error to an error reporting service
|
|
console.error(error)
|
|
}, [error])
|
|
|
|
return (
|
|
<div>
|
|
<h2>Something went wrong!</h2>
|
|
<button
|
|
onClick={
|
|
// Attempt to recover by trying to re-render the segment
|
|
() => reset()
|
|
}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/dashboard/error.js" switcher
|
|
'use client' // Error components must be Client Components
|
|
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Error({ error, reset }) {
|
|
useEffect(() => {
|
|
// Log the error to an error reporting service
|
|
console.error(error)
|
|
}, [error])
|
|
|
|
return (
|
|
<div>
|
|
<h2>Something went wrong!</h2>
|
|
<button
|
|
onClick={
|
|
// Attempt to recover by trying to re-render the segment
|
|
() => reset()
|
|
}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
### `error`
|
|
|
|
An instance of an [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) object. This error can happen on the server or the client.
|
|
|
|
### `reset`
|
|
|
|
A function to reset the error boundary, which does not return a response.
|
|
|
|
> **Good to know**:
|
|
>
|
|
> - `error.js` boundaries must be **[Client Components](/docs/getting-started/react-essentials)**.
|
|
> - An `error.js` boundary will **not** handle errors thrown in a `layout.js` component in the **same** segment because the error boundary is nested **inside** that layouts component.
|
|
> - To handle errors for a specific layout, place an `error.js` file in the layouts parent segment.
|
|
> - To handle errors within the root layout or template, use a variation of `error.js` called `app/global-error.js`.
|
|
|
|
## `global-error.js`
|
|
|
|
To specifically handle errors in root `layout.js`, use a variation of `error.js` called `app/global-error.js` located in the root `app` directory.
|
|
|
|
```tsx filename="app/global-error.tsx" switcher
|
|
'use client'
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error
|
|
reset: () => void
|
|
}) {
|
|
return (
|
|
<html>
|
|
<body>
|
|
<h2>Something went wrong!</h2>
|
|
<button onClick={() => reset()}>Try again</button>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/global-error.js" switcher
|
|
'use client'
|
|
|
|
export default function GlobalError({ error, reset }) {
|
|
return (
|
|
<html>
|
|
<body>
|
|
<h2>Something went wrong!</h2>
|
|
<button onClick={() => reset()}>Try again</button>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
> **Good to know**:
|
|
>
|
|
> - `global-error.js` replaces the root `layout.js` when active and so **must** define its own `<html>` and `<body>` tags.
|
|
> - While designing error UI, you may find it helpful to use the [React Developer Tools](https://react.dev/learn/react-developer-tools) to manually toggle Error boundaries.
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | -------------------------- |
|
|
| `v13.1.0` | `global-error` introduced. |
|
|
| `v13.0.0` | `error` introduced. |
|