Skip to content

feat(remix): Update Remix documentation. #9425

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 1 commit into from
Mar 12, 2024
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
25 changes: 21 additions & 4 deletions docs/platforms/javascript/guides/remix/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ The two configuration types are mostly the same, except that some configuration

<SignInNote />

### Client-side Configuration

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

### Server-side Configuration

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

Expand Down Expand Up @@ -225,13 +229,26 @@ const createSentryRequestHandler =
app.all("*", createSentryRequestHandler(/* ... */));
```

The function returned by `wrapExpressCreateRequestHandler` accepts the build object as its first parameter. So if your boilerplate code passes the argument as a function, you need to update the usage. For example, if you're using [Vite](https://remix.run/docs/en/main/future/vite), you'll need to wait for the build loader before passing it to the wrapped handler.
### Usage with Vite development mode (only for SDK versions < 7.106.0)

<Alert level='info'>

@sentry/remix version 7.106.0 introduced support for Vite development mode, so you don't need to await the build loader. It's recommended to upgrade to the latest version of @sentry/remix.

</Alert>

For SDK versions < 7.106.0, the function returned by `wrapExpressCreateRequestHandler` accepts the build object as its first parameter. So if your boilerplate code passes the argument as a function, you need to update the usage. For example, if you're using [Vite](https://remix.run/docs/en/main/future/vite), you'll need to wait for the build loader before passing it to the wrapped handler.

```diff {filename: server/index.ts}
wrapExpressCreateRequestHandler(createRequestHandler)({
build: vite
- ? () => unstable_loadViteServerBuild(vite)
+ ? await unstable_loadViteServerBuild(vite)
build: viteDevServer
- ? () =>
- viteDevServer.ssrLoadModule(
- "virtual:remix/server-build"
- )
+ ? await viteDevServer.ssrLoadModule(
+ "virtual:remix/server-build"
+ )
: await import(BUILD_DIR + "/index.js"),
...
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ The wizard will prompt you to log in to Sentry. It will then automatically do th
- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`.
- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`).
- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application.
- add an example page to your app to verify your Sentry setup

If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
## 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.
By default, Remix will minify your JavaScript and CSS files in production. This makes it difficult to debug errors in production. To make debugging easier, you can generate source maps and upload them to Sentry.

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`.
Depending on your build setup, you can either use [Sentry's Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) or `sentry-upload-sourcemaps` script to upload sourcemaps.

Please refer to the <PlatformLink to="/sourcemaps">Sourcemaps Documentation</PlatformLink>, for more information.

For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload sourcemaps.
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<SignInNote />

### Client-Side Performance Monitoring

Sentry's client-side performance monitoring captures `pageload` and `navigation` transactions when configured correctly. This is useful for understanding the performance of your application from the user's perspective.

```typescript {tabTitle:Client} {filename: entry.client.tsx}
import { useLocation, useMatches } from "@remix-run/react";
import * as Sentry from "@sentry/remix";
Expand All @@ -25,6 +29,10 @@ Sentry.init({
});
```

### Server-Side Performance Monitoring

Sentry's server-side performance monitoring captures transactions for your Remix `loader`s, `action`s, and request handlers. You can also capture transactions for your database operations.

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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ The wizard will prompt you to log in to Sentry. It will then automatically do th
- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`.
- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`).
- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application.
- add an example page to your app to verify your Sentry setup

If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features.

Expand Down
47 changes: 43 additions & 4 deletions platform-includes/sourcemaps/overview/javascript.remix.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,52 @@ Whenever you run the `build` script in your `package.json` source maps will be u

If you installed the SDK manually or the wizard failed, follow the steps below to manually configure source maps upload.

### Configure Source Maps Upload
### Using Vite Plugin (Recommended)

<Alert level="info" title="Uploading sourcemaps on Vite projects">
Starting from version 2.2.0, Remix supports [Vite](https://vitejs.dev/) as a build tool, and from Remix version 2.7.0 it's stable and the recommended way to build your application.

Starting from version 2.2.0, Remix supports [Vite](https://vitejs.dev/) as a build tool. If you use Vite to build your project, you can use the [Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) to upload source maps to Sentry. You do not need to follow the steps below.
If you use Vite to build your project, you can use the [Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) to upload source maps to Sentry.

</Alert>
First, install the plugin if you haven't already done so:

```bash
npm install --save-dev @sentry/vite-plugin
```

Then, add the plugin to your Vite configuration:

```typescript {filename:vite.config.ts}
import { defineConfig } from 'vite'
import { vitePlugin as remix } from "@remix-run/dev";
import { sentryVitePlugin } from '@sentry/vite-plugin'

export default defineConfig({
plugins: [
remix({
// ... your Remix plugin options
}),
sentryVitePlugin({
// If you use .sentryclirc or environment variables,
// you don't need to specify these options
authToken: '___SENTRY_AUTH_TOKEN___',
org: '___SENTRY_ORG_SLUG___',
project: '___SENTRY_PROJECT_SLUG___',
})
],
build: {
sourcemaps: true,
// ... rest of your Vite build options
}

// ... rest of your Vite config
})
```

To see the full list of options, refer to the [Vite plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin).

### Using `sentry-upload-sourcemaps` Script

If you're not using Vite to build your project, you can use the `sentry-upload-sourcemaps` script to upload source maps to Sentry.

The Sentry Remix SDK provides a script to automatically create a release and upload source maps after you've built your project.
Under the hood, it uses the [Sentry CLI](/product/cli/).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ The wizard will prompt you to log in to Sentry. It will then automatically do th
- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`.
- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`).
- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application.
- add an example page to your app to verify your Sentry setup

If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features.

Expand Down