feat: Update Sentry SDK to 8.0.0-beta.5

.github/dependabot.yml

@@ -28,7 +28,6 @@ updates:
       # - dependency-name: "@sentry/react"
       - dependency-name: '@sentry/node'
       - dependency-name: '@sentry/utils'
-      - dependency-name: '@sentry/integrations'
       - dependency-name: '@sentry/rrweb'
 
       # We ignore everything that hasn't yet been upgrade, this way we will

build-utils/sentry-instrumentation.ts

@@ -139,8 +139,12 @@ class SentryInstrumentation {
           startTime,
         });
 
-    span
-      ?.startChild({
+    if (!span) {
+      return;
+    }
+
+    this.Sentry.withActiveSpan(span, () => {
+      this.Sentry?.startInactiveSpan({
         op: 'build',
         name: 'webpack build',
         attributes: {
@@ -152,11 +156,11 @@ class SentryInstrumentation {
             : 'N/A',
           loadavg: os.loadavg(),
         },
-        startTimestamp: startTime,
-      })
-      .end(endTime);
+        startTime,
+      }).end(endTime);
+    });
 
-    span?.end();
+    span.end();
   }
 
   apply(compiler: webpack.Compiler) {

package.json

@@ -57,15 +57,14 @@
     "@sentry-internal/rrweb-player": "2.12.0",
     "@sentry-internal/rrweb-snapshot": "2.12.0",
     "@sentry/babel-plugin-component-annotate": "^2.16.0",
-    "@sentry/core": "^7.111.0",
-    "@sentry/integrations": "^7.111.0",
-    "@sentry/node": "^7.111.0",
-    "@sentry/react": "^7.111.0",
+    "@sentry/core": "^8.0.0-beta.5",
+    "@sentry/node": "^8.0.0-beta.5",
+    "@sentry/react": "^8.0.0-beta.5",
     "@sentry/release-parser": "^1.3.1",
     "@sentry/status-page-list": "^0.1.0",
-    "@sentry/types": "^7.111.0",
-    "@sentry/utils": "^7.111.0",
-    "@spotlightjs/spotlight": "^1.2.13",
+    "@sentry/types": "^8.0.0-beta.5",
+    "@sentry/utils": "^8.0.0-beta.5",
+    "@spotlightjs/spotlight": "^2.0.0-alpha.1",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@types/color": "^3.0.3",
@@ -179,7 +178,7 @@
     "@codecov/webpack-plugin": "^0.0.1-beta.6",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@sentry/jest-environment": "^4.0.0",
-    "@sentry/profiling-node": "^7.109.0",
+    "@sentry/profiling-node": "^8.0.0-beta.5",
     "@styled/typescript-styled-plugin": "^1.0.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",

static/app/bootstrap/initializeSdk.tsx

@@ -1,6 +1,5 @@
 // eslint-disable-next-line simple-import-sort/imports
 import {browserHistory, createRoutes, match} from 'react-router';
-import {extraErrorDataIntegration} from '@sentry/integrations';
 import * as Sentry from '@sentry/react';
 import {_browserPerformanceTimeOriginMode} from '@sentry/utils';
 import type {Event} from '@sentry/types';
@@ -51,19 +50,17 @@ const shouldOverrideBrowserProfiling = window?.__initialData?.user?.isSuperuser;
  */
 function getSentryIntegrations(routes?: Function) {
   const integrations = [
-    extraErrorDataIntegration({
+    Sentry.extraErrorDataIntegration({
       // 6 is arbitrary, seems like a nice number
       depth: 6,
     }),
-    Sentry.metrics.metricsAggregatorIntegration(),
     Sentry.reactRouterV3BrowserTracingIntegration({
       history: browserHistory as any,
       routes: typeof routes === 'function' ? createRoutes(routes()) : [],
       match,
       _experiments: {
         enableInteractions: true,
       },
-      enableInp: true,
     }),
     Sentry.browserProfilingIntegration(),
   ];
@@ -103,7 +100,8 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
     profilesSampleRate: shouldOverrideBrowserProfiling ? 1 : 0.1,
     tracePropagationTargets: ['localhost', /^\//, ...extraTracePropagationTargets],
     tracesSampler: context => {
-      if (context.transactionContext.op?.startsWith('ui.action')) {
+      const op = context.attributes?.[Sentry.SEMANTIC_ATTRIBUTE_SENTRY_OP] || '';
+      if (op.startsWith('ui.action')) {
         return tracesSampleRate / 100;
       }
       return tracesSampleRate;
@@ -120,9 +118,7 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
 
       // If we removed any spans at the end above, the end timestamp needs to be adjusted again.
       if (event.spans) {
-        const newEndTimestamp = Math.max(
-          ...event.spans.map(span => span.endTimestamp ?? 0)
-        );
+        const newEndTimestamp = Math.max(...event.spans.map(span => span.timestamp ?? 0));
         event.timestamp = newEndTimestamp;
       }
 

static/app/components/events/contexts/index.tsx

@@ -92,11 +92,12 @@ export function EventContexts({event, group}: Props) {
   );
 
   useEffect(() => {
-    const transaction = Sentry.getActiveTransaction();
-    if (transaction && usingOtel()) {
-      transaction.tags.otel_event = true;
-      transaction.tags.otel_sdk = sdk?.name;
-      transaction.tags.otel_sdk_version = sdk?.version;
+    const span = Sentry.getActiveSpan();
+    if (usingOtel() && span) {
+      const rootSpan = Sentry.getRootSpan(span);
+      rootSpan.setAttribute('otel_event', true);
+      rootSpan.setAttribute('otel_sdk', sdk?.name);
+      rootSpan.setAttribute('otel_sdk_version', sdk?.version);
     }
   }, [usingOtel, sdk]);
 

static/app/components/events/eventTags/index.tsx

@@ -92,9 +92,9 @@ export function EventTags({
 
   useEffect(() => {
     const mechanism = filteredTags?.find(tag => tag.key === 'mechanism')?.value;
-    const transaction = Sentry.getActiveTransaction();
-    if (mechanism && transaction) {
-      transaction.tags.hasMechanism = mechanism;
+    const span = Sentry.getActiveSpan();
+    if (mechanism && span) {
+      Sentry.getRootSpan(span).setAttribute('hasMechanism', mechanism);
     }
   }, [filteredTags]);
 

static/app/components/featureFeedback/feedbackModal.spec.tsx

@@ -1,5 +1,4 @@
 import {Fragment} from 'react';
-import {BrowserClient, defaultStackParser, makeFetchTransport} from '@sentry/react';
 import * as Sentry from '@sentry/react';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
@@ -40,8 +39,8 @@ describe('FeatureFeedback', function () {
       jest.spyOn(indicators, 'addSuccessMessage');
 
       const feedbackClient = new Sentry.BrowserClient({
-        transport: makeFetchTransport,
-        stackParser: defaultStackParser,
+        transport: Sentry.makeFetchTransport,
+        stackParser: Sentry.defaultStackParser,
         integrations: Sentry.getDefaultIntegrations({}),
       });
 
@@ -156,7 +155,7 @@ describe('FeatureFeedback', function () {
       jest.spyOn(indicators, 'addSuccessMessage');
 
       // Mock implementation of the Sentry Browser SDK
-      BrowserClient.prototype.captureEvent = jest.fn();
+      Sentry.BrowserClient.prototype.captureEvent = jest.fn();
 
       renderGlobalModal();
 

static/app/components/feedback/widget/useFeedbackWidget.tsx

@@ -1,6 +1,6 @@
 import type {RefObject} from 'react';
 import {useEffect} from 'react';
-import {type Feedback, getClient} from '@sentry/react';
+import * as Sentry from '@sentry/react';
 
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
@@ -13,9 +13,7 @@ interface Props {
 
 export default function useFeedbackWidget({buttonRef, messagePlaceholder}: Props) {
   const config = useLegacyStore(ConfigStore);
-  const client = getClient();
-  // Note that this is only defined in environments where Feedback is enabled (getsentry)
-  const feedback = client?.getIntegrationByName?.<Feedback>('Feedback');
+  const feedback = Sentry.getFeedback();
 
   useEffect(() => {
     if (!feedback) {
@@ -32,15 +30,12 @@ export default function useFeedbackWidget({buttonRef, messagePlaceholder}: Props
 
     if (buttonRef) {
       if (buttonRef.current) {
-        const widget = feedback.attachTo(buttonRef.current, options);
-        return () => {
-          feedback.removeWidget(widget);
-        };
+        return feedback.attachTo(buttonRef.current, options);
       }
     } else {
       const widget = feedback.createWidget(options);
       return () => {
-        feedback.removeWidget(widget);
+        widget.removeFromDom();
       };
     }
 

static/app/locale.tsx

@@ -1,5 +1,4 @@
 import {cloneElement, Fragment, isValidElement} from 'react';
-import * as Sentry from '@sentry/react';
 import Jed from 'jed';
 import {sprintf} from 'sprintf-js';
 
@@ -71,8 +70,8 @@ function getClient(): Jed | null {
   if (!i18n) {
     // If this happens, it could mean that an import was added/changed where
     // locale initialization does not happen soon enough.
-    const warning = new Error('Locale not set, defaulting to English');
-    Sentry.captureException(warning);
+    // eslint-disable-next-line no-console
+    console.warn('Locale not set, defaulting to English');
     return setLocale(DEFAULT_LOCALE_DATA);
   }
 

static/app/utils/discover/charts.tsx

@@ -1,4 +1,3 @@
-import {captureMessage} from '@sentry/react';
 import * as Sentry from '@sentry/react';
 import type {LegendComponentOption} from 'echarts';
 
@@ -177,7 +176,7 @@ export function findRangeOfMultiSeries(series: Series[], legend?: LegendComponen
           scope.setTag('seriesName', seriesName);
           scope.setExtra('min', min);
           scope.setExtra('max', min);
-          captureMessage('Found negative min value in multiseries');
+          Sentry.captureMessage('Found negative min value in multiseries');
         });
       }
     }

static/app/utils/getCurrentSentryReactRootSpan.tsx

@@ -0,0 +1,9 @@
+import * as Sentry from '@sentry/react';
+
+/**
+ * Gets the current root span, if one exists.
+ */
+export default function getCurrentSentryReactRootSpan() {
+  const span = Sentry.getActiveSpan();
+  return span ? Sentry.getRootSpan(span) : undefined;
+}

static/app/utils/handleXhrErrorResponse.spec.tsx

@@ -81,8 +81,12 @@ describe('handleXhrErrorResponse', function () {
     const mockScope = new Sentry.Scope();
     const setExtrasSpy = jest.spyOn(mockScope, 'setExtras');
     const setTagsSpy = jest.spyOn(mockScope, 'setTags');
-    const hub = Sentry.getCurrentHub();
-    jest.spyOn(hub, 'pushScope').mockReturnValueOnce(mockScope);
+    // @ts-expect-error this is fine...
+    jest.spyOn(Sentry, 'withScope').mockImplementation(function (
+      callback: (scope: Sentry.Scope) => any
+    ) {
+      return callback(mockScope);
+    });
 
     handleXhrErrorResponse("Can't fetch ball", err);