feat(tracing): Expose BrowserTracing in non-tracing bundles

mydea · mydea · commit ccc1043f77c4 · 2023-03-16T11:32:20.000+01:00
In order to avoid breaking the bundler when a user opts out of tracing there.
diff --git a/packages/browser-integration-tests/suites/replay/replayShim/test.ts b/packages/browser-integration-tests/suites/replay/replayShim/test.ts
@@ -30,8 +30,6 @@ sentryTest(
     await forceFlushReplay();
 
     expect(requestCount).toBe(0);
-    expect(consoleMessages).toEqual([
-      'You are using new Replay() even though this bundle does not include the replay integration.',
-    ]);
+    expect(consoleMessages).toEqual(['You are using new Replay() even though this bundle does not include replay.']);
   },
 );
diff --git a/packages/browser-integration-tests/suites/tracing/browserTracingShim/init.js b/packages/browser-integration-tests/suites/tracing/browserTracingShim/init.js
@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 1,
+  integrations: [new Sentry.Integrations.BrowserTracing()],
+});
diff --git a/packages/browser-integration-tests/suites/tracing/browserTracingShim/template.html b/packages/browser-integration-tests/suites/tracing/browserTracingShim/template.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button onclick="console.log('Test log')">Click me</button>
+  </body>
+</html>
diff --git a/packages/browser-integration-tests/suites/tracing/browserTracingShim/test.ts b/packages/browser-integration-tests/suites/tracing/browserTracingShim/test.ts
@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+
+sentryTest('exports a shim BrowserTracing integration for non-tracing bundles', async ({ getLocalTestPath, page }) => {
+  const bundle = process.env.PW_BUNDLE;
+
+  if (!bundle || !bundle.startsWith('bundle_') || bundle.includes('tracing')) {
+    sentryTest.skip();
+  }
+
+  const consoleMessages: string[] = [];
+  page.on('console', msg => consoleMessages.push(msg.text()));
+
+  let requestCount = 0;
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    requestCount++;
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+
+  expect(requestCount).toBe(0);
+  expect(consoleMessages).toEqual([
+    'You are using new BrowserTracing() even though this bundle does not include tracing.',
+  ]);
+});
diff --git a/packages/browser/rollup.bundle.config.js b/packages/browser/rollup.bundle.config.js
@@ -9,6 +9,7 @@ const builds = [];
     jsVersion,
     licenseTitle: '@sentry/browser',
     includeReplay: 'shim',
+    includeBrowserTracingShim: true,
     outputFileBase: () => `bundles/bundle${jsVersion === 'es5' ? '.es5' : ''}`,
   });
 
@@ -23,6 +24,7 @@ const replayBaseBundleConfig = makeBaseBundleConfig({
   licenseTitle: '@sentry/browser & @sentry/replay',
   outputFileBase: () => 'bundles/bundle.replay',
   includeReplay: true,
+  includeBrowserTracingShim: true,
 });
 
 builds.push(...makeBundleConfigVariants(replayBaseBundleConfig));
diff --git a/packages/browser/src/integrations/index.ts b/packages/browser/src/integrations/index.ts
@@ -4,3 +4,7 @@ export { Breadcrumbs } from './breadcrumbs';
 export { LinkedErrors } from './linkederrors';
 export { HttpContext } from './httpcontext';
 export { Dedupe } from './dedupe';
