From f1bb1ddfcfb2b6ac3473bfd5a974a4279a791c91 Mon Sep 17 00:00:00 2001
From: Sarah Mischinger <sarah@codingwriter.com>
Date: Wed, 26 Feb 2025 17:02:44 +0100
Subject: [PATCH] move content about error capturing to "Capturing Errors and
 Events" from "Manual Setup" (Next.js) (#12786)

* move capture error content

* adapt formatting

* formatting fix

Co-authored-by: Charly Gomez <charly.gomez@sentry.io>

---------

Co-authored-by: Charly Gomez <charly.gomez@sentry.io>
---
 .../javascript/guides/nextjs/manual-setup.mdx | 47 ------------------
 .../capture-error/javascript.nextjs.mdx       | 49 +++++++++++++++++++
 2 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx
index 9c0b02f5f42d89..0ccaee2372c5e0 100644
--- a/docs/platforms/javascript/guides/nextjs/manual-setup.mdx
+++ b/docs/platforms/javascript/guides/nextjs/manual-setup.mdx
@@ -239,53 +239,6 @@ export default function GlobalError({ error }) {
 }
 ```
 
-Note that if you create [Next.js error.js files](https://nextjs.org/docs/app/building-your-application/routing/error-handling), these files will take precedence over the `global-error.js` file.
-This means, that if you want to report errors that are caught by `error.js` files, you need to manually capture them:
-
-```tsx {filename:error.tsx}
-"use client";
-
-import { useEffect } from "react";
-import * as Sentry from "@sentry/nextjs";
-
-export default function ErrorPage({
-  error,
-}: {
-  error: Error & { digest?: string };
-}) {
-  useEffect(() => {
-    // Log the error to Sentry
-    Sentry.captureException(error);
-  }, [error]);
-
-  return (
-    <div>
-      <h2>Something went wrong!</h2>
-    </div>
-  );
-}
-```
-
-```jsx {filename:error.jsx}
-"use client";
-
-import { useEffect } from "react";
-import * as Sentry from "@sentry/nextjs";
-
-export default function ErrorPage({ error }) {
-  useEffect(() => {
-    // Log the error to Sentry
-    Sentry.captureException(error);
-  }, [error]);
-
-  return (
-    <div>
-      <h2>Something went wrong!</h2>
-    </div>
-  );
-}
-```
-
 #### Errors from Nested React Server Components
 
 _Requires `@sentry/nextjs` version `8.28.0` or higher and Next.js 15._
diff --git a/platform-includes/capture-error/javascript.nextjs.mdx b/platform-includes/capture-error/javascript.nextjs.mdx
index bd719fc8f92663..b262d0650a90d1 100644
--- a/platform-includes/capture-error/javascript.nextjs.mdx
+++ b/platform-includes/capture-error/javascript.nextjs.mdx
@@ -9,3 +9,52 @@ try {
   Sentry.captureException(err);
 }
 ```
+
+### Capturing Errors in `error.js` Files
+
+Note that if you create [Next.js error.js files](https://nextjs.org/docs/app/building-your-application/routing/error-handling), these files will take precedence over any global error handling.
+This means, that if you want to report errors that are caught by `error.js` files, you need to manually capture them:
+
+```tsx {filename:error.tsx}
+"use client";
+
+import { useEffect } from "react";
+import * as Sentry from "@sentry/nextjs";
+
+export default function ErrorPage({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    // Log the error to Sentry
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+    </div>
+  );
+}
+```
+
+```jsx {filename:error.jsx}
+"use client";
+
+import { useEffect } from "react";
+import * as Sentry from "@sentry/nextjs";
+
+export default function ErrorPage({ error }) {
+  useEffect(() => {
+    // Log the error to Sentry
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+    </div>
+  );
+}
+```