feat(remix): Add Remix 3 browser SDK with a bundled client entry

Remix 3 has no bundler, so the browser gets whatever module graph the
client entry reaches and nothing can be eliminated. The entry is a named
export list rather than a wildcard re-export, and it is bundled once at
publish time. Unbundled that costs an app 255 requests and about 364 KB
gzipped; bundled it is 2 requests and 54 KB. The size budget is here
rather than in a later pull request because one wildcard re-export
silently undoes all of it.

Navigation tracing is the SDK's own, because `remix/ui` intercepts links
through the Navigation API and never touches History, so the upstream
handler would emit nothing. Page loads are ordinary document loads and
stay upstream.

Client error capture is a separate pull request.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: chargome

.size-limit.js

@@ -225,6 +225,19 @@ module.exports = [
     limit: '35 KB',
     disablePlugins: ['@size-limit/esbuild'],
   },
+  // Remix 3 browser SDK (ESM)
+  {
+    // Every export, not a named import: Remix 3 has no bundler, so an app ships every byte of this
+    // file. The budget is what keeps `src/v3/index.client.ts` a named list. One added
+    // `export * from '@sentry/browser'` measures 134 KB here, and more on the wire, because a real app
+    // has no bundler to shake it.
+    name: '@sentry/remix (Remix 3 client bundle)',
+    path: 'packages/remix/build/esm/v3/client-bundle.js',
+    import: '*',
+    gzip: true,
+    limit: '56 KB',
+    disablePlugins: ['@size-limit/esbuild'],
+  },
   // Browser CDN bundles
   {
     name: 'CDN Bundle',

dev-packages/e2e-tests/test-applications/remix-v3/app/actions/controller.tsx

@@ -17,6 +17,24 @@ function HomePage(handle: Handle<Record<string, never>>) {
       </head>
       <body>
         <h1 id="home">Sentry Remix 3</h1>
+        {/* No `data-rmx-document`, so the runtime intercepts this through the Navigation API. */}
+        <a id="to-user" href="/users/12345">
+          User
+        </a>
+      </body>
+    </html>
+  );
+}
+
+function UserPage(handle: Handle<{ id?: string }>) {
+  return () => (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <title>User</title>
+      </head>
+      <body>
+        <h1 id="user">User {handle.props.id}</h1>
       </body>
     </html>
   );
@@ -31,7 +49,7 @@ export default createController(routes, {
       return context.render(<HomePage />);
     },
     user(context) {
-      return Response.json({ id: context.params.id });
+      return context.render(<UserPage id={context.params.id} />);
     },
     teapot() {
       return new Response("I'm a teapot", { status: 418 });

dev-packages/e2e-tests/test-applications/remix-v3/app/actions/public/entry.ts

@@ -1,9 +1,19 @@
+import * as Sentry from '@sentry/remix/v3/client';
 import { run } from 'remix/ui';
 
-// No Sentry here yet: `@sentry/remix/v3/client` does not export `init` until the browser SDK lands.
+// Not Node. The asset server substitutes this when it compiles the module, from the `define` map in
+// `app/assets.ts`.
+declare const process: { env: Record<string, string | undefined> };
+
+Sentry.init({
+  dsn: process.env.E2E_TEST_DSN,
+  tunnel: 'http://localhost:3061/',
+  tracesSampleRate: 1.0,
+});
+
 export const app = run({
   async loadModule(moduleUrl, exportName) {
-    let mod = await import(moduleUrl);
+    const mod = await import(moduleUrl);
     return mod[exportName];
   },
 });

dev-packages/e2e-tests/test-applications/remix-v3/app/assets.ts

@@ -7,6 +7,13 @@ export const assets = createAssetServer({
   allowPackages: ['remix', '@sentry/remix'],
   minify: true,
   watch: false,
+  scripts: {
+    // No bundler means no build time env inlining, so `define` is the only way to get configuration
+    // into a browser module. The asset server substitutes these when it compiles.
+    define: {
+      'process.env.E2E_TEST_DSN': JSON.stringify(process.env.E2E_TEST_DSN),
+    },
+  },
 });
 
 const entry = 'app/actions/public/entry.ts';

dev-packages/e2e-tests/test-applications/remix-v3/tests/client.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+const APP_NAME = 'remix-v3';
+
+test('sends a pageload span', async ({ page }) => {
+  const spanPromise = waitForStreamedSpan(APP_NAME, span => getSpanOp(span) === 'pageload' && span.is_segment === true);
+
+  await page.goto('/');
+
+  const span = await spanPromise;
+  // Ordinary document load, so this span comes from the upstream integration and takes the low
+  // cardinality streaming name.
+  expect(span.name).toBe('Pageload');
+  expect(span.attributes?.['sentry.origin']?.value).toBe('auto.pageload.browser');
+});
+
+test('sends a navigation span for a link the runtime intercepts', async ({ page }) => {
+  await page.goto('/');
+
+  // Selected by origin, not just op. `remix/ui` never touches History, so a span from the upstream
+  // handler would mean this SDK did not produce it.
+  const spanPromise = waitForStreamedSpan(
+    APP_NAME,
+    span =>
+      getSpanOp(span) === 'navigation' && span.attributes?.['sentry.origin']?.value === 'auto.navigation.remix_v3',
+  );
+
+  await page.locator('#to-user').click();
+  await expect(page.locator('#user')).toBeVisible();
+
+  const span = await spanPromise;
+  expect(span.is_segment).toBe(true);
+  expect(span.name).toBe('Navigation');
+});

packages/remix/package.json

@@ -61,7 +61,7 @@
     "./v3/client": {
       "import": {
         "types": "./build/types/v3/index.client.d.ts",
-        "default": "./build/esm/v3/index.client.js"
+        "default": "./build/esm/v3/client-bundle.js"
       }
     },
     "./v3/node": {

packages/remix/rollup.npm.config.mjs

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-named-as-default */
+import nodeResolve from '@rollup/plugin-node-resolve';
 import { defineConfig } from 'rollup';
 import { makeBaseNPMConfig, makeNPMConfigVariants, makeOrchestrionLoader } from '@sentry-internal/rollup-utils';
 
@@ -8,6 +10,39 @@ const v3NodeEntry = defineConfig({
   output: { format: 'esm', file: 'build/v3-node.mjs' },
 });
 
+/**
+ * The Remix 3 browser entry, bundled into a single self contained ES module.
+ *
+ * Remix 3 has no bundler. Its asset server serves one HTTP request per module and never drops dead
+ * code, because it only ever looks at one module at a time. The ordinary `preserveModules` output
+ * therefore costs an app 255 requests and about 364 KB gzipped of `@sentry/*`; bundled here it is 2
+ * requests and 54 KB. Publish time is the only place that reduction can happen.
+ *
+ * Runs over `build/esm/v3/index.client.js` rather than the TypeScript source, to reuse the transpilation
+ * the main config already did. That is why it has to come last in this array.
+ *
+ * Left unminified and without a source map on purpose. The asset server minifies what it serves and
+ * builds its own map chain, so a pre-minified file with its own map would add a second chain for
+ * nothing.
+ */
+const v3ClientBundle = defineConfig({
+  input: 'build/esm/v3/index.client.js',
+  external: id => id === 'remix' || id.startsWith('@remix-run/'),
+  treeshake: { moduleSideEffects: false, propertyReadSideEffects: false },
+  plugins: [nodeResolve({ browser: true, exportConditions: ['browser', 'import', 'default'] })],
+  // Emitted inside `build/esm/v3/`, not at `build/`: the one import it keeps is the relative path to
+  // the channel shim, which only resolves from there.
+  output: { file: 'build/esm/v3/client-bundle.js', format: 'esm' },
+  onwarn(warning, warn) {
+    // `this` is undefined in the bundled output of some dependencies, and the graph has cycles. Both
+    // are harmless here and would otherwise bury real warnings.
+    if (warning.code === 'THIS_IS_UNDEFINED' || warning.code === 'CIRCULAR_DEPENDENCY') {
+      return;
+    }
+    warn(warning);
+  },
+});
+
 // We rely on esbuild's defaults for JSX (`jsx: 'transform'` = classic runtime, no
 // __self/__source attributes). React 19 prefers the new automatic transform, but switching
 // to it would break React 17 support — so we intentionally stay on classic for now.
@@ -39,4 +74,5 @@ export default [
     }),
   ),
   ...makeOrchestrionLoader('./build'),
+  v3ClientBundle,
 ];

packages/remix/src/v3/client/browserTracingIntegration.ts

@@ -0,0 +1,106 @@
+import {
+  browserTracingIntegration as originalBrowserTracingIntegration,
+  startBrowserTracingNavigationSpan,
+  WINDOW,
+} from '@sentry/browser';
+import { SENTRY_SEGMENT_NAME_SOURCE } from '@sentry/conventions/attributes';
+import {
+  type Client,
+  hasSpanStreamingEnabled,
+  type Integration,
+  NAVIGATION_SPAN_NAME_FALLBACK,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+} from '@sentry/core';
+
+type Options = Parameters<typeof originalBrowserTracingIntegration>[0];
+
+/**
+ * Browser tracing for Remix 3.
+ *
+ * Page loads stay with the upstream integration, because they are ordinary document loads. Navigations
+ * do not: `remix/ui` intercepts links and form submissions through the Navigation API and never touches
+ * History, so the upstream handler never fires.
+ */
+export function browserTracingIntegration(options: Options = {}): Integration {
+  const integration = originalBrowserTracingIntegration({ ...options, instrumentNavigation: false });
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      if (options.instrumentNavigation !== false) {
+        instrumentNavigationApi(client);
+      }
+    },
+  };
+}
+
+function instrumentNavigationApi(client: Client): void {
+  const navigation = (WINDOW as WindowWithNavigation).navigation;
+  if (!navigation) {
+    // Without the Navigation API the runtime does full document loads, which are page loads already.
+    return;
+  }
+
+  navigation.addEventListener('navigate', event => {
+    const url = event.destination?.url;
+    if (!url || !isRuntimeNavigation(event, url)) {
+      return;
+    }
+
+    startBrowserTracingNavigationSpan(
+      client,
+      {
+        // Remix 3 gives the browser no route to name this after: `remix/ui` exposes no matched route
+        // and never matches client side. Passing the server's pattern down is tracked in (#24872).
+        name: hasSpanStreamingEnabled(client) ? NAVIGATION_SPAN_NAME_FALLBACK : pathnameOf(url) || '/',
+        attributes: {
+          [SENTRY_SEGMENT_NAME_SOURCE]: 'url',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.remix_v3',
+        },
+      },
+      // The span needs the destination: `location` still points at the previous page until the
+      // navigation finishes.
+      { url },
+    );
+  });
+}
+
+/**
+ * Whether the runtime will keep this navigation inside the current document.
+ *
+ * The same three conditions `startNavigationListener` in `@remix-run/ui` checks before intercepting.
+ * What it declines becomes a new document load, which already gets a page load span, so a navigation
+ * span here would count the same click twice.
+ */
+function isRuntimeNavigation(event: NavigateEventLike, url: string): boolean {
+  // `'remix-document-reload'` is the `info` value the runtime tags its own document reloads with.
+  return event.canIntercept && event.info !== 'remix-document-reload' && isSameOrigin(url);
+}
+
+function isSameOrigin(url: string): boolean {
+  try {
+    return new URL(url).origin === WINDOW.location?.origin;
+  } catch {
+    return false;
+  }
+}
+
+function pathnameOf(url: string): string | undefined {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return undefined;
+  }
+}
+
+interface NavigateEventLike extends Event {
+  canIntercept: boolean;
+  info?: unknown;
+  destination?: { url: string };
+}
+
+type WindowWithNavigation = typeof WINDOW & {
+  navigation?: { addEventListener(type: 'navigate', listener: (event: NavigateEventLike) => void): void };
+};