+
+// __ROLLUP_EXCLUDE_BROWSER_TRACING_SHIM_FROM_BUNDLES_BEGIN__
+export { BrowserTracing } from '@sentry-internal/integration-shims';
+// __ROLLUP_EXCLUDE_BROWSER_TRACING_SHIM_FROM_BUNDLES_END__
diff --git a/packages/integration-shims/src/BrowserTracing.ts b/packages/integration-shims/src/BrowserTracing.ts
@@ -0,0 +1,31 @@
+import type { Integration } from '@sentry/types';
+
+/**
+ * This is a shim for the BrowserTracing integration.
+ * It is needed in order for the CDN bundles to continue working when users add/remove tracing
+ * from it, without changing their config. This is necessary for the loader mechanism.
+ */
+class BrowserTracingShim implements Integration {
+  /**
+   * @inheritDoc
+   */
+  public static id: string = 'BrowserTracing';
+
+  /**
+   * @inheritDoc
+   */
+  public name: string = BrowserTracingShim.id;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public constructor(_options: any) {
+    // eslint-disable-next-line no-console
+    console.error('You are using new BrowserTracing() even though this bundle does not include tracing.');
+  }
+
+  /** jsdoc */
+  public setupOnce(): void {
+    // noop
+  }
+}
+
+export { BrowserTracingShim as BrowserTracing };
diff --git a/packages/integration-shims/src/Replay.ts b/packages/integration-shims/src/Replay.ts
@@ -19,7 +19,7 @@ class ReplayShim implements Integration {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public constructor(_options: any) {
     // eslint-disable-next-line no-console
-    console.error('You are using new Replay() even though this bundle does not include the replay integration.');
+    console.error('You are using new Replay() even though this bundle does not include replay.');
   }
 
   /** jsdoc */
diff --git a/packages/integration-shims/src/index.ts b/packages/integration-shims/src/index.ts
@@ -1 +1,2 @@
-export * from './Replay';
+export { Replay } from './Replay';
+export { BrowserTracing } from './BrowserTracing';
diff --git a/rollup/bundleHelpers.js b/rollup/bundleHelpers.js
@@ -35,6 +35,7 @@ export function makeBaseBundleConfig(options) {
     includeReplay,
     includeOffline,
     includeBrowserProfiling,
+    includeBrowserTracingShim,
   } = options;
 
   const nodeResolvePlugin = makeNodeResolvePlugin();
@@ -47,6 +48,7 @@ export function makeBaseBundleConfig(options) {
   const excludeReplayShimPlugin = makeExcludeBlockPlugin('REPLAY_SHIM');
   const excludeOfflineTransport = makeExcludeBlockPlugin('OFFLINE');
   const excludeBrowserProfiling = makeExcludeBlockPlugin('BROWSER_PROFILING');
+  const excludeBrowserTracingShim = makeExcludeBlockPlugin('BROWSER_TRACING_SHIM');
   const replayShimPlugin = makeReplayShimPlugin();
 
   // The `commonjs` plugin is the `esModuleInterop` of the bundling world. When used with `transformMixedEsModules`, it
@@ -82,6 +84,10 @@ export function makeBaseBundleConfig(options) {
     standAloneBundleConfig.plugins.push(excludeBrowserProfiling);
   }
 
+  if (!includeBrowserTracingShim) {
+    standAloneBundleConfig.plugins.push(excludeBrowserTracingShim);
+  }
+
   // used by `@sentry/integrations` and `@sentry/wasm` (bundles which need to be combined with a stand-alone SDK bundle)
   const addOnBundleConfig = {
     // These output settings are designed to mimic an IIFE. We don't use Rollup's `iife` format because we don't want to
diff --git a/rollup/plugins/bundlePlugins.js b/rollup/plugins/bundlePlugins.js
@@ -194,11 +194,15 @@ export function makeExcludeBlockPlugin(type) {
   );
 
   const browserIndexFilePath = path.resolve(__dirname, '../../packages/browser/src/index.ts');
+  const browserIntegrationsIndexFilePath = path.resolve(__dirname, '../../packages/browser/src/integrations/index.ts');
 
   const plugin = {
     transform(code, id) {
-      const isBrowserIndexFile = path.resolve(id) === browserIndexFilePath;
-      if (!isBrowserIndexFile || !replacementRegex.test(code)) {
+      const resolvedPath = path.resolve(id);
+      const shouldReplaceInFile =
+        resolvedPath === browserIndexFilePath || resolvedPath === browserIntegrationsIndexFilePath;
+
+      if (!shouldReplaceInFile || !replacementRegex.test(code)) {
         return null;
       }
 
@@ -211,7 +215,7 @@ export function makeExcludeBlockPlugin(type) {
     },
   };
 
-  plugin.name = 'excludeReplay';
+  plugin.name = 'excludeBlock';
 
   return plugin;
 }

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ class ReplayShim implements Integration {`
`19`	`19`	`// eslint-disable-next-line @typescript-eslint/no-explicit-any`
`20`	`20`	`public constructor(_options: any) {`
`21`	`21`	`// eslint-disable-next-line no-console`
`22`		`- console.error('You are using new Replay() even though this bundle does not include the replay integration.');`
	`22`	`+ console.error('You are using new Replay() even though this bundle does not include replay.');`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`/** jsdoc */`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-export * from './Replay';`
	`1`	`+export { Replay } from './Replay';`
	`2`	`+export { BrowserTracing } from './BrowserTracing';`