feat(remix): Update Remix documentation. (#9425)

Author: onurtemizkan

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

@@ -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";
@@ -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)
+
+<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"),
       ...
     })

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.
 

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

platform-includes/performance/configure-sample-rate/javascript.remix.mdx

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

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.
 

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

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.