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(/