packages/remix/src/v3/client/sdk.ts

@@ -0,0 +1,28 @@
+import type { BrowserOptions } from '@sentry/browser';
+import { getDefaultIntegrations as getBrowserDefaultIntegrations, init as browserInit } from '@sentry/browser';
+import { applySdkMetadata, type Client, type Integration } from '@sentry/core';
+
+import { browserTracingIntegration } from './browserTracingIntegration';
+
+/**
+ * Default integrations for the Remix 3 client SDK.
+ *
+ * Browser tracing is added here rather than left to the app, because the Navigation API variant is the
+ * only one that reports anything in Remix 3. Everything else is plain `@sentry/browser`. Nothing from
+ * `@sentry/react` applies: `remix/ui` is its own runtime, with no React and no reconciler to hook.
+ */
+export function getDefaultIntegrations(options: BrowserOptions): Integration[] {
+  return [...getBrowserDefaultIntegrations(options), browserTracingIntegration()];
+}
+
+/** Initialize the Sentry Remix 3 SDK in the browser. */
+export function init(options: BrowserOptions): Client | undefined {
+  const opts = {
+    ...options,
+    defaultIntegrations: options.defaultIntegrations ?? getDefaultIntegrations(options),
+  };
+
+  applySdkMetadata(opts, 'remix', ['remix', 'browser']);
+
+  return browserInit(opts);
+}