add next 13; align next 14

Author: s1gr1d

README.md

@@ -8,18 +8,19 @@ example applications can also be used as a reference for using the JS SDKs.
 
 ## How to test apps and save the payloads
 
-1. Change the proxy-server options in  `utils/event-proxy-server/start-event-proxy.ts` 
+1. Change the proxy-server options in `utils/event-proxy-server/start-event-proxy.ts`
    - `appName`: the app folder name you want to test (e.g. `apps/express` -> `appName: 'express'`)
    - `filenameOrigin`: where the filename comes from (usually `url` but sometimes `transactionName`)
 2. Make sure you have a folder named like the app in `payload-files`.
    - Example: `apps/express` -> `payload-files/express`
-3. Run `yarn start:proxy-server`.
-4. Run `yarn start:[app]` like `start:express`.
-5. Check the "Disable Cache" option in the DevTools Network tab of your browser.
-6. Open the following URLs in your browser.
-7. The json file will be generated.
+3. Add an env variable for `E2E_TEST_DSN`
+4. Run `yarn start:proxy-server`.
+5. Run `yarn start:[app]` like `start:express`.
+6. Check the "Disable Cache" option in the DevTools Network tab of your browser.
+7. Open the following URLs in your browser.
+8. The json file will be generated.
 
-### Test URLs
+### Test URLs (for servers like express, fastify)
 
 - http://localhost:3030/test-success
 - http://localhost:3030/test-error
@@ -29,3 +30,8 @@ example applications can also be used as a reference for using the JS SDKs.
 - http://localhost:3030/test-error-manual
 - http://localhost:3030/test-local-variables-caught
 - http://localhost:3030/test-local-variables-uncaught
+
+### Test URLs (for meta frameworks like Next.js)
+
+- http://localhost:3000/test-route-handlers
+  - click all the buttons to make requests

apps/nextjs-13_2_0/.gitignore

@@ -0,0 +1,36 @@
+# 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

apps/nextjs-13_2_0/app/api/test-error-manual/route.ts

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function GET() {
+  Sentry.startSpan({ name: 'test-span' }, () => {
+    Sentry.startSpan({ name: 'child-span' }, () => {
+      Sentry.captureException(new Error('This is an error'));
+    });
+  });
+
+  await Sentry.flush();
+
+  return Response.json({ data: 'test-error-body' });
+}

apps/nextjs-13_2_0/app/api/test-error/route.ts

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function GET() {
+  const exceptionId = Sentry.captureException(new Error('This is an error'));
+
+  await Sentry.flush(2000);
+  return Response.json({ exceptionId });
+}

apps/nextjs-13_2_0/app/api/test-local-variables-caught/route.ts

@@ -0,0 +1,14 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function GET() {
+  const randomVariableToRecord = 'LOCAL_VARIABLE';
+
+  let exceptionId: string;
+  try {
+    throw new Error('Local Variable Error');
+  } catch (e) {
+    exceptionId = Sentry.captureException(e);
+  }
+
+  return Response.json({ exceptionId, randomVariableToRecord });
+}

apps/nextjs-13_2_0/app/api/test-local-variables-uncaught/route.ts

@@ -0,0 +1,4 @@
+export async function GET() {
+  const randomVariableToRecord = 'LOCAL_VARIABLE';
+  throw new Error(`Uncaught Local Variable Error - ${JSON.stringify({ randomVariableToRecord })}`);
+}

apps/nextjs-13_2_0/app/api/test-param-error/[param]/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest } from 'next/server';
+import * as Sentry from '@sentry/nextjs';
+
+export async function GET(request: NextRequest) {
+  const exceptionId = Sentry.captureException(new Error('This is an error'));
+
+  await Sentry.flush(2000);
+
+  const { pathname } = new URL(request.url);
+
+  const params = pathname.split('/').filter(Boolean);
+  const param = params[params.length - 1];
+
+  return Response.json({ exceptionId, paramWas: param });
+}

apps/nextjs-13_2_0/app/api/test-param-success/[param]/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const { pathname } = new URL(request.url);
+
+  const params = pathname.split('/').filter(Boolean);
+  const param = params[params.length - 1];
+
+  return Response.json({ paramWas: param });
+}

apps/nextjs-13_2_0/app/api/test-success-manual/route.ts

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function GET() {
+  Sentry.startSpan({ name: 'test-span' }, () => {
+    Sentry.startSpan({ name: 'child-span' }, () => {});
+  });
+
+  await Sentry.flush();
+
+  return Response.json({ data: 'test-success-body' });
+}

apps/nextjs-13_2_0/app/api/test-success/route.ts

@@ -0,0 +1,3 @@
+export async function GET() {
+  return Response.json({ version: 'v1' });
+}

apps/nextjs-13_2_0/app/globals.css

@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  font-family: sans-serif;
+}
+
+a {
+  margin: 1rem;
+}

apps/nextjs-13_2_0/app/layout.tsx

