Skip to content

Commit cfa8d41

Browse files
chargomechargome
authored
feat(react-router): Export wrappers for server loaders and actions (#16481)
1 parent bfe5e88 commit cfa8d41

40 files changed

+1442
-0
lines changed

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
/test-results/
26+
/playwright-report/
27+
/playwright/.cache/
28+
29+
!*.d.ts
30+
31+
# react router
32+
.react-router

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
html,
2+
body {
3+
@media (prefers-color-scheme: dark) {
4+
color-scheme: dark;
5+
}
6+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as Sentry from '@sentry/react-router';
2+
import { StrictMode, startTransition } from 'react';
3+
import { hydrateRoot } from 'react-dom/client';
4+
import { HydratedRouter } from 'react-router/dom';
5+
6+
Sentry.init({
7+
environment: 'qa', // dynamic sampling bias to keep transactions
8+
// todo: get this from env
9+
dsn: 'https://username@domain/123',
10+
tunnel: `http://localhost:3031/`, // proxy server
11+
integrations: [Sentry.reactRouterTracingIntegration()],
12+
tracesSampleRate: 1.0,
13+
tracePropagationTargets: [/^\//],
14+
});
15+
16+
startTransition(() => {
17+
hydrateRoot(
18+
document,
19+
<StrictMode>
20+
<HydratedRouter />
21+
</StrictMode>,
22+
);
23+
});

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { createReadableStreamFromReadable } from '@react-router/node';
2+
import * as Sentry from '@sentry/react-router';
3+
import { renderToPipeableStream } from 'react-dom/server';
4+
import { ServerRouter } from 'react-router';
5+
import { type HandleErrorFunction } from 'react-router';
6+
7+
const ABORT_DELAY = 5_000;
8+
9+
const handleRequest = Sentry.createSentryHandleRequest({
10+
streamTimeout: ABORT_DELAY,
11+
ServerRouter,
12+
renderToPipeableStream,
13+
createReadableStreamFromReadable,
14+
});
15+
16+
export default handleRequest;
17+
18+
export const handleError: HandleErrorFunction = (error, { request }) => {
19+
// React Router may abort some interrupted requests, don't log those
20+
if (!request.signal.aborted) {
21+
Sentry.captureException(error);
22+
23+
// make sure to still log the error so you can see it
24+
console.error(error);
25+
}
26+
};

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import * as Sentry from '@sentry/react-router';
2+
import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse } from 'react-router';
3+
import type { Route } from './+types/root';
4+
import stylesheet from './app.css?url';
5+
6+
export const links: Route.LinksFunction = () => [
7+
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
8+
{
9+
rel: 'preconnect',
10+
href: 'https://fonts.gstatic.com',
11+
crossOrigin: 'anonymous',
12+
},
13+
{
14+
rel: 'stylesheet',
15+
href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
16+
},
17+
{ rel: 'stylesheet', href: stylesheet },
18+
];
19+
20+
export function Layout({ children }: { children: React.ReactNode }) {
21+
return (
22+
<html lang="en">
23+
<head>
24+
<meta charSet="utf-8" />
25+
<meta name="viewport" content="width=device-width, initial-scale=1" />
26+
<Meta />
27+
<Links />
28+
</head>
29+
<body>
30+
{children}
31+
<ScrollRestoration />
32+
<Scripts />
33+
</body>
34+
</html>
35+
);
36+
}
37+
38+
export default function App() {
39+
return <Outlet />;
40+
}
41+
42+
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
43+
let message = 'Oops!';
44+
let details = 'An unexpected error occurred.';
45+
let stack: string | undefined;
46+
47+
if (isRouteErrorResponse(error)) {
48+
message = error.status === 404 ? '404' : 'Error';
49+
details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
50+
} else if (error && error instanceof Error) {
51+
Sentry.captureException(error);
52+
if (import.meta.env.DEV) {
53+
details = error.message;
54+
stack = error.stack;
55+
}
56+
}
57+
58+
return (
59+
<main className="pt-16 p-4 container mx-auto">
60+
<h1>{message}</h1>
61+
<p>{details}</p>
62+
{stack && (
63+
<pre className="w-full p-4 overflow-x-auto">
64+
<code>{stack}</code>
65+
</pre>
66+
)}
67+
</main>
68+
);
69+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { type RouteConfig, index, prefix, route } from '@react-router/dev/routes';
2+
3+
export default [
4+
index('routes/home.tsx'),
5+
...prefix('errors', [
6+
route('client', 'routes/errors/client.tsx'),
7+
route('client/:client-param', 'routes/errors/client-param.tsx'),
8+
route('client-loader', 'routes/errors/client-loader.tsx'),
9+
route('server-loader', 'routes/errors/server-loader.tsx'),
10+
route('client-action', 'routes/errors/client-action.tsx'),
11+
route('server-action', 'routes/errors/server-action.tsx'),
12+
]),
13+
...prefix('performance', [
14+
index('routes/performance/index.tsx'),
15+
route('ssr', 'routes/performance/ssr.tsx'),
16+
route('with/:param', 'routes/performance/dynamic-param.tsx'),
17+
route('static', 'routes/performance/static.tsx'),
18+
route('server-loader', 'routes/performance/server-loader.tsx'),
19+
route('server-action', 'routes/performance/server-action.tsx'),
20+
]),
21+
] satisfies RouteConfig;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Form } from 'react-router';
2+
3+
export function clientAction() {
4+
throw new Error('Madonna mia! Che casino nella Client Action!');
5+
}
6+
7+
export default function ClientActionErrorPage() {
8+
return (
9+
<div>
10+
<h1>Client Error Action Page</h1>
11+
<Form method="post">
12+
<button id="submit" type="submit">
13+
Submit
14+
</button>
15+
</Form>
16+
</div>
17+
);
18+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { Route } from './+types/server-loader';
2+
3+
export function clientLoader() {
4+
throw new Error('¡Madre mía del client loader!');
5+
return { data: 'sad' };
6+
}
7+
8+
export default function ClientLoaderErrorPage({ loaderData }: Route.ComponentProps) {
9+
const { data } = loaderData;
10+
return (
11+
<div>
12+
<h1>Client Loader Error Page</h1>
13+
<div>{data}</div>
14+
</div>
15+
);
16+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Route } from './+types/client-param';
2+
3+
export default function ClientErrorParamPage({ params }: Route.ComponentProps) {
4+
return (
5+
<div>
6+
<h1>Client Error Param Page</h1>
7+
<button
8+
id="throw-on-click"
9+
onClick={() => {
10+
throw new Error(`¡Madre mía de ${params['client-param']}!`);
11+
}}
12+
>
13+
Throw Error
14+
</button>
15+
</div>
16+
);
17+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function ClientErrorPage() {
2+
return (
3+
<div>
4+
<h1>Client Error Page</h1>
5+
<button
6+
id="throw-on-click"
7+
onClick={() => {
8+
throw new Error('¡Madre mía!');
9+
}}
10+
>
11+
Throw Error
12+
</button>
13+
</div>
14+
);
15+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Form } from 'react-router';
2+
3+
export function action() {
4+
throw new Error('Madonna mia! Che casino nella Server Action!');
5+
}
6+
7+
export default function ServerActionErrorPage() {
8+
return (
9+
<div>
10+
<h1>Server Error Action Page</h1>
11+
<Form method="post">
12+
<button id="submit" type="submit">
13+
Submit
14+
</button>
15+
</Form>
16+
</div>
17+
);
18+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { Route } from './+types/server-loader';
2+
3+
export function loader() {
4+
throw new Error('¡Madre mía del server!');
5+
return { data: 'sad' };
6+
}
7+
8+
export default function ServerLoaderErrorPage({ loaderData }: Route.ComponentProps) {
9+
const { data } = loaderData;
10+
return (
11+
<div>
12+
<h1>Server Error Page</h1>
13+
<div>{data}</div>
14+
</div>
15+
);
16+
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { Route } from './+types/home';
2+
3+
export function meta({}: Route.MetaArgs) {
4+
return [{ title: 'New React Router App' }, { name: 'description', content: 'Welcome to React Router!' }];
5+
}
6+
7+
export default function Home() {
8+
return <div>home</div>;
9+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Route } from './+types/dynamic-param';
2+
3+
export async function loader() {
4+
await new Promise(resolve => setTimeout(resolve, 500));
5+
return { data: 'burritos' };
6+
}
7+
8+
export default function DynamicParamPage({ params }: Route.ComponentProps) {
9+
const { param } = params;
10+
11+
return (
12+
<div>
13+
<h1>Dynamic Parameter Page</h1>
14+
<p>The parameter value is: {param}</p>
15+
</div>
16+
);
17+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Link } from 'react-router';
2+
3+
export default function PerformancePage() {
4+
return (
5+
<div>
6+
<h1>Performance Page</h1>
7+
<nav>
8+
<Link to="/performance/ssr">SSR Page</Link>
9+
<Link to="/performance/with/sentry">With Param Page</Link>
10+
<Link to="/performance/server-loader">Server Loader</Link>
11+
</nav>
12+
</div>
13+
);
14+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Form } from 'react-router';
2+
import type { Route } from './+types/server-action';
3+
import * as Sentry from '@sentry/react-router';
4+
5+
export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
6+
let formData = await request.formData();
7+
let name = formData.get('name');
8+
await new Promise(resolve => setTimeout(resolve, 1000));
9+
return {
10+
greeting: `Hola ${name}`,
11+
};
12+
});
13+
14+
export default function Project({ actionData }: Route.ComponentProps) {
15+
return (
16+
<div>
17+
<h1>Server action page</h1>
18+
<Form method="post">
19+
<input type="text" name="name" />
20+
<button type="submit">Submit</button>
21+
</Form>
22+
{actionData ? <p>{actionData.greeting}</p> : null}
23+
</div>
24+
);
25+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Route } from './+types/server-loader';
2+
import * as Sentry from '@sentry/react-router';
3+
4+
export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
5+
await new Promise(resolve => setTimeout(resolve, 500));
6+
return { data: 'burritos' };
7+
});
8+
9+
export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
10+
const { data } = loaderData;
11+
return (
12+
<div>
13+
<h1>Server Loader Page</h1>
14+
<div>{data}</div>
15+
</div>
16+
);
17+
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function SsrPage() {
2+
return (
3+
<div>
4+
<h1>SSR Page</h1>
5+
</div>
6+
);
7+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function StaticPage() {
2+
return <h1>Static Page</h1>;
3+
}

0 commit comments

Comments
 (0)