test(react-router): Add basic e2e test

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});

dev-packages/e2e-tests/package.json

@@ -16,7 +16,7 @@
  "clean": "rimraf tmp node_modules && yarn clean:test-applications && yarn clean:pnpm",
  "ci:build-matrix": "ts-node ./lib/getTestMatrix.ts",
  "ci:build-matrix-optional": "ts-node ./lib/getTestMatrix.ts --optional=true",
- "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,pnpm-lock.yaml,.last-run.json,test-results}",
+ "clean:test-applications": "rimraf --glob test-applications/**/{node_modules,dist,build,.next,.nuxt,.sveltekit,.react-router,pnpm-lock.yaml,.last-run.json,test-results}",
  "clean:pnpm": "pnpm store prune"
  },
  "devDependencies": {

dev-packages/e2e-tests/test-applications/react-router-7-framework/.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+!*.d.ts
+
+# react router
+.react-router

dev-packages/e2e-tests/test-applications/react-router-7-framework/.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/react-router-7-framework/app/app.css

@@ -0,0 +1,6 @@
+html,
+body {
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.client.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/react-router';
+import { StrictMode, startTransition } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HydratedRouter } from 'react-router/dom';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ // todo: get this from env
+ dsn: 'https://username@domain/123',
+ tunnel: `http://localhost:3031/`, // proxy server
+ integrations: [Sentry.browserTracingIntegration()],
+ tracesSampleRate: 1.0,
+ tracePropagationTargets: [/^\//],
+});
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+ <StrictMode>
+ <HydratedRouter />
+ </StrictMode>,
+ );
+});

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/entry.server.tsx

@@ -0,0 +1,73 @@
+import { PassThrough } from 'node:stream';
+
+import { createReadableStreamFromReadable } from '@react-router/node';
+import * as Sentry from '@sentry/react-router';
+import { isbot } from 'isbot';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { renderToPipeableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+ request: Request,
+ responseStatusCode: number,
+ responseHeaders: Headers,
+ routerContext: EntryContext,
+ loadContext: AppLoadContext,
+) {
+ return new Promise((resolve, reject) => {
+ let shellRendered = false;
+ let userAgent = request.headers.get('user-agent');
+
+ // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+ // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+ let readyOption: keyof RenderToPipeableStreamOptions =
+ (userAgent && isbot(userAgent)) || routerContext.isSpaMode ? 'onAllReady' : 'onShellReady';
+
+ const { pipe, abort } = renderToPipeableStream(<ServerRouter context={routerContext} url={request.url} />, {
+ [readyOption]() {
+ shellRendered = true;
+ const body = new PassThrough();
+ const stream = createReadableStreamFromReadable(body);
+
+ responseHeaders.set('Content-Type', 'text/html');
+
+ resolve(
+ new Response(stream, {
+ headers: responseHeaders,
+ status: responseStatusCode,
+ }),
+ );
+
+ pipe(body);
+ },
+ onShellError(error: unknown) {
+ reject(error);
+ },
+ onError(error: unknown) {
+ responseStatusCode = 500;
+ // Log streaming rendering errors from inside the shell. Don't log
+ // errors encountered during initial shell rendering since they'll
+ // reject and get logged in handleDocumentRequest.
+ if (shellRendered) {
+ console.error(error);
+ }
+ },
+ });
+
+ setTimeout(abort, ABORT_DELAY);
+ });
+}
+
+import { type HandleErrorFunction } from 'react-router';
+
+export const handleError: HandleErrorFunction = (error, { request }) => {
+ // React Router may abort some interrupted requests, don't log those
+ if (!request.signal.aborted) {
+ Sentry.captureException(error);
+
+ // make sure to still log the error so you can see it
+ console.error(error);
+ }
+};

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/root.tsx

