e2e(nextjs): add nextjs app dir project with page extensions

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+!*.d.ts
+
+# Sentry
+.sentryclirc
+
+.vscode
+
+test-results

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/.npmrc

@@ -0,0 +1,2 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/(nested-layout)/layout.custom.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+export const dynamic = 'force-dynamic';
+
+export default function Layout({ children }: PropsWithChildren<{}>) {
+  return (
+    <div>
+      <p>Layout</p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/(nested-layout)/nested-layout/layout.custom.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+
+export const dynamic = 'force-dynamic';
+
+export default function Layout({ children }: PropsWithChildren<{}>) {
+  return (
+    <div>
+      <p>Layout</p>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/(nested-layout)/nested-layout/page.custom.tsx

@@ -0,0 +1,11 @@
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  return <p>Hello World!</p>;
+}
+
+export async function generateMetadata() {
+  return {
+    title: 'I am generated metadata',
+  };
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/error.custom.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 (/client-component)</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/layout.custom.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/client-component)</h1>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/loading.custom.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/client-component)</h2>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/not-found.custom.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/client-component)</h2>;
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/page.custom.tsx

@@ -0,0 +1,12 @@
+'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)</h2>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[...parameters]/error.custom.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 (/client-component/[...parameters])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[...parameters]/layout.custom.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/client-component/[...parameters])</h1>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[...parameters]/loading.custom.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/client-component/parameter/[...parameters])</h2>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[...parameters]/not-found.custom.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/client-component/[...parameters])</h2>;
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[...parameters]/page.custom.tsx

@@ -0,0 +1,15 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+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'] }];
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[parameter]/error.custom.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 (/client-component/[parameter])</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[parameter]/layout.custom.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h1>Layout (/client-component/[parameter])</h1>
+      {children}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[parameter]/loading.custom.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/client-component/[parameter])</h2>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[parameter]/not-found.custom.tsx

@@ -0,0 +1,7 @@
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/client-component/[parameter])</h2>;
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/client-component/parameter/[parameter]/page.custom.tsx

@@ -0,0 +1,15 @@
+import { ClientErrorDebugTools } from '../../../../components/client-error-debug-tools';
+
+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' }];
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/edge-server-components/error/page.custom.tsx

@@ -0,0 +1,12 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+
+export const dynamic = 'force-dynamic';
+
+export const runtime = 'edge';
+
+export default async function Page() {
+  Sentry.setTag('my-isolated-tag', true);
+  Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+  throw new Error('Edge Server Component Error');
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/edge-server-components/page.custom.tsx

@@ -0,0 +1,13 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+
+export const dynamic = 'force-dynamic';
+
+export const runtime = 'edge';
+
+export default async function Page() {
+  Sentry.setTag('my-isolated-tag', true);
+  Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+  return <h1>Hello world!</h1>;
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/error.custom.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 (/)</h2>
+      <button onClick={() => reset()}>Reset</button>
+      Error: {error.toString()}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/layout.custom.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import { SpanContextProvider } from '../components/span-context';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+          <h1>Layout (/)</h1>
+          <ul>
+            <li>
+              <Link href="/">/</Link>
+            </li>
+            <li>
+              <Link href="/client-component">/client-component</Link>
+            </li>
+            <li>
+              <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="/server-component">/server-component</Link>
+            </li>
+            <li>
+              <Link href="/server-component/parameter/42">/server-component/parameter/42</Link>
+            </li>
+            <li>
+              <Link href="/server-component/parameter/foo/bar/baz">/server-component/parameter/foo/bar/baz</Link>
+            </li>
+            <li>
+              <Link href="/not-found">/not-found</Link>
+            </li>
+            <li>
+              <Link href="/redirect">/redirect</Link>
+            </li>
+          </ul>
+          <SpanContextProvider>{children}</SpanContextProvider>
+        </div>
+      </body>
+    </html>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/loading.custom.tsx

@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Loading (/)</h2>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/not-found.custom.tsx

@@ -0,0 +1,10 @@
+import { ClientErrorDebugTools } from '../components/client-error-debug-tools';
+
+export default function NotFound() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Not found (/)</h2>;
+      <ClientErrorDebugTools />
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/page.custom.tsx

@@ -0,0 +1,10 @@
+import { ClientErrorDebugTools } from '../components/client-error-debug-tools';
+
+export default function Page() {
+  return (
+    <div style={{ border: '1px solid lightgrey', padding: '12px' }}>
+      <h2>Page (/)</h2>
+      <ClientErrorDebugTools />
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/route-handlers/[param]/edge/route.custom.ts

@@ -0,0 +1,16 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+
+export const runtime = 'edge';
+
+export async function PATCH() {
+  return NextResponse.json({ name: 'John Doe' }, { status: 401 });
+}
+
+export async function DELETE(): Promise<Response> {
+  Sentry.setTag('my-isolated-tag', true);
+  Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+  throw new Error('route-handler-edge-error');
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/route-handlers/[param]/error/route.custom.ts

@@ -0,0 +1,9 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+
+export async function PUT(): Promise<Response> {
+  Sentry.setTag('my-isolated-tag', true);
+  Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+  throw new Error('route-handler-error');
+}

dev-packages/e2e-tests/test-applications/nextjs-app-dir-with-page-extensions/app/route-handlers/[param]/route.custom.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({ name: 'John Doe' });
+}
+
+export async function POST() {
+  return NextResponse.json({ name: 'John Doe' }, { status: 404 });
+}