@@ -0,0 +1,14 @@
+import './globals.css';
+import { ReactNode } from 'react';
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

apps/nextjs-13_2_0/app/page.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <main>
+      <ul>
+        <li>
+          <Link href={'/test-route-handlers'}>Test Route Handlers</Link>
+        </li>
+      </ul>
+    </main>
+  );
+}

apps/nextjs-13_2_0/app/test-route-handlers/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useFetchData } from '@/utils/fetchData';
+
+const displayData = (data: any) => (data ? JSON.stringify(data, null, 2) : 'No data');
+
+export default function Home() {
+  const { data: dataSuccess, fetchData: testSuccess } = useFetchData('/api/test-success');
+  const { error: testErrorError, fetchData: testError } = useFetchData('/api/test-error');
+  const { data: dataParamSuccess, fetchData: testParamSuccess } = useFetchData(
+    '/api/test-param-success/1337',
+  );
+  const { data: dataParamError, fetchData: testParamError } = useFetchData(
+    'api/test-param-error/1337',
+  );
+  const { data: dataSuccessManual, fetchData: testSuccessManual } = useFetchData(
+    '/api/test-success-manual',
+  );
+  const { data: dataErrorManual, fetchData: testErrorManual } =
+    useFetchData('/api/test-error-manual');
+  const { data: dataLocalVariablesUncaught, fetchData: testLocalVariablesUncaught } = useFetchData(
+    '/api/test-local-variables-uncaught',
+  );
+  const { data: dataLocalVariablesCaught, fetchData: testLocalVariablesCaught } = useFetchData(
+    '/api/test-local-variables-caught',
+  );
+
+  return (
+    <main>
+      <div>
+        <h1>Layout (/)</h1>
+        <button onClick={() => testSuccess()}>Test Success</button>
+        <p>{displayData(dataSuccess)}</p>
+
+        <button onClick={() => testError()}>Test Error</button>
+        <p>{displayData(testErrorError)}</p>
+
+        <button onClick={() => testParamSuccess()}>Test Param Success</button>
+        <p>{displayData(dataParamSuccess)}</p>
+
+        <button onClick={() => testParamError()}>Test Param Error</button>
+        <p>{displayData(dataParamError)}</p>
+
+        <button onClick={() => testSuccessManual()}>Test Success Manual</button>
+        <p>{displayData(dataSuccessManual)}</p>
+
+        <button onClick={() => testErrorManual()}>Test Error Manual</button>
+        <p>{displayData(dataErrorManual)}</p>
+
+        <button onClick={() => testLocalVariablesUncaught()}>Test Local Variables Uncaught</button>
+        <p>{displayData(dataLocalVariablesUncaught)}</p>
+
+        <button onClick={() => testLocalVariablesCaught()}>Test Local Variables Caught</button>
+        <p>{displayData(dataLocalVariablesCaught)}</p>
+      </div>
+    </main>
+  );
+}

apps/nextjs-13_2_0/next.config.js

@@ -0,0 +1,10 @@
+const { withSentryConfig } = require('@sentry/nextjs');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    appDir: true,
+  },
+};
+
+module.exports = withSentryConfig(nextConfig);

apps/nextjs-13_2_0/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "nextjs-13_2_0-test-application",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3030",
+    "build": "next build",
+    "start": "next start -p 3030",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@sentry/nextjs": "7.110.1",
+    "@types/node": "20.12.7",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
+    "next": "14.2.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.4.5"
+  }
+}

apps/nextjs-13_2_0/public/favicon.ico

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: 'https://3b6c388182fb435097f41d181be2b2ba@o4504321058471936.ingest.sentry.io/4504321066008576',
+  includeLocalVariables: true,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1,
+});

apps/nextjs-13_2_0/sentry.client.config.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: 'https://3b6c388182fb435097f41d181be2b2ba@o4504321058471936.ingest.sentry.io/4504321066008576',
+  includeLocalVariables: true,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1,
+});

apps/nextjs-13_2_0/sentry.edge.config.ts

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
+  dsn: 'https://3b6c388182fb435097f41d181be2b2ba@o4504321058471936.ingest.sentry.io/4504321066008576',
+  includeLocalVariables: true,
+  tunnel: `http://localhost:3031/`, // proxy server
+  tracesSampleRate: 1,
+});

apps/nextjs-13_2_0/sentry.server.config.ts

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "noEmit": true
+  }
+}

apps/nextjs-13_2_0/tsconfig.json

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+export function useFetchData(url: string) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(url);
+      if (response.ok) {
+        const data = await response.json();
+        setData(data);
+      } else {
+        throw new Error('Error fetching data');
+      }
+    } catch (error) {
+      setError(error as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { data, loading, error, fetchData };
+}

apps/nextjs-13_2_0/utils/fetchData.ts

@@ -12,6 +12,5 @@ body {
 }
 
 a {
-  color: inherit;
-  text-decoration: none;
+  margin: 1rem;
 }