@@ -0,0 +1,69 @@
+import * as Sentry from '@sentry/react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
+import type { Route } from './+types/root';
+import stylesheet from './app.css?url';
+
+export const links: Route.LinksFunction = () => [
+ { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+ {
+ rel: 'preconnect',
+ href: 'https://fonts.gstatic.com',
+ crossOrigin: 'anonymous',
+ },
+ {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+ },
+ { rel: 'stylesheet', href: stylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <head>
+ <meta charSet="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <Meta />
+ <Links />
+ </head>
+ <body>
+ {children}
+ <ScrollRestoration />
+ <Scripts />
+ </body>
+ </html>
+ );
+}
+
+export default function App() {
+ return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+ let message = 'Oops!';
+ let details = 'An unexpected error occurred.';
+ let stack: string | undefined;
+
+ if (isRouteErrorResponse(error)) {
+ message = error.status === 404 ? '404' : 'Error';
+ details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
+ } else if (error && error instanceof Error) {
+ Sentry.captureException(error);
+ if (import.meta.env.DEV) {
+ details = error.message;
+ stack = error.stack;
+ }
+ }
+
+ return (
+ <main className="pt-16 p-4 container mx-auto">
+ <h1>{message}</h1>
+ <p>{details}</p>
+ {stack && (
+ <pre className="w-full p-4 overflow-x-auto">
+ <code>{stack}</code>
+ </pre>
+ )}
+ </main>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -0,0 +1,18 @@
+import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
+
+export default [
+ index('routes/home.tsx'),
+ ...prefix('errors', [
+ route('client', 'routes/errors/client.tsx'),
+ route('client/:client-param', 'routes/errors/client-param.tsx'),
+ route('client-loader', 'routes/errors/client-loader.tsx'),
+ route('server-loader', 'routes/errors/server-loader.tsx'),
+ route('client-action', 'routes/errors/client-action.tsx'),
+ route('server-action', 'routes/errors/server-action.tsx'),
+ ]),
+ ...prefix('performance', [
+ index('routes/performance/index.tsx'),
+ route('with/:param', 'routes/performance/dynamic-param.tsx'),
+ route('static', 'routes/performance/static.tsx'),
+ ]),
+] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function clientAction() {
+ throw new Error('Madonna mia! Che casino nella Client Action!');
+}
+
+export default function ClientActionErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function clientLoader() {
+ throw new Error('¡Madre mía del client loader!');
+ return { data: 'sad' };
+}
+
+export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Client Loader Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client-param.tsx

@@ -0,0 +1,17 @@
+import type { Route } from './+types/client-param';
+
+export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
+ return (
+ <div>
+ <h1>Client Error Param Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error(`¡Madre mía de ${params['client-param']}!`);
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/client.tsx

@@ -0,0 +1,15 @@
+export default function ClientErrorPage() {
+ return (
+ <div>
+ <h1>Client Error Page</h1>
+ <button
+ id="throw-on-click"
+ onClick={() => {
+ throw new Error('¡Madre mía!');
+ }}
+ >
+ Throw Error
+ </button>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-action.tsx

@@ -0,0 +1,18 @@
+import { Form } from 'react-router';
+
+export function action() {
+ throw new Error('Madonna mia! Che casino nella Server Action!');
+}
+
+export default function ServerActionErrorPage() {
+ return (
+ <div>
+ <h1>Server Error Action Page</h1>
+ <Form method="post">
+ <button id="submit" type="submit">
+ Submit
+ </button>
+ </Form>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/errors/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export function loader() {
+ throw new Error('¡Madre mía del server!');
+ return { data: 'sad' };
+}
+
+export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
+ const { data } = loaderData;
+ return (
+ <div>
+ <h1>Server Error Page</h1>
+ <div>{data}</div>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/home.tsx

@@ -0,0 +1,9 @@
+import type { Route } from './+types/home';
+
+export function meta({}: Route.MetaArgs) {
+ return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
+}
+
+export default function Home() {
+ return <div>home</div>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -0,0 +1,12 @@
+import type { Route } from './+types/dynamic-param';
+
+export default function DynamicParamPage({ params }: Route.ComponentProps) {
+ const { param } = params;
+
+ return (
+ <div>
+ <h1>Dynamic Parameter Page</h1>
+ <p>The parameter value is: {param}</p>
+ </div>
+ );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -0,0 +1,3 @@
+export default function PerformancePage() {
+ return <h1>Performance Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/static.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+ return <h1>Static Page</h1>;
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/instrument.mjs

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react-router';
+
+Sentry.init({
+ // todo: grab from env
+ dsn: 'https://username@domain/123',
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ tracesSampleRate: 1.0,
+ tunnel: `http://localhost:3031/`, // proxy server
+});