feat(bundles): Ensure CDN bundles always have a Replay export (#7414)

Author: mydea

package.json

@@ -47,6 +47,7 @@
     "packages/hub",
     "packages/integration-tests",
     "packages/integrations",
+    "packages/integration-shims",
     "packages/overhead-metrics",
     "packages/nextjs",
     "packages/node",
@@ -105,6 +106,7 @@
     "rollup": "^2.67.1",
     "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-license": "^2.6.1",
+    "rollup-plugin-modify": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "sinon": "^7.3.2",

packages/browser/package.json

@@ -23,6 +23,7 @@
     "tslib": "^1.9.3"
   },
   "devDependencies": {
+    "@sentry-internal/integration-shims": "7.43.0",
     "@types/md5": "2.1.33",
     "btoa": "^1.2.1",
     "chai": "^4.1.2",

packages/browser/rollup.bundle.config.js

@@ -8,6 +8,7 @@ const builds = [];
     entrypoints: ['src/index.ts'],
     jsVersion,
     licenseTitle: '@sentry/browser',
+    includeReplay: 'shim',
     outputFileBase: () => `bundles/bundle${jsVersion === 'es5' ? '.es5' : ''}`,
   });
 

packages/integration-shims/.eslintrc.js

@@ -0,0 +1,8 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+};

packages/integration-shims/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2023 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/integration-shims/README.md

@@ -0,0 +1,9 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration Shims
+
+This internal package exports shims for Integrations, which are used in order to guarantee a consistent CDN bundle output.

packages/integration-shims/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@sentry-internal/integration-shims",
+  "version": "7.43.0",
+  "description": "Shims for integrations in Sentry SDK.",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/types/index.d.ts",
+  "sideEffects": false,
+  "private": true,
+  "scripts": {
+    "build": "run-p build:transpile build:types",
+    "build:transpile": "rollup -c rollup.npm.config.js",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build:dev": "yarn build",
+    "build:watch": "run-p build:transpile:watch build:types:watch",
+    "build:dev:watch": "run-p build:watch",
+    "build:transpile:watch": "yarn build:rollup --watch",
+    "build:types:watch": "yarn build:types --watch",
+    "clean": "rimraf build",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:eslint": "eslint . --format stylish --fix",
+    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
+    "lint": "run-s lint:prettier lint:eslint",
+    "lint:eslint": "eslint . --format stylish",
+    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getsentry/sentry-javascript.git"
+  },
+  "author": "Sentry",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/getsentry/sentry-javascript/issues"
+  },
+  "devDependencies": {},
+  "dependencies": {
+    "@sentry/types": "7.43.0"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

packages/integration-shims/rollup.npm.config.js

@@ -0,0 +1,7 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index.js';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    entrypoints: ['src/index.ts'],
+  }),
+);

packages/integration-shims/src/Replay.ts

@@ -0,0 +1,46 @@
+import type { Integration } from '@sentry/types';
+
+/**
+ * This is a shim for the Replay integration.
+ * It is needed in order for the CDN bundles to continue working when users add/remove replay
+ * from it, without changing their config. This is necessary for the loader mechanism.
+ */
+class ReplayShim implements Integration {
+  /**
+   * @inheritDoc
+   */
+  public static id: string = 'Replay';
+
+  /**
+   * @inheritDoc
+   */
+  public name: string = ReplayShim.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 Replay() even though this bundle does not include the replay integration.');
+  }
+
+  /** jsdoc */
+  public setupOnce(): void {
+    // noop
+  }
+
+  /** jsdoc */
+  public start(): void {
+    // noop
+  }
+
+  /** jsdoc */
+  public stop(): void {
+    // noop
+  }
+
+  /** jsdoc */
+  public flush(): void {
+    // noop
+  }
+}
+
+export { ReplayShim as Replay };

packages/integration-shims/src/index.ts

@@ -0,0 +1 @@
+export * from './Replay';

packages/integration-shims/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["ES6"],
+    "esModuleInterop": true,
+    "target": "es6",
+    "strictPropertyInitialization": false
+  },
+  "include": ["src/**/*.ts"]
+}

packages/integration-shims/tsconfig.types.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/index.ts"],
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/types"
+  }
+}

packages/integration-tests/suites/replay/replayShim/init.js

@@ -0,0 +1,22 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+// Replay should not actually work, but still not error out
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 1,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  integrations: [window.Replay],
+});
+
+// Ensure none of these break
+window.Replay.start();
+window.Replay.stop();
+window.Replay.flush();

