ref(browser): Avoid optional chaining (#14457)

We apparently disabled the no-optional-chaining rule in browser-utils,
which lead to us including this polyfill. Properly enforcing this rule
should (hopefully?) reduce bundle size a bit.

Author: mydea

packages/browser-utils/.eslintrc.js

@@ -6,9 +6,7 @@ module.exports = {
   overrides: [
     {
       files: ['src/**'],
-      rules: {
-        '@sentry-internal/sdk/no-optional-chaining': 'off',
-      },
+      rules: {},
     },
     {
       files: ['src/metrics/**'],

packages/browser-utils/src/metrics/cls.ts

@@ -67,7 +67,11 @@ export function trackClsAsStandaloneSpan(): void {
   setTimeout(() => {
     const client = getClient();
 
-    const unsubscribeStartNavigation = client?.on('startNavigationSpan', () => {
+    if (!client) {
+      return;
+    }
+
+    const unsubscribeStartNavigation = client.on('startNavigationSpan', () => {
       _collectClsOnce();
       unsubscribeStartNavigation && unsubscribeStartNavigation();
     });
@@ -84,15 +88,15 @@ export function trackClsAsStandaloneSpan(): void {
 function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined, pageloadSpanId: string) {
   DEBUG_BUILD && logger.log(`Sending CLS span (${clsValue})`);
 
-  const startTime = msToSec((browserPerformanceTimeOrigin || 0) + (entry?.startTime || 0));
+  const startTime = msToSec((browserPerformanceTimeOrigin || 0) + ((entry && entry.startTime) || 0));
   const routeName = getCurrentScope().getScopeData().transactionName;
 
-  const name = entry ? htmlTreeAsString(entry.sources[0]?.node) : 'Layout shift';
+  const name = entry ? htmlTreeAsString(entry.sources[0] && entry.sources[0].node) : 'Layout shift';
 
   const attributes: SpanAttributes = dropUndefinedKeys({
     [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.http.browser.cls',
     [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.webvital.cls',
-    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: entry?.duration || 0,
+    [SEMANTIC_ATTRIBUTE_EXCLUSIVE_TIME]: (entry && entry.duration) || 0,
     // attach the pageload span id to the CLS span so that we can link them in the UI
     'sentry.pageload.span_id': pageloadSpanId,
   });
@@ -104,19 +108,21 @@ function sendStandaloneClsSpan(clsValue: number, entry: LayoutShift | undefined,
     startTime,
   });
 
-  span?.addEvent('cls', {
-    [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: '',
-    [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: clsValue,
-  });
+  if (span) {
+    span.addEvent('cls', {
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: '',
+      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: clsValue,
+    });
 
-  // LayoutShift performance entries always have a duration of 0, so we don't need to add `entry.duration` here
-  // see: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration
-  span?.end(startTime);
+    // LayoutShift performance entries always have a duration of 0, so we don't need to add `entry.duration` here
+    // see: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration
+    span.end(startTime);
+  }
 }
 
 function supportsLayoutShift(): boolean {
   try {
-    return PerformanceObserver.supportedEntryTypes?.includes('layout-shift');
+    return PerformanceObserver.supportedEntryTypes.includes('layout-shift');
   } catch {
     return false;
   }

packages/browser-utils/src/metrics/inp.ts

@@ -112,12 +112,14 @@ function _trackINP(): () => void {
       startTime,
     });
 
-    span?.addEvent('inp', {
-      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: 'millisecond',
-      [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: metric.value,
-    });
+    if (span) {
+      span.addEvent('inp', {
+        [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_UNIT]: 'millisecond',
+        [SEMANTIC_ATTRIBUTE_SENTRY_MEASUREMENT_VALUE]: metric.value,
+      });
 
-    span?.end(startTime + duration);
+      span.end(startTime + duration);
+    }
   });
 }
 

packages/browser-utils/src/metrics/web-vitals/getINP.ts

@@ -66,7 +66,6 @@ const processEntry = (entry: PerformanceEventTiming) => {
   // The least-long of the 10 longest interactions.
   const minLongestInteraction = longestInteractionList[longestInteractionList.length - 1];
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const existingInteraction = longestInteractionMap[entry.interactionId!];
 
   // Only process the entry if it's possibly one of the ten longest,
@@ -82,7 +81,6 @@ const processEntry = (entry: PerformanceEventTiming) => {
       existingInteraction.latency = Math.max(existingInteraction.latency, entry.duration);
     } else {
       const interaction = {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         id: entry.interactionId!,
         latency: entry.duration,
         entries: [entry],

packages/browser-utils/test/utils/TestClient.ts

@@ -20,10 +20,8 @@ export class TestClient extends BaseClient<TestClientOptions> {
       exception: {
         values: [
           {
-            /* eslint-disable @typescript-eslint/no-unsafe-member-access */
             type: exception.name,
             value: exception.message,
-            /* eslint-enable @typescript-eslint/no-unsafe-member-access */
           },
         ],
       },