feat(ui): Add browser DDM (#61789)

Replacing a feedback `captureException` as it is something we wanted to
capture to keep an eye on and is not something we need (or have) a
stacktrace of. We do not use it as an issue so this seems like a good
candidate to use DDM on.

Docs: https://github.com/getsentry/sentry-javascript/releases/tag/7.88.0

static/app/bootstrap/initializeSdk.tsx

@@ -50,6 +50,9 @@ function getSentryIntegrations(routes?: Function) {
       // 6 is arbitrary, seems like a nice number
       depth: 6,
     }),
+
+    new Sentry.metrics.MetricsAggregator(),
+
     new BrowserTracing({
       ...(typeof routes === 'function'
         ? {

static/app/components/replays/replayProcessingError.tsx

@@ -18,7 +18,15 @@ export default function ReplayProcessingError({className, processingErrors}: Pro
       scope.setLevel('warning');
       scope.setFingerprint(['replay-processing-error']);
       processingErrors.forEach(error => {
-        Sentry.captureException(error);
+        Sentry.metrics.increment(`replay.processing-error`, 1, {
+          tags: {
+            // There are only 2 different error types
+            type:
+              error.toLowerCase() === 'missing meta frame'
+                ? 'missing-meta-frame'
+                : 'insufficient-replay-frames',
+          },
+        });
       });
     });
   }, [processingErrors]);

tests/js/setup.ts

@@ -123,6 +123,13 @@ jest.mock('@sentry/react', function sentryReact() {
     Scope: SentryReact.Scope,
     Severity: SentryReact.Severity,
     withProfiler: SentryReact.withProfiler,
+    metrics: {
+      MetricsAggregator: jest.fn().mockReturnValue({}),
+      increment: jest.fn(),
+      gauge: jest.fn(),
+      set: jest.fn(),
+      distribution: jest.fn(),
+    },
     BrowserTracing: jest.fn().mockReturnValue({}),
     BrowserProfilingIntegration: jest.fn().mockReturnValue({}),
     addGlobalEventProcessor: jest.fn(),