Skip to content

Commit

Permalink
feat(remix): Add OTEL auto-instrumentation instructions.
Browse files Browse the repository at this point in the history
  • Loading branch information
onurtemizkan committed Jun 14, 2024
1 parent 13e3c61 commit 1748841
Showing 1 changed file with 56 additions and 34 deletions.
90 changes: 56 additions & 34 deletions docs/platforms/javascript/guides/remix/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,18 @@ pnpm add @sentry/remix

## Configuration

To use this SDK, initialize Sentry in your Remix entry points for both the client and server.

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.

The two configuration types are mostly the same, except that some configuration features, like Session Replay, only work in `entry.client.tsx`.
To use this SDK, initialize Sentry in your Remix project for both the client and server.

<SignInNote />

### Client-side Configuration

Create `entry.client.tsx` in the root directory of your project (if it doesn't already exist). Add your client-side initialization code there.

<Note>
Session Replay only works on the client-side.
</Note>

```typescript {tabTitle:Client} {filename: entry.client.tsx}
import { useLocation, useMatches } from "@remix-run/react";
import * as Sentry from "@sentry/remix";
Expand Down Expand Up @@ -66,22 +68,6 @@ Sentry.init({
});
```

### Server-side Configuration

```typescript {tabTitle:Server} {filename: entry.server.tsx}
import * as Sentry from "@sentry/remix";

Sentry.init({
dsn: "___PUBLIC_DSN___",

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
});
```

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.

To catch React component errors (in Remix v1) and routing transactions (in all Remix versions), wrap your Remix root with `withSentry`.

Expand Down Expand Up @@ -145,6 +131,48 @@ withSentry(App, {
});
```


### Server-side Configuration

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.

```typescript {tabTitle:Server} {filename: instrument.server.mjs}
import * as Sentry from "@sentry/remix";

Sentry.init({
dsn: "___PUBLIC_DSN___",
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,

// To use Sentry OpenTelemetry auto-instrumentation
// default: false
autoInstrumentRemix: true,

// Optionally capture action formData attributes with errors.
// This requires `sendDefaultPii` set to true as well.
captureActionFormDataKeys: {
key_x: true,
key_y: true,
},
// To capture action formData attributes.
sendDefaultPii: true
});
```

Then run your Remix server with:

```bash
NODE_OPTIONS='--import=./instrument.server.mjs' remix-serve build
# or
NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build
```

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).

Sentry's Remix SDK will automatically record your `loader` and `action` transactions, as well as server-side errors. You can also [manually capture transactions](/platforms/javascript/guides/remix/usage).

## Remix v2 Features

_Available from SDK version 7.59.0_
Expand Down Expand Up @@ -209,24 +237,18 @@ To enable readable stack traces, <PlatformLink to="/sourcemaps">configure source

## Custom Express Server

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.
You can import your server instrumentation file at the top of your Express server implementation.

<Note>

`wrapExpressCreateRequestHandler` is available starting with version 7.11.0.

</Note>

```typescript {filename: server/index.ts}
import { wrapExpressCreateRequestHandler } from "@sentry/remix";
import { createRequestHandler } from "@remix-run/express";
```typescript {filename: server.ts}
// import the Sentry instrumentation file before anything else.
import './instrument.server.mjs';
// alternatively `require('./instrument.server.cjs')`

// ...

const createSentryRequestHandler =
wrapExpressCreateRequestHandler(createRequestHandler);
const app = express();

app.all("*", createSentryRequestHandler(/* ... */));
// ...
```

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

0 comments on commit 1748841

Please sign in to comment.