packages/integration-tests/suites/replay/replayShim/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>

packages/integration-tests/suites/replay/replayShim/test.ts

@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+
+sentryTest(
+  'exports a shim Replay integration for non-replay bundles',
+  async ({ getLocalTestPath, page, forceFlushReplay }) => {
+    const bundle = process.env.PW_BUNDLE;
+
+    if (!bundle || !bundle.startsWith('bundle_') || bundle.includes('replay')) {
+      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);
+    await forceFlushReplay();
+
+    expect(requestCount).toBe(0);
+    expect(consoleMessages).toEqual([
+      'You are using new Replay() even though this bundle does not include the replay integration.',
+    ]);
+  },
+);

packages/tracing/package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@sentry/browser": "7.43.0",
+    "@sentry-internal/integration-shims": "7.43.0",
     "@types/express": "^4.17.14"
   },
   "scripts": {

packages/tracing/rollup.bundle.config.js

@@ -8,6 +8,7 @@ const builds = [];
     entrypoints: ['src/index.bundle.ts'],
     jsVersion,
     licenseTitle: '@sentry/tracing & @sentry/browser',
+    includeReplay: false,
     outputFileBase: () => `bundles/bundle.tracing${jsVersion === 'es5' ? '.es5' : ''}`,
   });
 

packages/tracing/src/index.bundle.base.ts

@@ -0,0 +1,92 @@
+export type {
+  Breadcrumb,
+  Request,
+  SdkInfo,
+  Event,
+  Exception,
+  // eslint-disable-next-line deprecation/deprecation
+  Severity,
+  SeverityLevel,
+  StackFrame,
+  Stacktrace,
+  Thread,
+  User,
+} from '@sentry/types';
+
+export type { BrowserOptions, ReportDialogOptions } from '@sentry/browser';
+
+export {
+  addGlobalEventProcessor,
+  addBreadcrumb,
+  captureException,
+  captureEvent,
+  captureMessage,
+  configureScope,
+  getHubFromCarrier,
+  getCurrentHub,
+  Hub,
+  Scope,
+  setContext,
+  setExtra,
+  setExtras,
+  setTag,
+  setTags,
+  setUser,
+  startTransaction,
+  makeFetchTransport,
+  makeXHRTransport,
+  withScope,
+} from '@sentry/browser';
+
+export { BrowserClient } from '@sentry/browser';
+export {
+  defaultIntegrations,
+  defaultStackParser,
+  forceLoad,
+  init,
+  lastEventId,
+  onLoad,
+  showReportDialog,
+  flush,
+  close,
+  wrap,
+} from '@sentry/browser';
+export { SDK_VERSION } from '@sentry/browser';
+
+import { Integrations as BrowserIntegrations } from '@sentry/browser';
+import type { Integration } from '@sentry/types';
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+import { BrowserTracing } from './browser';
+import { addExtensionMethods } from './extensions';
+
+export { Span } from '@sentry/core';
+
+let windowIntegrations = {};
+
+// This block is needed to add compatibility with the integrations packages when used with a CDN
+if (GLOBAL_OBJ.Sentry && GLOBAL_OBJ.Sentry.Integrations) {
+  windowIntegrations = GLOBAL_OBJ.Sentry.Integrations;
+}
+
+// For whatever reason, it does not recognize BrowserTracing or some of the BrowserIntegrations as Integration
+const INTEGRATIONS: Record<
+  string,
+  Integration | typeof BrowserTracing | typeof BrowserIntegrations[keyof typeof BrowserIntegrations]
+> = {
+  ...windowIntegrations,
+  ...BrowserIntegrations,
+  BrowserTracing,
+};
+
+export { INTEGRATIONS as Integrations };
+// Though in this case exporting `BrowserTracing` separately (in addition to exporting it as part of
+// `Sentry.Integrations`) doesn't gain us any bundle size advantage (we're making the bundle here, not the user, and we
+// can't leave anything out of ours), it does bring the API for using the integration in line with that recommended for
+// users bundling Sentry themselves.
+export { BrowserTracing };
+
+// We are patching the global object with our hub extension methods
+addExtensionMethods();
+
+export { addExtensionMethods };

packages/tracing/src/index.bundle.replay.ts

@@ -9,4 +9,4 @@ Sentry.Integrations.Replay = Replay;
 
 export { Replay };
 
-export * from './index.bundle';
+export * from './index.bundle.base';