Skip to content

Streamline Remix Getting Started Page #7482

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.

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
merged 2 commits into from
Jul 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
65 changes: 26 additions & 39 deletions src/platform-includes/getting-started-config/javascript.remix.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -55,52 +55,16 @@ Sentry.init({
});
```

Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions. You can also initialize Sentry's database integrations, such as Prisma, to get spans for your database calls.
Initialize Sentry in your entry point for the server to capture exceptions and get performance metrics for your [`action`](https://remix.run/docs/en/v1/api/conventions#action) and [`loader`](https://remix.run/docs/en/v1/api/conventions#loader) functions. You can also initialize Sentry's database integrations, such as <Link to="/platforms/node/performance/database/opt-in/#prisma-orm-integration">Prisma</Link>, to get spans for your database calls.

<SignInNote />

```typescript {filename: entry.server.tsx}
import { prisma } from "~/db.server";

import * as Sentry from "@sentry/remix";

Sentry.init({
dsn: "___PUBLIC_DSN___",
tracesSampleRate: 1,
integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
// ...
});
```
To catch React component errors (in Remix v1) and routing transactions, wrap your Remix root with `withSentry`.

<Note>

Learn more about <Link to="/platforms/node/performance/database/opt-in/#prisma-orm-integration">Sentry's Prisma integration </Link>.
If you use the Remix `v2_errorBoundary` future flag, you must also configure a [v2 ErrorBoundary](#v2-errorboundary).

</Note>

If you use a custom Express server in your Remix application, you should wrap your [`createRequestHandler` function](https://remix.run/docs/en/v1/other-api/adapter#createrequesthandler) manually with `wrapExpressCreateRequestHandler`. This is not required if you use the built-in Remix App Server.

<Alert level="info">

`wrapExpressCreateRequestHandler` is available starting with version 7.11.0.

</Alert>

```typescript {filename: server/index.ts}
import { wrapExpressCreateRequestHandler } from "@sentry/remix";
import { createRequestHandler } from "@remix-run/express";

// ...

const createSentryRequestHandler =
wrapExpressCreateRequestHandler(createRequestHandler);

// Use createSentryRequestHandler like you would with createRequestHandler
app.all("*", createSentryRequestHandler(/* ... */));
```

Also, wrap your Remix root with `withSentry` to catch React component errors (Remix v1) and routing transactions. If you use the Remix `v2_errorBoundary` future flag, you need to configure a [v2 ErrorBoundary](#v2-errorboundary) in addition.

```typescript {filename: root.tsx}
import {
Links,
Expand Down Expand Up @@ -149,6 +113,29 @@ withSentry(App, {
});
```

## 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/v1/other-api/adapter#createrequesthandler) manually with `wrapExpressCreateRequestHandler`. This is not required if you use the built-in Remix App Server.

<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";

// ...

const createSentryRequestHandler =
wrapExpressCreateRequestHandler(createRequestHandler);

// Use createSentryRequestHandler like you would with createRequestHandler
app.all("*", createSentryRequestHandler(/* ... */));
```

## Remix v2 features

_Available from SDK version 7.59.0_
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@ Sentry's Remix SDK enables automatic reporting of errors and exceptions, as well

</Note>

## Features Overview
Sentry's Remix SDK relies on our [React SDK](/platforms/javascript/guides/react/) for the frontend and [Node SDK](/platforms/node) for the backend. That means all features available in those SDKs are also available in this SDK.

- [Error Tracking](/product/issues/) with source maps for both JavaScript and TypeScript
- Events [enriched](/platforms/javascript/guides/remix/enriching-events/context/) with device data
- [Breadcrumbs](/platforms/javascript/guides/remix/enriching-events/breadcrumbs/) created for outgoing HTTP request with XHR and Fetch, and console logs
- [Release health](/product/releases/health/) for tracking crash-free users and sessions
- [Performance Monitoring](/product/performance/) for both the client and server
<Alert title='Non-Node Support' level='warning'>

Under the hood, Remix SDK relies on our [React SDK](/platforms/javascript/guides/react/) on the frontend and [Node SDK](/platforms/node) on the backend, which makes all features available in those SDKs also available in this SDK.
Sentry's Remix SDK does not officially support adapters that use non-Node runtimes, such as Cloudflare Workers.

</Alert>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## Add Readable Stack Traces to Errors

The Remix SDK provides a script that automatically creates a release and uploads sourcemaps. To generate sourcemaps with Remix, you need to call remix build with the `--sourcemap` option.

On release, call `sentry-upload-sourcemaps` to upload source maps and create a release. To see more details on how to use the command, call `sentry-upload-sourcemaps --help`.

For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload sourcemaps.