Skip to content

Commit 7145ae1

Browse files
committed
feat(remix): Add OTEL auto-instrumentation instructions.
1 parent 3e90f76 commit 7145ae1

File tree

1 file changed

+50
-35
lines changed

1 file changed

+50
-35
lines changed

docs/platforms/javascript/guides/remix/manual-setup.mdx

Lines changed: 50 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,7 @@ pnpm add @sentry/remix
2828

2929
## Configure
3030

31-
To use this SDK, initialize Sentry in your Remix entry points for both the client and server.
32-
33-
Create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). Add your initialization code in these files for the client-side and server-side SDK, respectively.
34-
35-
The two configuration types are mostly the same, except that some configuration features, like Session Replay, only work in `entry.client.tsx`.
31+
To use this SDK, initialize Sentry in your Remix project for both the client and server.
3632

3733
<SignInNote />
3834

@@ -70,23 +66,6 @@ Sentry.init({
7066
});
7167
```
7268

73-
### Server-side Configuration
74-
75-
```typescript {tabTitle:Server} {filename: entry.server.tsx} {"onboardingOptions": {"performance": "5-9"}}
76-
import * as Sentry from "@sentry/remix";
77-
78-
Sentry.init({
79-
dsn: "___PUBLIC_DSN___",
80-
81-
// Set tracesSampleRate to 1.0 to capture 100%
82-
// of transactions for tracing.
83-
// We recommend adjusting this value in production
84-
tracesSampleRate: 1.0,
85-
});
86-
```
87-
88-
Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/main/route/action) and [`loader`](https://remix.run/docs/en/main/route/loader) functions. You can also initialize Sentry's database integrations, such as <Link to="/platforms/javascript/guides/node/tracing/database/opt-in/#prisma-orm-integration">Prisma</Link>, to get spans for your database calls.
89-
9069
To catch React component errors (in Remix v1) and routing transactions (in all Remix versions), wrap your Remix root with `withSentry`.
9170

9271
<Note>
@@ -149,6 +128,48 @@ withSentry(App, {
149128
});
150129
```
151130

131+
132+
### Server-side Configuration
133+
134+
Create an instrumentation file (named here as `instrument.server.mjs`) in your project. Add your initialization code in this file for the server-side SDK.
135+
136+
```typescript {tabTitle:Server} {filename: instrument.server.mjs} {"onboardingOptions": {"performance": "5-9"}}
137+
import * as Sentry from "@sentry/remix";
138+
139+
Sentry.init({
140+
dsn: "___PUBLIC_DSN___",
141+
// Set tracesSampleRate to 1.0 to capture 100%
142+
// of transactions for tracing.
143+
// We recommend adjusting this value in production
144+
tracesSampleRate: 1.0,
145+
146+
// To use Sentry OpenTelemetry auto-instrumentation
147+
// default: false
148+
autoInstrumentRemix: true,
149+
150+
// Optionally capture action formData attributes with errors.
151+
// This requires `sendDefaultPii` set to true as well.
152+
captureActionFormDataKeys: {
153+
key_x: true,
154+
key_y: true,
155+
},
156+
// To capture action formData attributes.
157+
sendDefaultPii: true
158+
});
159+
```
160+
161+
Then run your Remix server with:
162+
163+
```bash
164+
NODE_OPTIONS='--import=./instrument.server.mjs' remix-serve build
165+
# or
166+
NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build
167+
```
168+
169+
If you use Express server instead of Remix built-in server. You can alternatively import your instrumentation file directly at the top of your server implementation. See the example [here](#custom-express-server).
170+
171+
Sentry's Remix SDK will automatically record your [`action`](https://remix.run/docs/en/main/route/action) and [`loader`](https://remix.run/docs/en/main/route/loader) transactions, as well as server-side errors. You can also initialize Sentry's database integrations, such as <Link to="/platforms/javascript/guides/node/tracing/database/opt-in/#prisma-orm-integration">Prisma</Link>, to get spans for your database calls.
172+
152173
## Remix v2 Features
153174

154175
_Available from SDK version 7.59.0_
@@ -213,24 +234,18 @@ To enable readable stack traces, <PlatformLink to="/sourcemaps">configure source
213234

214235
## Custom Express Server
215236

216-
If you use a custom Express server in your Remix application, you should wrap your [`createRequestHandler` function](https://remix.run/docs/en/main/other-api/adapter#createrequesthandler) manually with `wrapExpressCreateRequestHandler`. This isn't necessary if you're using the built-in Remix App Server.
237+
You can import your server instrumentation file at the top of your Express server implementation.
217238

218-
<Note>
219-
220-
`wrapExpressCreateRequestHandler` is available starting with version 7.11.0.
221-
222-
</Note>
223-
224-
```typescript {filename: server/index.ts}
225-
import { wrapExpressCreateRequestHandler } from "@sentry/remix";
226-
import { createRequestHandler } from "@remix-run/express";
239+
```typescript {filename: server.ts}
240+
// import the Sentry instrumentation file before anything else.
241+
import './instrument.server.mjs';
242+
// alternatively `require('./instrument.server.cjs')`
227243

228244
// ...
229245

230-
const createSentryRequestHandler =
231-
wrapExpressCreateRequestHandler(createRequestHandler);
246+
const app = express();
232247

233-
app.all("*", createSentryRequestHandler(/* ... */));
248+
// ...
234249
```
235250

236251
### Usage with Vite development mode (only for SDK versions < 7.106.0)

0 commit comments

Comments
 (0)