Docs: Update unstable_rethrow example (#67494)

re: https://x.com/jamannnnnn/status/1809133455592067373
This commit is contained in:
Delba de Oliveira 2024-07-05 16:55:24 +01:00 committed by GitHub
parent 1268f99e9e
commit 7e37892806
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -3,33 +3,32 @@ title: unstable_rethrow (experimental)
description: API Reference for the unstable_rethrow function.
---
`unstable_rethrow` can be used to avoid catching internal errors thrown by Next.js when attempting to handle errors thrown from your own application.
`unstable_rethrow` can be used to avoid catching internal errors thrown by Next.js when attempting to handle errors thrown in your application code.
For example, given the following code:
For example, calling the `notFound` function will throw an internal Next.js error and render the [`not-found.js`](/docs/app/api-reference/file-conventions/not-found) component. However, if used inside a `try/catch` block, the error will be caught, preventing `not-found.js` from rendering:
```jsx
```tsx filename="@/app/ui/component.tsx"
import { notFound } from 'next/navigation'
export default async function Component() {
export default async function Page() {
try {
notFound()
await getData()
const post = await fetch('https://.../posts/1').then((res) => res.json())
if (!post) notFound()
} catch (err) {
console.error(err)
}
}
```
In this scenario, `console.error` will pick up the error thrown by `notFound`, which won't be useful for logging and will prevent
the `not-found.js` page from rendering. Instead, you can do this:
You can use `unstable_rethrow` API to re-throw the internal error and continue with the expected behavior:
```jsx
```tsx filename="@/app/ui/component.tsx"
import { notFound, unstable_rethrow } from 'next/navigation'
export default async function Component() {
export default async function Page() {
try {
notFound()
await getData()
const post = await fetch('https://.../posts/1').then((res) => res.json())
if (!post) notFound()
} catch (err) {
unstable_rethrow(err)
console.error(err)
@ -37,9 +36,6 @@ export default async function Component() {
}
```
If the caught error is meant to be handled by Next.js, `unstable_rethrow` will re-throw the error instead of letting it reach your
error handling code.
The following Next.js APIs rely on throwing an error which should be rethrown and handled by Next.js itself:
- [`notFound()`](/docs/app/api-reference/functions/not-found)