feat(profiling): add browser profiling to dev-ui (#45366)

Adds browser profiling to dev-ui (@k-fish your original
[PR](https://github.com/getsentry/sentry/pull/43727) got closed by the
stale bot, so reopening here). Before merging, we just need to bump the
sentry packages which should be released next Monday.

---------

Co-authored-by: k-fish <kevan.fisher@sentry.io>

package.json

@@ -48,13 +48,13 @@
     "@sentry-internal/global-search": "^0.5.7",
     "@sentry-internal/rrweb": "^1.104.0",
     "@sentry-internal/rrweb-player": "^1.104.0",
-    "@sentry/integrations": "7.38.0",
-    "@sentry/node": "7.38.0",
-    "@sentry/profiling-node": "^0.1.0",
-    "@sentry/react": "7.38.0",
+    "@sentry/integrations": "7.41.0",
+    "@sentry/node": "7.41.0",
+    "@sentry/profiling-node": "^0.2.2",
+    "@sentry/react": "7.41",
     "@sentry/release-parser": "^1.3.1",
-    "@sentry/tracing": "7.38.0",
-    "@sentry/utils": "7.38.0",
+    "@sentry/tracing": "^7.41.0",
+    "@sentry/utils": "7.41.0",
     "@tanstack/react-query": "^4.22.4",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
@@ -169,7 +169,7 @@
   "devDependencies": {
     "@babel/plugin-transform-react-jsx-source": "^7.19.6",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@sentry/jest-environment": "^4.0.0-alpha.2",
+    "@sentry/jest-environment": "^4.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",

static/app/bootstrap/commonInitialization.tsx

@@ -1,12 +1,15 @@
 import 'focus-visible';
 
-import {NODE_ENV} from 'sentry/constants';
+import {NODE_ENV, UI_DEV_ENABLE_PROFILING} from 'sentry/constants';
 import ConfigStore from 'sentry/stores/configStore';
 import {Config} from 'sentry/types';
 
 export function commonInitialization(config: Config) {
   if (NODE_ENV === 'development') {
     import(/* webpackMode: "eager" */ 'sentry/utils/silence-react-unsafe-warnings');
+    if (UI_DEV_ENABLE_PROFILING) {
+      config.sentryConfig.profilesSampleRate = 1.0; // Enable profiling on dev for now.
+    }
   }
 
   ConfigStore.loadInitialData(config);

static/app/bootstrap/initializeSdk.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line simple-import-sort/imports
 import {browserHistory, createRoutes, match} from 'react-router';
 import {ExtraErrorData} from '@sentry/integrations';
 import * as Sentry from '@sentry/react';
@@ -16,6 +17,10 @@ const SPA_MODE_ALLOW_URLS = [
   'webpack-internal://',
 ];
 
+// We check for `window.__initialData.user` property and only enable profiling
+// for Sentry employees. This is to prevent a Violation error being visible in
+// the browser console for our users.
+const shouldEnableBrowserProfiling = window?.__initialData?.user?.isSuperuser;
 /**
  * We accept a routes argument here because importing `static/routes`
  * is expensive in regards to bundle size. Some entrypoints may opt to forgo
@@ -47,9 +52,11 @@ function getSentryIntegrations(sentryConfig: Config['sentryConfig'], routes?: Fu
         : {}),
       _experiments: {
         enableInteractions: true,
+        onStartRouteTransaction: Sentry.onProfilingStartRouteTransaction,
       },
       ...partialTracingOptions,
     }),
+    new Sentry.BrowserProfilingIntegration(),
   ];
 
   return integrations;
@@ -71,7 +78,10 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
      * For SPA mode, we need a way to overwrite the default DSN from backend
      * as well as `whitelistUrls`
      */
-    dsn: SPA_DSN || sentryConfig?.dsn,
+    dsn:
+      'https://7fa19397baaf433f919fbe02228d5470@o1137848.ingest.sentry.io/6625302' ||
+      SPA_DSN ||
+      sentryConfig?.dsn,
     /**
      * Frontend can be built with a `SENTRY_RELEASE_VERSION` environment
      * variable for release string, useful if frontend is deployed separately
@@ -81,6 +91,8 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
     allowUrls: SPA_DSN ? SPA_MODE_ALLOW_URLS : sentryConfig?.whitelistUrls,
     integrations: getSentryIntegrations(sentryConfig, routes),
     tracesSampleRate,
+    // @ts-ignore not part of browser SDK types yet
+    profilesSampleRate: shouldEnableBrowserProfiling ? 1 : 0,
     tracesSampler: context => {
       if (context.transactionContext.op?.startsWith('ui.action')) {
         return tracesSampleRate / 100;

static/app/constants/index.tsx

@@ -344,6 +344,7 @@ export const IS_ACCEPTANCE_TEST = !!process.env.IS_ACCEPTANCE_TEST;
 export const NODE_ENV = process.env.NODE_ENV;
 export const SPA_DSN = process.env.SPA_DSN;
 export const SENTRY_RELEASE_VERSION = process.env.SENTRY_RELEASE_VERSION;
+export const UI_DEV_ENABLE_PROFILING = process.env.UI_DEV_ENABLE_PROFILING;
 
 export const DEFAULT_ERROR_JSON = {
   detail: t('Unknown error. Please try again.'),

static/app/types/system.tsx

@@ -155,6 +155,7 @@ export interface Config {
     dsn: string;
     release: string;
     whitelistUrls: string[];
+    profilesSampleRate?: number;
   };
   singleOrganization: boolean;
   superUserCookieDomain: string | null;

webpack.config.ts

@@ -525,6 +525,7 @@ if (
     headers: {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Credentials': 'true',
+      'Document-Policy': 'js-profiling',
     },
     // Cover the various environments we use (vercel, getsentry-dev, localhost)
     allowedHosts: [
@@ -599,6 +600,9 @@ if (IS_UI_DEV_ONLY) {
       type: 'https',
       options: httpsOptions,
     },
+    headers: {
+      'Document-Policy': 'js-profiling',
+    },
     static: {
       publicPath: '/_assets/',
     },
@@ -610,6 +614,7 @@ if (IS_UI_DEV_ONLY) {
         changeOrigin: true,
         headers: {
           Referer: 'https://sentry.io/',
+          'Document-Policy': 'js-profiling',
         },
         cookieDomainRewrite: {'.sentry.io': 'localhost'},
       },

yarn.lock

@@ -2300,96 +2300,87 @@
     fflate "^0.4.4"
     mitt "^1.1.3"
 
-"@sentry/browser@7.38.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.38.0.tgz#cdb39da23f9ee2ce47395b2c12542acb4969efa7"
-  integrity sha512-rPJr+2jRYL29PeMYA2JgzYKTZQx6bc3T9evbAdIh0n+popSjpVyOpOMV/3l6A7KZeeix3dpp6eUZUxTJukqriQ==
-  dependencies:
-    "@sentry/core" "7.38.0"
-    "@sentry/replay" "7.38.0"
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+"@sentry/browser@7.41.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.41.0.tgz#f4e789417e3037cbc9cd15f3a000064b1873b964"
+  integrity sha512-ZEtgTXPOHZ9/Qn42rr9ZAPTKCV6fAjyDC4FFWMGP4HoUqJqr2woRddP9O5n1jvjsoIPAFOmGzbCuZwFrPVVnpQ==
+  dependencies:
+    "@sentry/core" "7.41.0"
+    "@sentry/replay" "7.41.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     tslib "^1.9.3"
 
-"@sentry/core@7.37.0":
-  version "7.37.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.37.0.tgz#df4036012dbadee9a0569d392d73d034c4e758fa"
-  integrity sha512-2M6aZKIG/1HgfE0hobQ9tKSo6ZsyBrSQqjtQhMVFwVzZJyFw3m1AqcrB+f0myi+1ay2MMPbJ+HhYtBPR3e4EvA==
+"@sentry/core@7.41.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.41.0.tgz#a4a8291ef4e65f40c28fc38318e7dae721d5d609"
+  integrity sha512-yT3wl3wMfPymstIZRWNjuov4xhieIEPD0z9MIW9VmoemqkD5BEZsgPuvGaVIyQVMyx61GsN4H4xd0JCyNqNvLg==
   dependencies:
-    "@sentry/types" "7.37.0"
-    "@sentry/utils" "7.37.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     tslib "^1.9.3"
 
-"@sentry/core@7.38.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.38.0.tgz#52f1f1f2ba5e88ab7b33c3abb0ea9730c78d953d"
-  integrity sha512-+hXh/SO3Ie6WC2b+wi01xLhyVREdkRXS5QBmCiv3z2ks2HvYXp7PoKSXJvNKiwCP+pBD+enOnM1YEzM2yEy5yw==
+"@sentry/hub@^7.38.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.41.0.tgz#e05d5aa02c99d43da7a0c7886ec0d5311fef722e"
+  integrity sha512-atVIsJ52VdRMKWmjbAicF+xC29AzPx0K/mYEV0AbPhhXPv2qg3c1IbeEp3TAU5iKZZXgI0SiuUmtYxirZMBnFw==
   dependencies:
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+    "@sentry/core" "7.41.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     tslib "^1.9.3"
 
-"@sentry/hub@^7.34.0":
-  version "7.37.0"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.37.0.tgz#edcd71e11ead4346c284741d05b462253fcea59c"
-  integrity sha512-MrtHSe0OqXosjurqDRRmM41hy+VgHn+kcAXUcLSgZS+EoL5SurIBZCA7i8VoXhgLMJAmgD6oWLraA4/9ZW6yrw==
+"@sentry/integrations@7.41.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.41.0.tgz#1f4ac60c3905a87023e0c3c493befced687b49ca"
+  integrity sha512-wyVsDxTn/lslPSt02JS4Kw5iRBau+GYst1r7z55VKBl7YJm0XCaLnGsqv68qweaK9SI7PX8rj/+GmRl8G86wOg==
   dependencies:
-    "@sentry/core" "7.37.0"
-    "@sentry/types" "7.37.0"
-    "@sentry/utils" "7.37.0"
-    tslib "^1.9.3"
-
-"@sentry/integrations@7.38.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.38.0.tgz#6caf04f9aff5780a2b7b146a620141ed90369572"
-  integrity sha512-n1OK+X5xaMo7j0lZxpEvEqjQSH4gIcVxeE2KXMI/2/sM7dJyQvfgjogh6ZPOpCAZnT9sUmesH5FevjXXT2493A==
-  dependencies:
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     localforage "^1.8.1"
     tslib "^1.9.3"
 
-"@sentry/jest-environment@^4.0.0-alpha.2":
-  version "4.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@sentry/jest-environment/-/jest-environment-4.0.0-alpha.2.tgz#20543b4846b1e779c8fb034af2c691e29d77cf91"
-  integrity sha512-8kFQl0aT1lWcZgHuLHrI35pyW3ryO2vDfyRL2hBhIRBfFi8Q5aLkVXN+mbwS3tAIAfnLzlvCB73dK/1h9lH0Dw==
+"@sentry/jest-environment@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@sentry/jest-environment/-/jest-environment-4.0.0.tgz#037844bed70c8f13259ee01ab65ff8d36aef0209"
+  integrity sha512-91jLBS8KbX2Ng0aDSP7kdE9sjiLc4qjp/jczTbmvOvuHxoaQ9hSLaEpsthnnUQ/zNeprZMkOC9xlS+zABw3Zmw==
 
-"@sentry/node@7.38.0", "@sentry/node@^7.34.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.38.0.tgz#957524fa4764dc19ef970ccdffb802d62e0db3ae"
-  integrity sha512-jNIN6NZvgzn/oms8RQzffjX8Z0LQDTN6N28nnhzqGCvnfmS1QtTt0FlU+pTuFXZNNSjfGy4XMXMYvLlbvhm2bg==
+"@sentry/node@7.41.0", "@sentry/node@^7.38.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.41.0.tgz#41d33f2fec547dce4962db401c08ab672625ca62"
+  integrity sha512-JAz0TAVvq4z7dNrDBECLB5Fd4bGDGXSOR1f63iV/8fUNsZPqqdh8LXnctPXTpcTjsdlfmjUL1CC2RQ6yKYMtTQ==
   dependencies:
-    "@sentry/core" "7.38.0"
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+    "@sentry/core" "7.41.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     cookie "^0.4.1"
     https-proxy-agent "^5.0.0"
     lru_map "^0.3.3"
     tslib "^1.9.3"
 
-"@sentry/profiling-node@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@sentry/profiling-node/-/profiling-node-0.1.0.tgz#1cf770d2472688129f24044fc42ac36ede8571df"
-  integrity sha512-0VHGOAWpHhtFc4vnBcHZUNGwvvcGwH6Lw1dyjv82Trnw1oZ8QTI47Hy/xURK0ThNM3WW9+LLwQcIoc6ZFFntTw==
-  dependencies:
-    "@sentry/hub" "^7.34.0"
-    "@sentry/node" "^7.34.0"
-    "@sentry/tracing" "^7.34.0"
-    "@sentry/types" "^7.34.0"
-    "@sentry/utils" "^7.34.0"
+"@sentry/profiling-node@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@sentry/profiling-node/-/profiling-node-0.2.2.tgz#5d976f572177f743f7a89b5f4d50c6c018ffee77"
+  integrity sha512-kVdTtyK2yJnf2trT3WKmecm7AK142561zqBxrYAbkdAvWg7q+6dsLgDHb9uXmLpP8LKQK8ujnaNUfWhjnLn6gA==
+  dependencies:
+    "@sentry/hub" "^7.38.0"
+    "@sentry/node" "^7.38.0"
+    "@sentry/tracing" "^7.38.0"
+    "@sentry/types" "^7.38.0"
+    "@sentry/utils" "^7.38.0"
     detect-libc "^2.0.1"
     nan "^2.17.0"
     node-abi "^3.28.0"
     node-gyp "^9.3.0"
 
-"@sentry/react@7.38.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.38.0.tgz#7294bc8d85000994267fabf8d6f817369ca09a7a"
-  integrity sha512-IZpQ0aptV3UPjvDj+xorrgPgnW2xIL6Zcy7B6wAgwTC81OUITE7YaShglGD0sJ8M1ReFuH9duwTysr/uv8AytQ==
+"@sentry/react@7.41":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.41.0.tgz#bde46a49ff7622357239b7fd86c372459fcbde97"
+  integrity sha512-Ajt71pa6Nj4h3hLi2LeS25miVqMv1Zt5NPX5QpSvlPxFRJiIYPOQRWRt0r1pMYR5wD+Y54hJDue+EcWS1H3AKA==
   dependencies:
-    "@sentry/browser" "7.38.0"
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+    "@sentry/browser" "7.41.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     hoist-non-react-statics "^3.3.2"
     tslib "^1.9.3"
 
@@ -2398,49 +2389,36 @@
   resolved "https://registry.yarnpkg.com/@sentry/release-parser/-/release-parser-1.3.1.tgz#0ab8be23fd494d80dd0e4ec8ae5f3d13f805b13d"
   integrity sha512-/dGpCq+j3sJhqQ14RNEEL45Ot/rgq3jAlZDD/8ufeqq+W8p4gUhSrbGWCRL82NEIWY9SYwxYXGXjRcVPSHiA1Q==
 
-"@sentry/replay@7.38.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.38.0.tgz#48d240b67de6b4ab41c951d19abeceb0d3f7706d"
-  integrity sha512-Ai78/OIYedny605x8uS0n/a5uj7qnuevogGD6agLat9lGc8DFvC07m2iS+EFyGOwtQzyDlRYJvYkHL8peR3crQ==
+"@sentry/replay@7.41.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.41.0.tgz#73168d659b0e78ca58574831a6672a77ce9727ee"
+  integrity sha512-/vxuO17AysCoBbCl9wCwjsCFBD4lEbYgfC1GJm8ayWwPU1uhvZcEx6reUwi0rEFpWYGHSHh3+gi+QsOcY/EmnQ==
   dependencies:
-    "@sentry/core" "7.38.0"
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+    "@sentry/core" "7.41.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
 
-"@sentry/tracing@7.38.0", "@sentry/tracing@^7.34.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.38.0.tgz#ba28f15f526e87df167de206fd4fb0a39277dac6"
-  integrity sha512-ejXJp8oOT64MVtBzqdECUUaNzKbpu25St8Klub1i4Sm7xO+ZjDQDI4TIHvWojZvtkwQ3F4jcsCclc8KuyJunyQ==
+"@sentry/tracing@^7.38.0", "@sentry/tracing@^7.41.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.41.0.tgz#28f57667a13b95cb8bce5af0809e7727b645e6b7"
+  integrity sha512-zh1ceuwQ8NzE5n8r4y78QrYD/alJl4qlkiEX9lAL6PnLMWJkVWM02BBu+x75yPFWSSDfDA/kZ9WqKkHNdjGpDw==
   dependencies:
-    "@sentry/core" "7.38.0"
-    "@sentry/types" "7.38.0"
-    "@sentry/utils" "7.38.0"
+    "@sentry/core" "7.41.0"
+    "@sentry/types" "7.41.0"
+    "@sentry/utils" "7.41.0"
     tslib "^1.9.3"
 
-"@sentry/types@7.37.0":
-  version "7.37.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.37.0.tgz#691b92c5c733ce772d8761a571196f738ca06384"
-  integrity sha512-p8iw5oGvWLIk7osMgXhxshUpebJD0riiuT3ihBP0DV+Gs8r0qdQ5gtcStl7Cn0D4013p4j/f3T5q85Z9ENE6fA==
-
-"@sentry/types@7.38.0", "@sentry/types@^7.34.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.38.0.tgz#6e2611544446271ed237440b12de782805aefe25"
-  integrity sha512-NKOALR6pNUMzUrsk2m+dkPrO8uGNvNh1LD0BCPswKNjC2qHo1h1mDGCgBmF9+EWyii8ZoACTIsxvsda+MBf97Q==
-
-"@sentry/utils@7.37.0":
-  version "7.37.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.37.0.tgz#20b367649873f7ff5c6f1071ed2a1069779b2e10"
-  integrity sha512-CN86EKQ07+SgqfgGehMJsgrCEjc0sl1YDcj2xf9dA0Bn3ma2MTDkCyutxVcRfc2IVWfqAN1rn/L8/BH2v2+eqA==
-  dependencies:
-    "@sentry/types" "7.37.0"
-    tslib "^1.9.3"
+"@sentry/types@7.41.0", "@sentry/types@^7.38.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.41.0.tgz#3d53432a3d7693a31b606d3083ab9203c56f5aec"
+  integrity sha512-4z9VdObynwd64i0VHCqkeIAHmsFzapL21qN41Brzb7jY/eGxjn/0rxInDGH+vkoE9qacGqiYfWj4vRNPLsC/bw==
 
-"@sentry/utils@7.38.0", "@sentry/utils@^7.34.0":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.38.0.tgz#d10716e730108301f58766970493e9c5da0ba502"
-  integrity sha512-MgbI3YmYuyyhUtvcXkgGBqjOW+nuLLNGUdWCK+C4kObf8VbLt3dSE/7SEMT6TSHLYQmxs2BxFgx5Agn97m68kQ==
+"@sentry/utils@7.41.0", "@sentry/utils@^7.38.0":
+  version "7.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.41.0.tgz#54224dba668dd8c8feb0ff1b4f39938b8fdefd3b"
+  integrity sha512-SL+MGitvkakbkrOTb48rDuJp9GYx/veB6EOzYygh49+zwz4DGM7dD4/rvf/mVlgmXUzPgdGDgkVmxgX3nT7I7g==
   dependencies:
-    "@sentry/types" "7.38.0"
+    "@sentry/types" "7.41.0"
     tslib "^1.9.3"
 
 "@sinclair/typebox@^0.25.16":