diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-remix.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-remix.mdx
index 13614e3c20bec0..a0f9e115b857f2 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-remix.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-remix.mdx
@@ -99,7 +99,9 @@ export default Sentry.withSentry(App, useEffect, useLocation, useMatches);
Finally, update your `entry.client.tsx` file to initialize Sentry SDK on the client:
```tsx {filename:app/entry.client.tsx}
-import * as Sentry from "@sentry/remix";
+import * as Sentry from "@sentry/remix/cloudflare";
+import { useEffect } from "react";
+import { useLocation, useMatches } from "@remix-run/react";
Sentry.init({
dsn: "___PUBLIC_DSN___",
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
index 31410f41c18d87..3b3444b1cf8a7e 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
@@ -1,6 +1,6 @@
---
title: Nuxt on Cloudflare
-description: "Learn how to instrument your Nuxt app on Cloudflare Workers and Pages and capture your first errors with Sentry. "
+description: "Learn how to instrument your Nuxt app on Cloudflare Workers and Pages and capture your first errors with Sentry."
---
This guide will show you how to set up the SDK with Nitro's `cloudflare_module` (or their deprecated `cloudflare-pages`) deployment preset.
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
index b0440ff1a8b2a4..fd28985fc53a4e 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
@@ -1,44 +1,9 @@
---
title: Remix on Cloudflare
-description: "Learn how to add Cloudflare instrumentation to your Remix app."
+description: "Learn how to instrument your Remix app on Cloudflare Workers and Pages and capture your first errors with Sentry."
---
-If you're running your Remix app on Cloudflare Pages, you can use the Sentry Remix SDK in combination with the Sentry Cloudflare SDK to add Sentry instrumentation.
-
-## Install
-
-First, install the Sentry Remix SDK in your application. We recommend using the Sentry wizard to automatically install the SDK:
-
-```bash
-npx @sentry/wizard@latest -i remix
-```
-
-If the setup through the wizard doesn't work for you, you can also [set up the Remix SDK manually](/platforms/javascript/guides/remix/manual-setup/).
-
-After installing the Sentry Remix SDK, delete the newly generated `instrumentation.server.mjs` file. This instrumentation is not needed when using the Cloudflare SDK.
-
-Now you can install the Sentry Cloudflare SDK. First, install the SDK with your package manager:
-
-
-
-## Setup
-
-The main Sentry configuration should happen as early as possible in your app's lifecycle.
-
-
-
-Then create a `_middleware.js` file in your `functions` directory and add the following code:
-
-```javascript {filename:functions/_middleware.js}
-import * as Sentry from "@sentry/cloudflare";
-
-export const onRequest = [
- // Make sure Sentry is the first middleware
- Sentry.sentryPagesPlugin((context) => ({
- dsn: "___PUBLIC_DSN___",
- // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
- tracesSampleRate: 1.0,
- })),
- // Add more middlewares here
-];
-```
+
diff --git a/docs/platforms/javascript/guides/remix/manual-setup.mdx b/docs/platforms/javascript/guides/remix/manual-setup.mdx
index 110fb48b3a0cd9..987777450c8972 100644
--- a/docs/platforms/javascript/guides/remix/manual-setup.mdx
+++ b/docs/platforms/javascript/guides/remix/manual-setup.mdx
@@ -9,377 +9,4 @@ description: "Learn how to manually set up Sentry in your Remix app and capture
installer](/platforms/javascript/guides/remix).
-
-
-## Step 1: Install
-
-Choose the features you want to configure, and this guide will show you how:
-
-
-
-
-
-### Install the Sentry SDK
-
-Run the command for your preferred package manager to add the Sentry SDK to your application:
-
-```bash {tabTitle:npm}
-npm install @sentry/remix --save
-```
-
-```bash {tabTitle:yarn}
-yarn add @sentry/remix
-```
-
-```bash {tabTitle:pnpm}
-pnpm add @sentry/remix
-```
-
-## Step 2: Configure
-
-### Configure Client-Side Sentry
-
-Create a client file `entry.client.tsx` in the `app` folder of your project if you don't have one already. In this file, import and initialize the Sentry SDK:
-
-```typescript {tabTitle:Client} {filename: entry.client.tsx}
-import { useLocation, useMatches } from "@remix-run/react";
-import * as Sentry from "@sentry/remix";
-import { useEffect } from "react";
-
-Sentry.init({
- dsn: "___PUBLIC_DSN___",
-
- // Adds request headers and IP for users, for more info visit:
- // https://docs.sentry.io/platforms/javascript/guides/remix/configuration/options/#sendDefaultPii
- sendDefaultPii: true,
-
- integrations: [
- // ___PRODUCT_OPTION_START___ performance
- Sentry.browserTracingIntegration({
- useEffect,
- useLocation,
- useMatches,
- }),
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
- // Replay is only available in the client
- Sentry.replayIntegration(),
- // ___PRODUCT_OPTION_END___ session-replay
- // ___PRODUCT_OPTION_START___ user-feedback
- Sentry.feedbackIntegration({
- // Additional SDK configuration goes in here, for example:
- colorScheme: "system",
- }),
- // ___PRODUCT_OPTION_END___ user-feedback
- ],
- // ___PRODUCT_OPTION_START___ performance
-
- // Set tracesSampleRate to 1.0 to capture 100%
- // of transactions for tracing.
- // We recommend adjusting this value in production
- // Learn more at
- // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
- tracesSampleRate: 1.0,
-
- // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
- tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
-
- // Capture Replay for 10% of all sessions,
- // plus for 100% of sessions with an error
- // Learn more at
- // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
- replaysSessionSampleRate: 0.1,
- replaysOnErrorSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ session-replay
- // ___PRODUCT_OPTION_START___ logs
-
- // Enable logs to be sent to Sentry
- enableLogs: true,
- // ___PRODUCT_OPTION_END___ logs
-});
-```
-
-#### Remix ErrorBoundary
-
-To capture errors from your [ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary), define it in `root.tsx` to act as a fallback for all routes or create route-specific error boundaries in your route components.
-
-In your `ErrorBoundary` component, use `Sentry.captureRemixErrorBoundaryError` to send the captured error to Sentry:
-
-```tsx {filename: root.tsx}
-import { captureRemixErrorBoundaryError } from "@sentry/remix";
-
-export const ErrorBoundary = () => {
- const error = useRouteError();
-
- captureRemixErrorBoundaryError(error);
-
- return
...
;
-};
-```
-
-#### Performance Monitoring
-
-Wrap your Remix root component with `withSentry` to capture performance data:
-
-```tsx {filename: root.tsx}
-import {
- Links,
- LiveReload,
- Meta,
- Outlet,
- Scripts,
- ScrollRestoration,
-} from "@remix-run/react";
-
-import { withSentry } from "@sentry/remix";
-
-function App() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default withSentry(App);
-```
-
-### Configure Server-Side Sentry
-
-Create an instrumentation file `instrument.server.mjs` in your project's root folder and initialize the Sentry SDK within it:
-
-```typescript {tabTitle:Server} {filename: instrument.server.mjs}
-import * as Sentry from "@sentry/remix";
-
-Sentry.init({
- dsn: "___PUBLIC_DSN___",
-
- // Adds request headers and IP for users, for more info visit: and captures action formData attributes
- // https://docs.sentry.io/platforms/javascript/guides/remix/configuration/options/#sendDefaultPii
- sendDefaultPii: true,
- // ___PRODUCT_OPTION_START___ performance
-
- // Set tracesSampleRate to 1.0 to capture 100%
- // of transactions for tracing.
- // We recommend adjusting this value in production
- // Learn more at
- // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
- tracesSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ logs
-
- // Enable logs to be sent to Sentry
- enableLogs: true,
- // ___PRODUCT_OPTION_END___ logs
-
- // Optionally capture action formData attributes with errors.
- // This requires `sendDefaultPii` set to true as well.
- captureActionFormDataKeys: {
- key_x: true,
- key_y: true,
- },
-});
-```
-
-Then run your Remix server using the `--import` command line option and point it to this file to make sure the Sentry module loads before any other application code runs:
-
-```bash
-NODE_OPTIONS='--import=./instrument.server.mjs' remix-serve build
-# or
-NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build
-```
-
-
-If you use the Express server instead of the built-in Remix server, you can import your instrumentation file directly at the top of your server implementation.
-
-```typescript {filename: server.(mjs|cjs)}
-// import the Sentry instrumentation file before anything else.
-import "./instrument.server.mjs";
-// alternatively `require('./instrument.server.cjs')`
-
-// ...
-
-const app = express();
-
-// ...
-```
-
-
-
-#### Capture Server-Side Errors
-
-To automatically capture server-side errors, instrument the [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point (`entry.server.tsx`). You can wrap your custom error handler with `wrapHandleErrorWithSentry` or directly use `sentryHandleError`:
-
-```typescript {filename: entry.server.tsx}
-import * as Sentry from "@sentry/remix";
-
-export const handleError = Sentry.wrapHandleErrorWithSentry(
- (error, { request }) => {
- // Custom handleError implementation
- }
-);
-
-// Alternative: Use the Sentry utility function if you don't need to wrap a custom function
-export const handleError = Sentry.sentryHandleError;
-```
-
-
-
-Sentry's Remix SDK automatically records your [`action`](https://remix.run/docs/en/main/route/action) and [`loader`](https://remix.run/docs/en/main/route/loader) transactions for performance monitoring. You can also initialize Sentry's database integrations, such as [Prisma](/platforms/javascript/guides/node/configuration/integrations/prisma/), to get spans for your database calls.
-
-
-
-## Step 3: Add Readable Stack Traces With Source Maps (Optional)
-
-To upload source maps for clear error stack traces, add your Sentry auth token, organization, and project slug in your `vite.config.ts` file:
-
-
-
-Check our [Source Maps documentation](/platforms/javascript/guides/remix/sourcemaps/) for
-alternative setup options.
-
-
-
-```javascript {filename:vite.config.ts} {3, 10-17,20-23}
-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
- org: "___ORG_SLUG___",
- project: "___PROJECT_SLUG___",
- // store your auth token in an environment variable
- authToken: process.env.SENTRY_AUTH_TOKEN,
- }),
- ],
-
- build: {
- sourcemap: true,
- // ... rest of your Vite build options
- },
-});
-```
-
-To keep your auth token secure, always store it in an environment variable instead of directly in your files:
-
-
-
-```bash {filename:.env}
-SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
-```
-
-## Step 4: Avoid Ad Blockers With Tunneling (Optional)
-
-
-
-## Step 5: Verify Your Setup
-
-Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
-
-### Issues
-
-To verify that Sentry captures errors and creates issues in your Sentry project, add a test button to one of your pages:
-
-```javascript
-
-```
-
-
-
-Open the page in a browser (for most Remix applications, this will be at localhost:3000) and click the button to trigger a frontend error.
-
-
-
-
-
-### Tracing
-
-To test your tracing configuration, update the previous code snippet by calling a non-existing route and starting a trace to measure the time it takes for the execution of your code:
-
-```javascript
-
-```
-
-Open the page in a browser (for most Remix applications, this will be at localhost:3000) and click the button to trigger the frontend error and a trace.
-
-
-
-
-
-### View Captured Data in Sentry
-
-Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
-
-
-
-## Next Steps
-
-At this point, you should have integrated Sentry into your Remix application and should already be sending error and performance data to your Sentry project.
-
-Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
-
-- Learn how to [manually capture errors](/platforms/javascript/guides/remix/usage/)
-- Continue to [customize your configuration](/platforms/javascript/guides/remix/configuration/)
-- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
-
-
-
-- If you encountered issues with the manual setup, try our installation wizard
-- Find various topics in Troubleshooting
-- [Get support](https://sentry.zendesk.com/hc/en-us/)
-
-
+
diff --git a/platform-includes/getting-started-complete/javascript.remix.mdx b/platform-includes/getting-started-complete/javascript.remix.mdx
new file mode 100644
index 00000000000000..d80bc525784581
--- /dev/null
+++ b/platform-includes/getting-started-complete/javascript.remix.mdx
@@ -0,0 +1,450 @@
+
+
+## Step 1: Install
+
+Choose the features you want to configure, and this guide will show you how:
+
+
+
+
+
+### Install the Sentry SDK
+
+Run the command for your preferred package manager to add the Sentry SDK to your application:
+
+```bash {tabTitle:npm}
+npm install @sentry/remix --save
+```
+
+```bash {tabTitle:yarn}
+yarn add @sentry/remix
+```
+
+```bash {tabTitle:pnpm}
+pnpm add @sentry/remix
+```
+
+## Step 2: Configure
+
+### Configure Client-Side Sentry
+
+Create a client file `entry.client.tsx` in the `app` folder of your project if you don't have one already. In this file, import and initialize the Sentry SDK:
+
+```typescript {tabTitle:Client} {filename: entry.client.tsx}
+import { useLocation, useMatches } from "@remix-run/react";
+import * as Sentry from "@sentry/remix";
+import { useEffect } from "react";
+
+Sentry.init({
+ dsn: "___PUBLIC_DSN___",
+
+ // Adds request headers and IP for users, for more info visit:
+ // https://docs.sentry.io/platforms/javascript/guides/remix/configuration/options/#sendDefaultPii
+ sendDefaultPii: true,
+
+ integrations: [
+ // ___PRODUCT_OPTION_START___ performance
+ Sentry.browserTracingIntegration({
+ useEffect,
+ useLocation,
+ useMatches,
+ }),
+ // ___PRODUCT_OPTION_END___ performance
+ // ___PRODUCT_OPTION_START___ session-replay
+ // Replay is only available in the client
+ Sentry.replayIntegration(),
+ // ___PRODUCT_OPTION_END___ session-replay
+ // ___PRODUCT_OPTION_START___ user-feedback
+ Sentry.feedbackIntegration({
+ // Additional SDK configuration goes in here, for example:
+ colorScheme: "system",
+ }),
+ // ___PRODUCT_OPTION_END___ user-feedback
+ ],
+ // ___PRODUCT_OPTION_START___ performance
+
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for tracing.
+ // We recommend adjusting this value in production
+ // Learn more at
+ // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+ tracesSampleRate: 1.0,
+
+ // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+ tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+ // ___PRODUCT_OPTION_END___ performance
+ // ___PRODUCT_OPTION_START___ session-replay
+
+ // Capture Replay for 10% of all sessions,
+ // plus for 100% of sessions with an error
+ // Learn more at
+ // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
+ // ___PRODUCT_OPTION_END___ session-replay
+ // ___PRODUCT_OPTION_START___ logs
+
+ // Enable logs to be sent to Sentry
+ enableLogs: true,
+ // ___PRODUCT_OPTION_END___ logs
+});
+```
+
+#### Remix ErrorBoundary
+
+To capture errors from your [ErrorBoundary](https://remix.run/docs/en/main/route/error-boundary), define it in `root.tsx` to act as a fallback for all routes or create route-specific error boundaries in your route components.
+
+In your `ErrorBoundary` component, use `Sentry.captureRemixErrorBoundaryError` to send the captured error to Sentry:
+
+```tsx {filename: root.tsx}
+import { captureRemixErrorBoundaryError } from "@sentry/remix";
+
+export const ErrorBoundary = () => {
+ const error = useRouteError();
+
+ captureRemixErrorBoundaryError(error);
+
+ return
...
;
+};
+```
+
+#### Performance Monitoring
+
+Wrap your Remix root component with `withSentry` to capture performance data:
+
+```tsx {filename: root.tsx}
+import {
+ Links,
+ LiveReload,
+ Meta,
+ Outlet,
+ Scripts,
+ ScrollRestoration,
+} from "@remix-run/react";
+
+import { withSentry } from "@sentry/remix";
+
+function App() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withSentry(App);
+```
+
+### Configure Server-Side Sentry
+
+
+
+Create an instrumentation file `instrument.server.mjs` in your project's root folder and initialize the Sentry SDK within it:
+
+```typescript {tabTitle:Server} {filename: instrument.server.mjs}
+import * as Sentry from "@sentry/remix";
+
+Sentry.init({
+ dsn: "___PUBLIC_DSN___",
+
+ // Adds request headers and IP for users, for more info visit: and captures action formData attributes
+ // https://docs.sentry.io/platforms/javascript/guides/remix/configuration/options/#sendDefaultPii
+ sendDefaultPii: true,
+ // ___PRODUCT_OPTION_START___ performance
+
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for tracing.
+ // We recommend adjusting this value in production
+ // Learn more at
+ // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+ tracesSampleRate: 1.0,
+ // ___PRODUCT_OPTION_END___ performance
+ // ___PRODUCT_OPTION_START___ logs
+
+ // Enable logs to be sent to Sentry
+ enableLogs: true,
+ // ___PRODUCT_OPTION_END___ logs
+
+ // Optionally capture action formData attributes with errors.
+ // This requires `sendDefaultPii` set to true as well.
+ captureActionFormDataKeys: {
+ key_x: true,
+ key_y: true,
+ },
+});
+```
+
+Then run your Remix server using the `--import` command line option and point it to this file to make sure the Sentry module loads before any other application code runs:
+
+```bash
+NODE_OPTIONS='--import=./instrument.server.mjs' remix-serve build
+# or
+NODE_OPTIONS='--require=./instrument.server.cjs' remix-serve build
+```
+
+
+If you use the Express server instead of the built-in Remix server, you can import your instrumentation file directly at the top of your server implementation.
+
+```typescript {filename: server.(mjs|cjs)}
+// import the Sentry instrumentation file before anything else.
+import "./instrument.server.mjs";
+// alternatively `require('./instrument.server.cjs')`
+
+// ...
+
+const app = express();
+
+// ...
+```
+
+
+
+ PlatformSection>
+
+
+Create a `_middleware.js` file in your `functions` directory if you don't have one already. In this file, import and initialize the Sentry Cloudflare SDK:
+
+```javascript {filename:functions/_middleware.js}
+import * as Sentry from "@sentry/cloudflare";
+
+export const onRequest = [
+ // Make sure Sentry is the first middleware
+ Sentry.sentryPagesPlugin((context) => ({
+ dsn: "___PUBLIC_DSN___",
+
+ // Adds request headers and IP for users, for more info visit: and captures action formData attributes
+ // https://docs.sentry.io/platforms/javascript/guides/remix/configuration/options/#sendDefaultPii
+ sendDefaultPii: true,
+ // ___PRODUCT_OPTION_START___ performance
+
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for tracing.
+ // We recommend adjusting this value in production
+ // Learn more at
+ // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+ tracesSampleRate: 1.0,
+ // ___PRODUCT_OPTION_END___ performance
+ // ___PRODUCT_OPTION_START___ logs
+
+ // Enable logs to be sent to Sentry
+ enableLogs: true,
+ // ___PRODUCT_OPTION_END___ logs
+
+ // Optionally capture action formData attributes with errors.
+ // This requires `sendDefaultPii` set to true as well.
+ captureActionFormDataKeys: {
+ key_x: true,
+ key_y: true,
+ },
+ })),
+ // Add more middlewares here
+];
+```
+
+ PlatformSection>
+
+### Capture Server-Side Errors
+
+To automatically capture server-side errors, instrument the [`handleError`](https://remix.run/docs/en/main/file-conventions/entry.server#handleerror) function in your server entry point (`entry.server.tsx`). You can wrap your custom error handler with `wrapHandleErrorWithSentry` or directly use `sentryHandleError`:
+
+```typescript {filename: entry.server.tsx}
+import * as Sentry from "@sentry/remix";
+
+export const handleError = Sentry.wrapHandleErrorWithSentry(
+ (error, { request }) => {
+ // Custom handleError implementation
+ }
+);
+
+// Alternative: Use the Sentry utility function if you don't need to wrap a custom function
+export const handleError = Sentry.sentryHandleError;
+```
+
+
+
+Sentry's Remix SDK automatically records your [`action`](https://remix.run/docs/en/main/route/action) and [`loader`](https://remix.run/docs/en/main/route/loader) transactions for performance monitoring. You can also initialize Sentry's database integrations, such as [Prisma](/platforms/javascript/guides/node/configuration/integrations/prisma/), to get spans for your database calls.
+
+
+
+
+
+### Configure Cloudflare for Sentry
+
+
+
+ PlatformSection>
+
+## Step 3: Add Readable Stack Traces With Source Maps (Optional)
+
+To upload source maps for clear error stack traces, add your Sentry auth token, organization, and project slug in your `vite.config.ts` file:
+
+
+
+Check our [Source Maps documentation](/platforms/javascript/guides/remix/sourcemaps/) for
+alternative setup options.
+
+
+
+```javascript {filename:vite.config.ts} {3, 10-17,20-23}
+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
+ org: "___ORG_SLUG___",
+ project: "___PROJECT_SLUG___",
+ // store your auth token in an environment variable
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+ }),
+ ],
+
+ build: {
+ sourcemap: true,
+ // ... rest of your Vite build options
+ },
+});
+```
+
+To keep your auth token secure, always store it in an environment variable instead of directly in your files:
+
+
+
+```bash {filename:.env}
+SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
+```
+
+
+## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+
+
+
+## Step 5: Verify Your Setup
+
+
+
+
+
+## Step 4: Verify Your Setup
+
+
+
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+
+### Issues
+
+To verify that Sentry captures errors and creates issues in your Sentry project, add a test button to one of your pages:
+
+```javascript
+
+```
+
+
+
+Open the page in a browser and click the button to trigger a frontend error.
+
+
+
+
+
+### Tracing
+
+To test your tracing configuration, update the previous code snippet by calling a non-existing route and starting a trace to measure the time it takes for the execution of your code:
+
+```javascript
+
+```
+
+Open the page in a browser (for most Remix applications, this will be at localhost:3000) and click the button to trigger the frontend error and a trace.
+
+
+
+
+
+### View Captured Data in Sentry
+
+Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
+
+
+
+## Next Steps
+
+At this point, you should have integrated Sentry into your Remix application and should already be sending error and performance data to your Sentry project.
+
+Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
+
+- Learn how to manually capture errors
+- Continue to customize your configuration
+- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
+
+
+
+
+- If you encountered issues with the manual setup, try our installation wizard
+- Find various topics in Troubleshooting
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
+
+
+
+
+
+
+
+- If you encountered issues with the manual setup, try our installation wizard
+- Find various support topics in Cloudflare troubleshooting and [Remix troubleshooting](/platforms/javascript/guides/remix/troubleshooting/)
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
+
+
+