ref(ui): Codesplit `@sentry/rrweb` SDK integration (#20365)

This is only loaded for Sentry staff, so let's codesplit it. (I think we'll want to keep it codesplit for non-staff as well)

package.json

@@ -200,7 +200,7 @@
     "dev-acceptance": "NO_DEV_SERVER=1 NODE_ENV=development yarn webpack --watch",
     "storybook": "SENTRY_UI_HOT_RELOAD='' start-storybook -p 9001 -c .storybook",
     "storybook-build": "build-storybook -c .storybook -o .storybook-out && sed -i -e 's/\\/sb_dll/sb_dll/g' .storybook-out/index.html",
-    "webpack-profile": "yarn -s webpack --profile --json > stats.json",
+    "webpack-profile": "NO_TS_FORK=1 yarn -s webpack --profile --json > stats.json",
     "build-css": "NODE_ENV=production yarn webpack --config=config/webpack.css.config.js",
     "build-prod": "NODE_ENV=production yarn webpack --mode production --display errors-only --output-path=public",
     "build": "yarn webpack --output-path=public"

src/sentry/static/sentry/app/bootstrap.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Reflux from 'reflux';
 import * as Router from 'react-router';
-import SentryRRWeb from '@sentry/rrweb';
 import createReactClass from 'create-react-class';
 import jQuery from 'jquery';
 import moment from 'moment';
@@ -49,7 +48,7 @@ const config = ConfigStore.getConfig();
 
 const tracesSampleRate = config ? config.apmSampling : 0;
 
-function getSentryIntegrations(hasReplays: boolean = false) {
+async function getSentryIntegrations(hasReplays: boolean = false) {
   const integrations = [
     new ExtraErrorData({
       // 6 is arbitrary, seems like a nice number
@@ -67,6 +66,9 @@ function getSentryIntegrations(hasReplays: boolean = false) {
     // eslint-disable-next-line no-console
     console.log('[sentry] Instrumenting session with rrweb');
 
+    const {default: SentryRRWeb} = await import(
+      /* webpackChunkName: "SentryRRWeb" */ '@sentry/rrweb'
+    );
     // TODO(ts): The type returned by SentryRRWeb seems to be somewhat
     // incompatible. It's a newer plugin, so this can be expected, but we
     // should fix.
@@ -82,27 +84,31 @@ function getSentryIntegrations(hasReplays: boolean = false) {
 const hasReplays =
   window.__SENTRY__USER && window.__SENTRY__USER.isStaff && !DISABLE_RR_WEB;
 
-Sentry.init({
-  ...window.__SENTRY__OPTIONS,
-  /**
-   * For SPA mode, we need a way to overwrite the default DSN from backend
-   * as well as `whitelistUrls`
-   */
-  dsn: SPA_DSN || window.__SENTRY__OPTIONS.dsn,
-  whitelistUrls: SPA_DSN
-    ? ['localhost', 'dev.getsentry.net', 'sentry.dev', 'webpack-internal://']
-    : window.__SENTRY__OPTIONS.whitelistUrls,
-  integrations: getSentryIntegrations(hasReplays),
-  tracesSampleRate,
-});
-
-if (window.__SENTRY__USER) {
-  Sentry.setUser(window.__SENTRY__USER);
-}
-if (window.__SENTRY__VERSION) {
-  Sentry.setTag('sentry_version', window.__SENTRY__VERSION);
+async function initializeSentrySdk() {
+  Sentry.init({
+    ...window.__SENTRY__OPTIONS,
+    /**
+     * For SPA mode, we need a way to overwrite the default DSN from backend
+     * as well as `whitelistUrls`
+     */
+    dsn: SPA_DSN || window.__SENTRY__OPTIONS.dsn,
+    whitelistUrls: SPA_DSN
+      ? ['localhost', 'dev.getsentry.net', 'sentry.dev', 'webpack-internal://']
+      : window.__SENTRY__OPTIONS.whitelistUrls,
+    integrations: await getSentryIntegrations(hasReplays),
+    tracesSampleRate,
+  });
+
+  if (window.__SENTRY__USER) {
+    Sentry.setUser(window.__SENTRY__USER);
+  }
+  if (window.__SENTRY__VERSION) {
+    Sentry.setTag('sentry_version', window.__SENTRY__VERSION);
+  }
+  Sentry.setTag('rrweb.active', hasReplays ? 'yes' : 'no');
 }
-Sentry.setTag('rrweb.active', hasReplays ? 'yes' : 'no');
+
+initializeSentrySdk();
 
 // Used for operational metrics to determine that the application js
 // bundle was loaded by browser.