feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chargome merged 3 commits into from
Jun 5, 2025
Merged

feat(react-router): Export wrappers for server loaders and actions #16481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f521679
add wrappers
chargome Jun 4, 2025
8fa1fbf
add e2e test with manual wrapping
chargome Jun 4, 2025
bb8a6bf
update url parsing
chargome Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
6 changes: 6 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
html,
body {
@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
23 changes: 23 additions & 0 deletions ...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
tracesSampleRate: 1.0,
tracePropagationTargets: [/^\//],
});

startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<HydratedRouter />
</StrictMode>,
);
});
26 changes: 26 additions & 0 deletions ...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
streamTimeout: ABORT_DELAY,
ServerRouter,
renderToPipeableStream,
createReadableStreamFromReadable,
});

export default handleRequest;

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);
}
};
69 changes: 69 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
21 changes: 21 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
route('with/:param', 'routes/performance/dynamic-param.tsx'),
route('static', 'routes/performance/static.tsx'),
route('server-loader', 'routes/performance/server-loader.tsx'),
route('server-action', 'routes/performance/server-action.tsx'),
]),
] satisfies RouteConfig;
18 changes: 18 additions & 0 deletions ...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
16 changes: 16 additions & 0 deletions ...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
17 changes: 17 additions & 0 deletions ...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
15 changes: 15 additions & 0 deletions .../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
18 changes: 18 additions & 0 deletions ...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
16 changes: 16 additions & 0 deletions ...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
);
}
9 changes: 9 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>;
}
17 changes: 17 additions & 0 deletions ...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
await new Promise(resolve => setTimeout(resolve, 500));
return { data: 'burritos' };
}

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>
);
}
14 changes: 14 additions & 0 deletions ...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
return (
<div>
<h1>Performance Page</h1>
<nav>
<Link to="/performance/ssr">SSR Page</Link>
<Link to="/performance/with/sentry">With Param Page</Link>
<Link to="/performance/server-loader">Server Loader</Link>
</nav>
</div>
);
}
25 changes: 25 additions & 0 deletions ...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
let formData = await request.formData();
let name = formData.get('name');
await new Promise(resolve => setTimeout(resolve, 1000));
return {
greeting: `Hola ${name}`,
};
});

export default function Project({ actionData }: Route.ComponentProps) {
return (
<div>
<h1>Server action page</h1>
<Form method="post">
<input type="text" name="name" />
<button type="submit">Submit</button>
</Form>
{actionData ? <p>{actionData.greeting}</p> : null}
</div>
);
}
17 changes: 17 additions & 0 deletions ...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
await new Promise(resolve => setTimeout(resolve, 500));
return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
const { data } = loaderData;
return (
<div>
<h1>Server Loader Page</h1>
<div>{data}</div>
</div>
);
}
7 changes: 7 additions & 0 deletions ...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
return (
<div>
<h1>SSR Page</h1>
</div>
);
}
3 changes: 3 additions & 0 deletions ...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
return <h1>Static Page</h1>;
}
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(react-router): Export wrappers for server loaders and actions#16481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

chargome
merged 3 commits into

from

Jun 5, 2025
 Merged


feat(react-router): Export wrappers for server loaders and actions
#16481
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
f521679

add wrappers


chargome Jun 4, 2025
8fa1fbf

add e2e test with manual wrapping


chargome Jun 4, 2025
bb8a6bf

update url parsing


chargome Jun 4, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


32 changes: 32 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.gitignore

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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

2 changes: 2 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/.npmrc

View file


Open in desktop

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

6 changes: 6 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/app.css

View file


Open in desktop

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

23 changes: 23 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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.reactRouterTracingIntegration()],
 tracesSampleRate: 1.0,
 tracePropagationTargets: [/^\//],
});

startTransition(() => {
 hydrateRoot(
 document,
 <StrictMode>
 <HydratedRouter />
 </StrictMode>,
 );
});

