From bf5a4932c82687f8600ad68b5284d23428469d8e Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Thu, 3 Sep 2026 11:20:20 +0200 Subject: [PATCH] feat(remix)!: Move the Vite plugin to `@sentry/remix/vite` `sentryRemixVitePlugin` was exported from `index.server.ts`, which is the package's CJS `main`, so anything the plugin imports lands in the module graph of every Remix server process. Move it behind a dedicated subpath export, matching `@sentry/sveltekit` and `@sentry/react-router`, so build-time-only dependencies stay off the runtime entry. The plugin now returns an array so further plugins can be added without another breaking change. BREAKING CHANGE: `sentryRemixVitePlugin` is no longer exported from `@sentry/remix`. Import it from `@sentry/remix/vite` instead. Refs #23986 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_0189LWkpCsFqEwM5EFoT11TJ --- MIGRATION.md | 12 +++++ .../vite.config.ts | 2 +- .../create-remix-app-express/vite.config.ts | 2 +- .../create-remix-app-v2/vite.config.ts | 2 +- .../remix-hydrogen/vite.config.ts | 2 +- .../remix-server-timing/vite.config.ts | 2 +- packages/remix/package.json | 5 ++ packages/remix/rollup.npm.config.mjs | 1 + packages/remix/src/index.server.ts | 1 - packages/remix/src/vite/index.ts | 32 ++++++++++++ .../vite.ts => vite/routeManifestPlugin.ts} | 37 ++----------- packages/remix/src/vite/types.ts | 11 ++++ .../routeManifestPlugin.test.ts} | 52 +++++++++---------- 13 files changed, 95 insertions(+), 66 deletions(-) create mode 100644 packages/remix/src/vite/index.ts rename packages/remix/src/{config/vite.ts => vite/routeManifestPlugin.ts} (83%) create mode 100644 packages/remix/src/vite/types.ts rename packages/remix/test/{config/vite.test.ts => vite/routeManifestPlugin.test.ts} (92%) diff --git a/MIGRATION.md b/MIGRATION.md index 567e076eeb9a..fa62f96a2033 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1260,6 +1260,18 @@ Affected SDKs: `@sentry/react-router`. + import { sentryOnBuildEnd } from '@sentry/react-router/vite'; ``` +### Remix: Vite plugin moved to `@sentry/remix/vite` + +Affected SDKs: `@sentry/remix`. + +`sentryRemixVitePlugin` is no longer available from the main `@sentry/remix` entry point. Import it from the dedicated subpath instead: + +```diff +// vite.config.ts +- import { sentryRemixVitePlugin } from '@sentry/remix'; ++ import { sentryRemixVitePlugin } from '@sentry/remix/vite'; +``` + ## 3. Removed APIs ### `@sentry/core` / All SDKs diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/vite.config.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/vite.config.ts index 6ebb8eacc6a5..44f475c6714e 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/vite.config.ts +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/vite.config.ts @@ -1,6 +1,6 @@ import { installGlobals } from '@remix-run/node'; import { vitePlugin as remix } from '@remix-run/dev'; -import { sentryRemixVitePlugin } from '@sentry/remix'; +import { sentryRemixVitePlugin } from '@sentry/remix/vite'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-express/vite.config.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-express/vite.config.ts index 6ebb8eacc6a5..44f475c6714e 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-express/vite.config.ts +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-express/vite.config.ts @@ -1,6 +1,6 @@ import { installGlobals } from '@remix-run/node'; import { vitePlugin as remix } from '@remix-run/dev'; -import { sentryRemixVitePlugin } from '@sentry/remix'; +import { sentryRemixVitePlugin } from '@sentry/remix/vite'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; diff --git a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/vite.config.ts b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/vite.config.ts index 42372f108ba8..381cc9d13ecc 100644 --- a/dev-packages/e2e-tests/test-applications/create-remix-app-v2/vite.config.ts +++ b/dev-packages/e2e-tests/test-applications/create-remix-app-v2/vite.config.ts @@ -1,5 +1,5 @@ import { vitePlugin as remix } from '@remix-run/dev'; -import { sentryRemixVitePlugin } from '@sentry/remix'; +import { sentryRemixVitePlugin } from '@sentry/remix/vite'; import { sentryOrchestrionPlugin } from '@sentry/server-utils/orchestrion/vite'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; diff --git a/dev-packages/e2e-tests/test-applications/remix-hydrogen/vite.config.ts b/dev-packages/e2e-tests/test-applications/remix-hydrogen/vite.config.ts index b128a147ff52..46dfc4036b9c 100644 --- a/dev-packages/e2e-tests/test-applications/remix-hydrogen/vite.config.ts +++ b/dev-packages/e2e-tests/test-applications/remix-hydrogen/vite.config.ts @@ -1,5 +1,5 @@ import { vitePlugin as remix } from '@remix-run/dev'; -import { sentryRemixVitePlugin } from '@sentry/remix'; +import { sentryRemixVitePlugin } from '@sentry/remix/vite'; import { hydrogen } from '@shopify/hydrogen/vite'; import { oxygen } from '@shopify/mini-oxygen/vite'; import { defineConfig } from 'vite'; diff --git a/dev-packages/e2e-tests/test-applications/remix-server-timing/vite.config.ts b/dev-packages/e2e-tests/test-applications/remix-server-timing/vite.config.ts index d4d7f23895c1..bd4060f4a14b 100644 --- a/dev-packages/e2e-tests/test-applications/remix-server-timing/vite.config.ts +++ b/dev-packages/e2e-tests/test-applications/remix-server-timing/vite.config.ts @@ -1,5 +1,5 @@ import { vitePlugin as remix } from '@remix-run/dev'; -import { sentryRemixVitePlugin } from '@sentry/remix'; +import { sentryRemixVitePlugin } from '@sentry/remix/vite'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; diff --git a/packages/remix/package.json b/packages/remix/package.json index 301894a7deaa..56910a4548d6 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -42,6 +42,11 @@ "types": "./build/types/cloudflare/index.d.ts", "default": "./build/esm/cloudflare/index.js" }, + "./vite": { + "types": "./build/types/vite/index.d.ts", + "import": "./build/esm/vite/index.js", + "require": "./build/cjs/vite/index.js" + }, "./import": { "import": { "default": "./build/import-hook.mjs" diff --git a/packages/remix/rollup.npm.config.mjs b/packages/remix/rollup.npm.config.mjs index 380ec3c1bd7e..9bf3f04f3ee3 100644 --- a/packages/remix/rollup.npm.config.mjs +++ b/packages/remix/rollup.npm.config.mjs @@ -13,6 +13,7 @@ export default [ 'src/client/index.ts', 'src/server/index.ts', 'src/cloudflare/index.ts', + 'src/vite/index.ts', ], packageSpecificConfig: { external: ['react-router', 'react-router-dom', 'react', 'react/jsx-runtime'], diff --git a/packages/remix/src/index.server.ts b/packages/remix/src/index.server.ts index e4eb8ad6236e..e40dd4978bb3 100644 --- a/packages/remix/src/index.server.ts +++ b/packages/remix/src/index.server.ts @@ -1,7 +1,6 @@ export * from './server'; export { captureRemixErrorBoundaryError, withSentry, ErrorBoundary, browserTracingIntegration } from './client'; -export { sentryRemixVitePlugin } from './config/vite'; export { createRemixRouteManifest } from './config/createRemixRouteManifest'; export type { CreateRemixRouteManifestOptions } from './config/createRemixRouteManifest'; diff --git a/packages/remix/src/vite/index.ts b/packages/remix/src/vite/index.ts new file mode 100644 index 000000000000..001165f380ab --- /dev/null +++ b/packages/remix/src/vite/index.ts @@ -0,0 +1,32 @@ +import type { Plugin } from 'vite'; +import { makeRouteManifestPlugin } from './routeManifestPlugin'; +import type { SentryRemixVitePluginOptions } from './types'; + +export type { SentryRemixVitePluginOptions }; + +/** + * Sentry Vite plugins for Remix. + * + * Add these to your Vite configuration to inject the Remix route manifest, so client-side + * transactions are parameterized. + * + * @example + * ```typescript + * // vite.config.ts + * import { vitePlugin as remix } from '@remix-run/dev'; + * import { sentryRemixVitePlugin } from '@sentry/remix/vite'; + * import { defineConfig } from 'vite'; + * + * export default defineConfig({ + * plugins: [ + * remix(), + * sentryRemixVitePlugin({ + * appDirPath: './app', + * }), + * ], + * }); + * ``` + */ +export function sentryRemixVitePlugin(options: SentryRemixVitePluginOptions = {}): Plugin[] { + return [makeRouteManifestPlugin(options)]; +} diff --git a/packages/remix/src/config/vite.ts b/packages/remix/src/vite/routeManifestPlugin.ts similarity index 83% rename from packages/remix/src/config/vite.ts rename to packages/remix/src/vite/routeManifestPlugin.ts index 83b033104530..8328af5de060 100644 --- a/packages/remix/src/config/vite.ts +++ b/packages/remix/src/vite/routeManifestPlugin.ts @@ -1,6 +1,7 @@ import * as path from 'path'; import type { Plugin } from 'vite'; -import { createRemixRouteManifest } from './createRemixRouteManifest'; +import { createRemixRouteManifest } from '../config/createRemixRouteManifest'; +import type { SentryRemixVitePluginOptions } from './types'; /** * Escapes a JSON string for safe embedding in HTML script tags. @@ -12,45 +13,13 @@ function escapeJsonForHtml(jsonString: string): string { .replace(/