feat(core): split exports by browser/server for bundle size (#20435)

Split the exports from `@sentry/core` into three options:

- `@sentry/core`, the default (unchanged)
- `@sentry/core/browser`, containing _only_ shared and browser-specific
  functionality, nothing server-specific.
- `@sentry/core/server`, containing _only_ shared and server-specific
  functionality, nothing browser-specific.

This should allow us to make the bundle sizes quite a bit smaller in our
browser SDKs where this is important, while adding more functionality to
our server-specific SDKs in `@sentry/core`, where they can more easily
be shared across runtimes.

Some integration requires updating `tsconfig` settings so that tsc knows
it is allowed to look up `package.json` exports. In particular, we
cannot use the `module: "node"` option, or `moduleResolution: "node"`.
In many cases, this means either using `module: "esnext"` and
`moduleResolution: "bundler"`, so that tsc lets the bundler handle the
assembly, or `nodenext` or `node16` for both `module` and
`moduleResolution`.

fix: #20434
fix: JS-2243

Author: isaacs

dev-packages/e2e-tests/test-applications/react-router-6/tsconfig.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

dev-packages/e2e-tests/test-applications/react-send-to-sentry/tsconfig.json

@@ -10,7 +10,7 @@
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

dev-packages/rollup-utils/npmHelpers.mjs

@@ -21,7 +21,7 @@ import {
   makeSucrasePlugin,
 } from './plugins/index.mjs';
 import { makePackageNodeEsm } from './plugins/make-esm-plugin.mjs';
-import { mergePlugins } from './utils.mjs';
+import { mergeExternals, mergePlugins } from './utils.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -47,6 +47,13 @@ export function makeBaseNPMConfig(options = {}) {
     excludeIframe: undefined,
   });
 
+  const deps = [
+    ...builtinModules.filter(m => !bundledBuiltins.includes(m)),
+    ...Object.keys(packageDotJSON.dependencies || {}),
+    ...Object.keys(packageDotJSON.peerDependencies || {}),
+    ...Object.keys(packageDotJSON.optionalDependencies || {}),
+  ];
+
   const defaultBaseConfig = {
     input: entrypoints,
 
@@ -100,17 +107,20 @@ export function makeBaseNPMConfig(options = {}) {
     plugins: [nodeResolvePlugin, sucrasePlugin, debugBuildStatementReplacePlugin, rrwebBuildPlugin, cleanupPlugin],
 
     // don't include imported modules from outside the package in the final output
-    external: [
-      ...builtinModules.filter(m => !bundledBuiltins.includes(m)),
-      ...Object.keys(packageDotJSON.dependencies || {}),
-      ...Object.keys(packageDotJSON.peerDependencies || {}),
-      ...Object.keys(packageDotJSON.optionalDependencies || {}),
-    ],
+    // also treat subpath exports (e.g. `@sentry/core/browser`) as external
+    external: id => {
+      // treat subpath exports as external if the package is external
+      return deps.some(dep => id === dep || id.startsWith(`${dep}/`));
+    },
   };
 
   return deepMerge(defaultBaseConfig, packageSpecificConfig, {
     // Plugins have to be in the correct order or everything breaks, so when merging we have to manually re-order them
-    customMerge: key => (key === 'plugins' ? mergePlugins : undefined),
+    customMerge: key => {
+      if (key === 'plugins') return mergePlugins;
+      if (key === 'external') return mergeExternals;
+      return undefined;
+    },
   });
 }
 

dev-packages/rollup-utils/utils.mjs

@@ -10,6 +10,25 @@ export const insertAt = (arr, index, ...insertees) => {
   return newArr;
 };
 
+/**
+ * Turn a list of module IDs into a test function
+ * Includes submodule exports by checking that it starts with the name
+ * plus a / character. The list would contain something like `'@sentry/core'`
+ * and we might test it against a module id like `'@sentry/core/browser'`
+ */
+const toFilterFunction = list => (Array.isArray(list) ? id => list.some(test => filterTest(test, id)) : list);
+
+const filterTest = (test, id) => (test instanceof RegExp ? test.test(id) : id === test || id.startsWith(`${test}/`));
+
+/**
+ * Merge two external configs (function or array), returning a function that handles both.
+ */
+export function mergeExternals(base, specific) {
+  const baseFn = toFilterFunction(base);
+  const specificFn = toFilterFunction(specific);
+  return id => baseFn(id) || specificFn(id);
+}
+
 /**
  * Merge two arrays of plugins, making sure they're sorted in the correct order.
  */

packages/astro/tsconfig.json

@@ -4,6 +4,8 @@
   "include": ["src/**/*"],
 
   "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler"
     // package-specific options
   }
 }

packages/browser/src/client.ts

@@ -8,15 +8,15 @@ import type {
   ParameterizedString,
   Scope,
   SeverityLevel,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 import {
   _INTERNAL_flushLogsBuffer,
   _INTERNAL_flushMetricsBuffer,
   addAutoIpAddressToSession,
   applySdkMetadata,
   Client,
   getSDKSource,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 import { eventFromException, eventFromMessage } from './eventbuilder';
 import { WINDOW } from './helpers';
 import type { BrowserTransportOptions } from './transports/types';

packages/browser/src/diagnose-sdk.ts

@@ -1,4 +1,4 @@
-import { getClient, suppressTracing } from '@sentry/core';
+import { getClient, suppressTracing } from '@sentry/core/browser';
 
 /**
  * A function to diagnose why the SDK might not be successfully sending data.

packages/browser/src/eventbuilder.ts

@@ -6,7 +6,7 @@ import type {
   SeverityLevel,
   StackFrame,
   StackParser,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 import {
   _INTERNAL_enhanceErrorWithSentryInfo,
   addExceptionMechanism,
@@ -22,7 +22,7 @@ import {
   isPlainObject,
   normalizeToSize,
   resolvedSyncPromise,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 
 type Prototype = { constructor: (...args: unknown[]) => unknown };
 

packages/browser/src/exports.ts

@@ -20,7 +20,7 @@ export type {
   ExclusiveEventHintOrCaptureContext,
   Log,
   LogSeverityLevel,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 
 export type { BrowserOptions } from './client';
 
@@ -72,14 +72,14 @@ export {
   updateSpanName,
   withStreamedSpan,
   metrics,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 
 export {
   SEMANTIC_ATTRIBUTE_SENTRY_OP,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE,
-} from '@sentry/core';
+} from '@sentry/core/browser';
 
 export { WINDOW } from './helpers';
 export { BrowserClient } from './client';

packages/browser/src/feedbackAsync.ts

@@ -5,6 +5,6 @@ import { lazyLoadIntegration } from './utils/lazyLoadIntegration';
  * An integration to add user feedback to your application,
  * while loading most of the code lazily only when it's needed.
  */
-export const feedbackAsyncIntegration = buildFeedbackIntegration({
+export const feedbackAsyncIntegration: ReturnType<typeof buildFeedbackIntegration> = buildFeedbackIntegration({
   lazyLoadIntegration,
 });