From 7e37892806ac87ff02df4ddceb9644e32b68d512 Mon Sep 17 00:00:00 2001
From: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:55:24 +0100
Subject: [PATCH] Docs: Update unstable_rethrow example (#67494)

re: https://x.com/jamannnnnn/status/1809133455592067373
---
 .../04-functions/unstable_rethrow.mdx         | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx b/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx
index 2ca13c3619..c9019233b4 100644
--- a/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx
+++ b/docs/02-app/02-api-reference/04-functions/unstable_rethrow.mdx
@@ -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)