From 1771fd53e2785b925720850e93f3765d4b776173 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 12 Mar 2024 15:47:12 +0000 Subject: [PATCH] feat(remix): Update Remix documentation. --- .../javascript/guides/remix/manual-setup.mdx | 25 ++++++++-- .../javascript.remix.mdx | 1 + .../javascript.remix.mdx | 6 ++- .../javascript.remix.mdx | 8 ++++ .../install/javascript.remix.mdx | 1 + .../sourcemaps/overview/javascript.remix.mdx | 47 +++++++++++++++++-- .../install/javascript.remix.mdx | 1 + 7 files changed, 79 insertions(+), 10 deletions(-) diff --git a/docs/platforms/javascript/guides/remix/manual-setup.mdx b/docs/platforms/javascript/guides/remix/manual-setup.mdx index aa88e4eb8a41d..c53ded7dafd50 100644 --- a/docs/platforms/javascript/guides/remix/manual-setup.mdx +++ b/docs/platforms/javascript/guides/remix/manual-setup.mdx @@ -32,6 +32,8 @@ The two configuration types are mostly the same, except that some configuration +### Client-side Configuration + ```typescript {tabTitle:Client} {filename: entry.client.tsx} import { useLocation, useMatches } from "@remix-run/react"; import * as Sentry from "@sentry/remix"; @@ -64,6 +66,8 @@ Sentry.init({ }); ``` +### Server-side Configuration + ```typescript {tabTitle:Server} {filename: entry.server.tsx} import * as Sentry from "@sentry/remix"; @@ -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) + + + +@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. + + + +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"), ... }) diff --git a/platform-includes/getting-started-install/javascript.remix.mdx b/platform-includes/getting-started-install/javascript.remix.mdx index 7f5b2b30458b1..f077b6a874aab 100644 --- a/platform-includes/getting-started-install/javascript.remix.mdx +++ b/platform-includes/getting-started-install/javascript.remix.mdx @@ -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. diff --git a/platform-includes/getting-started-sourcemaps/javascript.remix.mdx b/platform-includes/getting-started-sourcemaps/javascript.remix.mdx index bd9c489b55d2b..eef2d66ee95c1 100644 --- a/platform-includes/getting-started-sourcemaps/javascript.remix.mdx +++ b/platform-includes/getting-started-sourcemaps/javascript.remix.mdx @@ -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 Sourcemaps Documentation, for more information. For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload sourcemaps. diff --git a/platform-includes/performance/configure-sample-rate/javascript.remix.mdx b/platform-includes/performance/configure-sample-rate/javascript.remix.mdx index c27d8fb4a3fba..1bfc34b6b80bd 100644 --- a/platform-includes/performance/configure-sample-rate/javascript.remix.mdx +++ b/platform-includes/performance/configure-sample-rate/javascript.remix.mdx @@ -1,5 +1,9 @@ +### 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"; @@ -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"; diff --git a/platform-includes/session-replay/install/javascript.remix.mdx b/platform-includes/session-replay/install/javascript.remix.mdx index ef2d6bd611c79..c7688fa8cc531 100644 --- a/platform-includes/session-replay/install/javascript.remix.mdx +++ b/platform-includes/session-replay/install/javascript.remix.mdx @@ -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. diff --git a/platform-includes/sourcemaps/overview/javascript.remix.mdx b/platform-includes/sourcemaps/overview/javascript.remix.mdx index ff607c2417249..5d58082c2f1b7 100644 --- a/platform-includes/sourcemaps/overview/javascript.remix.mdx +++ b/platform-includes/sourcemaps/overview/javascript.remix.mdx @@ -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) - +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. - +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/). diff --git a/platform-includes/user-feedback/install/javascript.remix.mdx b/platform-includes/user-feedback/install/javascript.remix.mdx index fa475466d15c6..3c5c9043de59a 100644 --- a/platform-includes/user-feedback/install/javascript.remix.mdx +++ b/platform-includes/user-feedback/install/javascript.remix.mdx @@ -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.