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. 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' import { notFound } from 'next/navigation'
export default async function Component() { export default async function Page() {
try { try {
notFound() const post = await fetch('https://.../posts/1').then((res) => res.json())
await getData() if (!post) notFound()
} catch (err) { } catch (err) {
console.error(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 You can use `unstable_rethrow` API to re-throw the internal error and continue with the expected behavior:
the `not-found.js` page from rendering. Instead, you can do this:
```jsx ```tsx filename="@/app/ui/component.tsx"
import { notFound, unstable_rethrow } from 'next/navigation' import { notFound, unstable_rethrow } from 'next/navigation'
export default async function Component() { export default async function Page() {
try { try {
notFound() const post = await fetch('https://.../posts/1').then((res) => res.json())
await getData() if (!post) notFound()
} catch (err) { } catch (err) {
unstable_rethrow(err) unstable_rethrow(err)
console.error(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: 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) - [`notFound()`](/docs/app/api-reference/functions/not-found)