26 changes: 26 additions & 0 deletions
...packages/e2e-tests/test-applications/react-router-7-framework-custom/app/entry.server.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
import { createReadableStreamFromReadable } from '@react-router/node';
import * as Sentry from '@sentry/react-router';
import { renderToPipeableStream } from 'react-dom/server';
import { ServerRouter } from 'react-router';
import { type HandleErrorFunction } from 'react-router';

const ABORT_DELAY = 5_000;

const handleRequest = Sentry.createSentryHandleRequest({
 streamTimeout: ABORT_DELAY,
 ServerRouter,
 renderToPipeableStream,
 createReadableStreamFromReadable,
});

export default handleRequest;

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);
 }
};

69 changes: 69 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/root.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

21 changes: 21 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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('ssr', 'routes/performance/ssr.tsx'),
 route('with/:param', 'routes/performance/dynamic-param.tsx'),
 route('static', 'routes/performance/static.tsx'),
 route('server-loader', 'routes/performance/server-loader.tsx'),
 route('server-action', 'routes/performance/server-action.tsx'),
 ]),
] satisfies RouteConfig;

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/client-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

17 changes: 17 additions & 0 deletions
...ests/test-applications/react-router-7-framework-custom/app/routes/errors/client-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

15 changes: 15 additions & 0 deletions
.../e2e-tests/test-applications/react-router-7-framework-custom/app/routes/errors/client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

18 changes: 18 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

16 changes: 16 additions & 0 deletions
...sts/test-applications/react-router-7-framework-custom/app/routes/errors/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>
 );
}

9 changes: 9 additions & 0 deletions
dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/app/routes/home.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>;
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/dynamic-param.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/dynamic-param';

export async function loader() {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
}

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>
 );
}

14 changes: 14 additions & 0 deletions
...-tests/test-applications/react-router-7-framework-custom/app/routes/performance/index.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
import { Link } from 'react-router';

export default function PerformancePage() {
 return (
 <div>
 <h1>Performance Page</h1>
 <nav>
 <Link to="/performance/ssr">SSR Page</Link>
 <Link to="/performance/with/sentry">With Param Page</Link>
 <Link to="/performance/server-loader">Server Loader</Link>
 </nav>
 </div>
 );
}

25 changes: 25 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-action.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
import { Form } from 'react-router';
import type { Route } from './+types/server-action';
import * as Sentry from '@sentry/react-router';

export const action = Sentry.wrapServerAction({}, async ({ request }: Route.ActionArgs) => {
 let formData = await request.formData();
 let name = formData.get('name');
 await new Promise(resolve => setTimeout(resolve, 1000));
 return {
 greeting: `Hola ${name}`,
 };
});

export default function Project({ actionData }: Route.ComponentProps) {
 return (
 <div>
 <h1>Server action page</h1>
 <Form method="post">
 <input type="text" name="name" />
 <button type="submit">Submit</button>
 </Form>
 {actionData ? <p>{actionData.greeting}</p> : null}
 </div>
 );
}

17 changes: 17 additions & 0 deletions
...est-applications/react-router-7-framework-custom/app/routes/performance/server-loader.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import type { Route } from './+types/server-loader';
import * as Sentry from '@sentry/react-router';

export const loader = Sentry.wrapServerLoader({}, async ({}: Route.LoaderArgs) => {
 await new Promise(resolve => setTimeout(resolve, 500));
 return { data: 'burritos' };
});

export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
 const { data } = loaderData;
 return (
 <div>
 <h1>Server Loader Page</h1>
 <div>{data}</div>
 </div>
 );
}

7 changes: 7 additions & 0 deletions
...2e-tests/test-applications/react-router-7-framework-custom/app/routes/performance/ssr.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
export default function SsrPage() {
 return (
 <div>
 <h1>SSR Page</h1>
 </div>
 );
}

3 changes: 3 additions & 0 deletions
...tests/test-applications/react-router-7-framework-custom/app/routes/performance/static.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
export default function StaticPage() {
 return <h1>Static Page</h1>;
}
Loading