Skip to content

Commit c12f814

Browse files
nicohrubeccodex
nicohrubec
and
codex
authored
docs(react-router): Point README to SDK documentation (#24625)
similar to #24618 but for @sentry/react-router --------- Co-authored-by: GPT-6 <codex@openai.com>
1 parent b375a52 commit c12f814

1 file changed

Lines changed: 8 additions & 168 deletions

File tree

‎packages/react-router/README.md‎

Lines changed: 8 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -10,176 +10,16 @@
1010
[![npm dm](https://img.shields.io/npm/dm/@sentry/react-router.svg)](https://www.npmjs.com/package/@sentry/react-router)
1111
[![npm dt](https://img.shields.io/npm/dt/@sentry/react-router.svg)](https://www.npmjs.com/package/@sentry/react-router)
1212

13-
> This SDK is for [React Router (framework)](https://reactrouter.com/start/framework/installation). If you're using [React Router (library)](https://reactrouter.com/start/library/installation) see our
14-
> [React SDK here](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/).
13+
The official Sentry SDK for monitoring React Router applications in framework mode.
1514

16-
## Links
15+
For React Router in library mode, use the [React SDK](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/).
1716

18-
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/react-router/)
17+
## Documentation
1918

20-
## General
19+
- [Getting started](https://docs.sentry.io/platforms/javascript/guides/react-router/)
20+
- [Configuration](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/)
2121

22-
This package is a wrapper around `@sentry/node` for the server and `@sentry/browser` for the client side.
22+
## Support
2323

24-
## Manual Setup
25-
26-
### Expose Hooks
27-
28-
React Router exposes two hooks in your `app` folder (`entry.client.tsx` and `entry.server.tsx`).
29-
If you do not see these two files, expose them with the following command:
30-
31-
```bash
32-
npx react-router reveal
33-
```
34-
35-
### Client-Side Setup
36-
37-
Initialize the SDK in your `entry.client.tsx` file:
38-
39-
```tsx
40-
import * as Sentry from '@sentry/react-router';
41-
import { startTransition, StrictMode } from 'react';
42-
import { hydrateRoot } from 'react-dom/client';
43-
import { HydratedRouter } from 'react-router/dom';
44-
45-
Sentry.init({
46-
dsn: '___PUBLIC_DSN___',
47-
integrations: [Sentry.reactRouterTracingIntegration()],
48-
49-
tracesSampleRate: 1.0, // Capture 100% of the transactions
50-
51-
// Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled
52-
tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
53-
});
54-
55-
startTransition(() => {
56-
hydrateRoot(
57-
document,
58-
<StrictMode>
59-
<HydratedRouter instrumentations={[Sentry.createSentryClientInstrumentation()]} onError={Sentry.sentryOnError} />
60-
</StrictMode>,
61-
);
62-
});
63-
```
64-
65-
Now, update your `app/root.tsx` file to report any unhandled errors from your global error boundary:
66-
67-
```tsx
68-
import * as Sentry from '@sentry/react-router';
69-
70-
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
71-
let message = 'Oops!';
72-
let details = 'An unexpected error occurred.';
73-
let stack: string | undefined;
74-
75-
if (isRouteErrorResponse(error)) {
76-
message = error.status === 404 ? '404' : 'Error';
77-
details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
78-
} else if (error && error instanceof Error) {
79-
// you only want to capture non 404-errors that reach the boundary
80-
Sentry.captureException(error);
81-
if (import.meta.env.DEV) {
82-
details = error.message;
83-
stack = error.stack;
84-
}
85-
}
86-
87-
return (
88-
<main>
89-
<h1>{message}</h1>
90-
<p>{details}</p>
91-
{stack && (
92-
<pre>
93-
<code>{stack}</code>
94-
</pre>
95-
)}
96-
</main>
97-
);
98-
}
99-
// ...
100-
```
101-
102-
### Server-Side Setup
103-
104-
Create an `instrument.server.mjs` file in the root of your app:
105-
106-
```js
107-
import * as Sentry from '@sentry/react-router';
108-
109-
Sentry.init({
110-
dsn: '___PUBLIC_DSN___',
111-
tracesSampleRate: 1.0, // Capture 100% of the transactions
112-
});
113-
```
114-
115-
In your `entry.server.tsx` file, import the instrumentation file at the very top, export the
116-
`instrumentations` array, and export the `handleError` function:
117-
118-
```tsx
119-
import './instrument.server.mjs';
120-
import * as Sentry from '@sentry/react-router';
121-
import { type HandleErrorFunction } from 'react-router';
122-
123-
export const handleError: HandleErrorFunction = (error, { request }) => {
124-
// React Router may abort some interrupted requests, report those
125-
if (!request.signal.aborted) {
126-
Sentry.captureException(error);
127-
128-
// make sure to still log the error so you can see it
129-
console.error(error);
130-
}
131-
};
132-
133-
// Register the Sentry server instrumentation so loaders, actions and middleware are traced.
134-
export const instrumentations = [Sentry.createSentryServerInstrumentation()];
135-
// ... rest of your server entry
136-
```
137-
138-
### Loading the Instrumentation via `--import` (Alternative)
139-
140-
Instead of importing the instrumentation file at the top of `entry.server.tsx`, you can load it before
141-
the application starts via the `--import` command line option. Since React Router runs in ESM mode,
142-
update the `start` and `dev` scripts accordingly:
143-
144-
```json
145-
"scripts": {
146-
"dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",
147-
"start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js",
148-
}
149-
```
150-
151-
## Build-time Config
152-
153-
Update your vite.config.ts file to include the `sentryReactRouter` plugin and also add your config options to the vite config (this is required for uploading sourcemaps at the end of the build):
154-
155-
```ts
156-
import { reactRouter } from '@react-router/dev/vite';
157-
import { sentryReactRouter } from '@sentry/react-router/vite';
158-
import { defineConfig } from 'vite';
159-
160-
const sentryConfig = {
161-
authToken: '...',
162-
org: '...',
163-
project: '...',
164-
// rest of your config
165-
};
166-
167-
export default defineConfig(config => {
168-
return {
169-
plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
170-
sentryConfig,
171-
};
172-
});
173-
```
174-
175-
Next, in your `react-router.config.ts` file, include the `sentryOnBuildEnd` hook:
176-
177-
```ts
178-
import type { Config } from '@react-router/dev/config';
179-
import { sentryOnBuildEnd } from '@sentry/react-router/vite';
180-
181-
export default {
182-
ssr: true,
183-
buildEnd: sentryOnBuildEnd,
184-
} satisfies Config;
185-
```
24+
- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose)
25+
- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md)

0 commit comments

Comments
 (0)