fix(nextjs): Fix Types of GlobalError (#592)

Co-authored-by: Luca Forstner <[email protected]>
getsentry · Jun 19, 2024 · fd473e0 · fd473e0
1 parent 9fc0e3b
commit fd473e0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- fix(nextjs): Fix Types of GlobalError (#592)
+
 ## 3.23.2
 
 - feat(nextjs): Detect typescript usage and emit files accordingly (#580)

diff --git a/src/nextjs/nextjs-wizard.ts b/src/nextjs/nextjs-wizard.ts
@@ -244,7 +244,7 @@ export async function runNextjsWizardWithTelemetry(
 
       await fs.promises.writeFile(
         path.join(process.cwd(), ...appDirLocation, newGlobalErrorFileName),
-        getSentryDefaultGlobalErrorPage(),
+        getSentryDefaultGlobalErrorPage(typeScriptDetected),
         { encoding: 'utf8', flag: 'w' },
       );
 

diff --git a/src/nextjs/templates.ts b/src/nextjs/templates.ts
@@ -377,11 +377,35 @@ export function getInstrumentationHookCopyPasteSnippet(
   });
 }
 
-export function getSentryDefaultGlobalErrorPage() {
-  return `"use client";
+export function getSentryDefaultGlobalErrorPage(isTs: boolean) {
+  return isTs
+    ? `"use client";
 
 import * as Sentry from "@sentry/nextjs";
-import Error from "next/error";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* \`NextError\` is the default Next.js error page component. Its type
+        definition requires a \`statusCode\` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}`
+    : `"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
 import { useEffect } from "react";
 
 export default function GlobalError({ error }) {
@@ -392,7 +416,11 @@ export default function GlobalError({ error }) {
   return (
     <html>
       <body>
-        <Error />
+        {/* \`NextError\` is the default Next.js error page component. Its type
+        definition requires a \`statusCode\` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
       </body>
     </html>
   );