.

Luca Forstner · Luca Forstner · commit e996bc870520 · 2023-03-03T15:53:16.000Z
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/error.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/error.tsx
@@ -3,7 +3,7 @@
 export default function Error({ error, reset }: { error: Error; reset: () => void }) {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
-      <h2>Error (/client-component/render-error)</h2>
+      <h2>Error (/client-component)</h2>
       <button onClick={() => reset()}>Reset</button>
       Error: {error.toString()}
     </div>
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/layout.tsx
@@ -1,9 +1,9 @@
-import Link from 'next/link';
+'use client';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
-      <h1>Layout (/client-component/render-error)</h1>
+      <h1>Layout (/client-component)</h1>
       {children}
     </div>
   );
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/loading.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/loading.tsx
@@ -1,7 +1,7 @@
 export default function Loading() {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
-      <h2>Loading (/client-component/render-error)</h2>
+      <h2>Loading (/client-component)</h2>
     </div>
   );
 }
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/not-found.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/not-found.tsx
@@ -1,7 +1,7 @@
 export default function NotFound() {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
-      <h2>Not found (/client-component/render-error)</h2>;
+      <h2>Not found (/client-component)</h2>;
     </div>
   );
 }
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/page.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/page.tsx
@@ -1,9 +1,11 @@
-import { ClientErrorDebugTools } from '../../../components/client-error-debug-tools';
+'use client';
+
+import { ClientErrorDebugTools } from '../../components/client-error-debug-tools';
 
 export default function Page() {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
-      <h2>Page (/client-component/render-error)</h2>
+      <h2>Page (/client-component)</h2>
       <ClientErrorDebugTools />
     </div>
   );
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/layout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/loading.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/loading.tsx
@@ -1,7 +1,7 @@
 export default function Loading() {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
-      <h2>Loading (/)</h2>
+      <h2>Loading (/client-component/parameter/[...parameters])</h2>
     </div>
   );
 }
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/page.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[...parameters]/page.tsx
@@ -1,12 +1,15 @@
-'use client';
-
 import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
 
-export default function Page() {
+export default function Page({ params }: { params: Record<string, string> }) {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
       <h2>Page (/client-component/[...parameters])</h2>
+      <p>Params: {JSON.stringify(params['parameters'])}</p>
       <ClientErrorDebugTools />
     </div>
   );
 }
+
+export async function generateStaticParams() {
+  return [{ parameters: ['foo', 'bar', 'baz'] }];
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/layout.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/page.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/client-component/parameter/[parameter]/page.tsx
@@ -1,10 +1,15 @@
 import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
 
-export default function Page() {
+export default function Page({ params }: { params: Record<string, string> }) {
   return (
     <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
       <h2>Page (/client-component/[parameter])</h2>
+      <p>Parameter: {JSON.stringify(params['parameter'])}</p>
       <ClientErrorDebugTools />
     </div>
   );
 }
+
+export async function generateStaticParams() {
+  return [{ parameter: '42' }];
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/layout.tsx
@@ -9,19 +9,25 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           <h1>Layout (/)</h1>
           <ul>
             <li>
-              <Link href="/client-component/parameter/foo/bar/baz">/client-component/parameter/foo/bar/baz</Link>
+              <Link href="/">/</Link>
+            </li>
+            <li>
+              <Link href="/client-component">/client-component</Link>
             </li>
             <li>
-              <Link href="/client-component/parameter/1/2">/client-component/parameter/1/2</Link>
+              <Link href="/client-component/parameter/42">/client-component/parameter/42</Link>
+            </li>
+            <li>
+              <Link href="/client-component/parameter/foo/bar/baz">/client-component/parameter/foo/bar/baz</Link>
             </li>
             <li>
-              <Link href="/client-component/parameter/1/2">/client-component/parameter/1/2</Link>
+              <Link href="/server-component">/server-component</Link>
             </li>
             <li>
-              <Link href="/client-component/parameter/1/2">/client-component/parameter/1/2</Link>
+              <Link href="/server-component/parameter/42">/server-component/parameter/42</Link>
             </li>
             <li>
-              <Link href="/client-component/parameter/1/2">/client-component/parameter/1/2</Link>
+              <Link href="/server-component/parameter/foo/bar/baz">/server-component/parameter/foo/bar/baz</Link>
             </li>
           </ul>
           <TransactionContextProvider>{children}</TransactionContextProvider>
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/error.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/error.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/server-component)</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/layout.tsx
@@ -0,0 +1,8 @@
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/server-component)</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/loading.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/loading.tsx
@@ -0,0 +1,7 @@
+export default async function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/server-component)</h2>
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/not-found.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/not-found.tsx
@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/server-component)</h2>;
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/page.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/page.tsx
@@ -0,0 +1,12 @@
+import { ClientErrorDebugTools } from '../../components/client-error-debug-tools';
+
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/server-component)</h2>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/error.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/error.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/server-component/[...parameters])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/layout.tsx
@@ -0,0 +1,8 @@
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/server-component/[...parameters])</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/loading.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/loading.tsx
@@ -0,0 +1,7 @@
+export default async function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/server-component/[...parameters])</h2>
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/not-found.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/not-found.tsx
@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/server-component/[...parameters])</h2>;
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/page.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[...parameters]/page.tsx
@@ -0,0 +1,13 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page({ params }: { params: Record<string, string> }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/server-component/[...parameters])</h2>
+      <p>Params: {JSON.stringify(params['parameters'])}</p>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/error.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/error.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Error (/server-component/[parameter])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/layout.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/layout.tsx
@@ -0,0 +1,8 @@
+export default async function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/server-component/[parameter])</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/loading.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/loading.tsx
@@ -0,0 +1,7 @@
+export default async function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/server-component/[parameter])</h2>
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/not-found.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/not-found.tsx
@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/server-component/[parameter])</h2>;
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/page.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/app/server-component/parameter/[parameter]/page.tsx
@@ -0,0 +1,13 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page({ params }: { params: Record<string, string> }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/server-component/[parameter])</h2>
+      <p>Parameter: {JSON.stringify(params['parameter'])}</p>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/components/client-error-debug-tools.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/components/client-error-debug-tools.tsx
@@ -10,6 +10,11 @@ export function ClientErrorDebugTools() {
   const [isFetchingAPIRoute, setIsFetchingAPIRoute] = useState<boolean>();
   const [isFetchingEdgeAPIRoute, setIsFetchingEdgeAPIRoute] = useState<boolean>();
   const [isFetchingExternalAPIRoute, setIsFetchingExternalAPIRoute] = useState<boolean>();
+  const [renderError, setRenderError] = useState<boolean>();
+
+  if (renderError) {
+    throw new Error('Render Error');
+  }
 
   return (
     <div>
@@ -38,6 +43,14 @@ export function ClientErrorDebugTools() {
         Throw promise rejection
       </button>
       <br />
+      <button
+        onClick={() => {
+          setRenderError(true);
+        }}
+      >
+        Cause render error
+      </button>
+      <br />
       <br />
       <button
         onClick={async () => {
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/components/transaction-context.tsx b/packages/e2e-tests/test-applications/nextjs-app-dir/components/transaction-context.tsx
@@ -2,7 +2,7 @@
 
 import { createContext, PropsWithChildren, useState } from 'react';
 import { Transaction } from '@sentry/types';
-import { startTransaction } from '@sentry/nextjs';
+import { startTransaction, getCurrentHub } from '@sentry/nextjs';
 
 export const TransactionContext = createContext<{ transactionActive: boolean; toggle: () => void }>({
   transactionActive: false,
@@ -21,7 +21,9 @@ export function TransactionContextProvider({ children }: PropsWithChildren) {
             transaction.finish();
             setTransaction(undefined);
           } else {
-            setTransaction(startTransaction({ name: 'Manual Transaction' }));
+            const t = startTransaction({ name: 'Manual Transaction' });
+            getCurrentHub().getScope()?.setSpan(t);
+            setTransaction(t);
           }
         },
       }}
diff --git a/packages/e2e-tests/test-applications/nextjs-app-dir/tests/devErrorSymbolification.test.ts b/packages/e2e-tests/test-applications/nextjs-app-dir/tests/devErrorSymbolification.test.ts
@@ -8,13 +8,13 @@ test.describe('dev mode error symbolification', () => {
   }
 
   test('should have symbolicated dev errors', async ({ page }) => {
-    await page.goto('/client-component');
+    await page.goto('/client-component/parameter/42');
 
     const errorEventPromise = waitForError('nextjs-13-app-dir', errorEvent => {
-      return errorEvent?.exception?.values?.[0]?.value === 'client-component-button-click-error';
+      return errorEvent?.exception?.values?.[0]?.value === 'Click Error';
     });
 
-    await page.locator('id=exception-button').click();
+    await page.getByText('Throw error').click();
 
     const errorEvent = await errorEventPromise;
     const errorEventFrames = errorEvent.exception?.values?.[0]?.stacktrace?.frames;

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`export default function Loading() {`
`2`	`2`	`return (`
`3`	`3`	`<div style={{ border: '1px solid lightgrey', padding: '12px' }}>`
`4`		`- <h2>Loading (/client-component/render-error)</h2>`
	`4`	`+ <h2>Loading (/client-component)</h2>`
`5`	`5`	`</div>`
`6`	`6`	`);`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`export default function NotFound() {`
`2`	`2`	`return (`
`3`	`3`	`<div style={{ border: '1px solid lightgrey', padding: '12px' }}>`
`4`		`- <h2>Not found (/client-component/render-error)</h2>;`
	`4`	`+ <h2>Not found (/client-component)</h2>;`
`5`	`5`	`</div>`
`6`	`6`	`);`
`7`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+'use client';`
	`2`	`+`
`1`	`3`	`export default function Layout({ children }: { children: React.ReactNode }) {`
`2`	`4`	`return (`
`3`	`5`	`<div style={{ border: '1px solid lightgrey', padding: '12px' }}>`