ref: Avoid optional chaining & add eslint rule (#6777)

As this is transpiled to a rather verbose form.

Co-authored-by: Lukas Stracke <[email protected]>

Author: mydea

packages/browser/src/client.ts

@@ -96,7 +96,9 @@ export class BrowserClient extends BaseClient<BrowserClientOptions> {
     const breadcrumbIntegration = this.getIntegrationById(BREADCRUMB_INTEGRATION_ID) as Breadcrumbs | undefined;
     // We check for definedness of `addSentryBreadcrumb` in case users provided their own integration with id
     // "Breadcrumbs" that does not have this function.
-    breadcrumbIntegration?.addSentryBreadcrumb?.(event);
+    if (breadcrumbIntegration && breadcrumbIntegration.addSentryBreadcrumb) {
+      breadcrumbIntegration.addSentryBreadcrumb(event);
+    }
 
     super.sendEvent(event, hint);
   }

packages/eslint-config-sdk/src/index.js

@@ -143,8 +143,9 @@ module.exports = {
           },
         ],
 
-        // We want to prevent async await usage in our files to prevent uncessary bundle size. Turned off in tests.
+        // We want to prevent async await & optional chaining usage in our files to prevent uncessary bundle size. Turned off in tests.
         '@sentry-internal/sdk/no-async-await': 'error',
+        '@sentry-internal/sdk/no-optional-chaining': 'error',
 
         // JSDOC comments are required for classes and methods. As we have a public facing codebase, documentation,
         // even if it may seems excessive at times, is important to emphasize. Turned off in tests.
@@ -178,6 +179,7 @@ module.exports = {
         '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/no-empty-function': 'off',
         '@sentry-internal/sdk/no-async-await': 'off',
+        '@sentry-internal/sdk/no-optional-chaining': 'off',
       },
     },
     {

packages/eslint-plugin-sdk/src/index.js

@@ -11,6 +11,7 @@
 module.exports = {
   rules: {
     'no-async-await': require('./rules/no-async-await'),
+    'no-optional-chaining': require('./rules/no-optional-chaining'),
     'no-eq-empty': require('./rules/no-eq-empty'),
   },
 };

packages/eslint-plugin-sdk/src/rules/no-optional-chaining.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Rule to disallow using optional chaining - because this is transpiled into verbose code.
+ * @author Francesco Novy
+ *
+ * Based on https://github.com/facebook/lexical/pull/3233
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow usage of optional chaining',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    messages: {
+      forbidden: 'Avoid using optional chaining',
+    },
+    fixable: null,
+    schema: [],
+  },
+
+  create(context) {
+    const sourceCode = context.getSourceCode();
+
+    /**
+     * Checks if the given token is a `?.` token or not.
+     * @param {Token} token The token to check.
+     * @returns {boolean} `true` if the token is a `?.` token.
+     */
+    function isQuestionDotToken(token) {
+      return (
+        token.value === '?.' &&
+        (token.type === 'Punctuator' || // espree has been parsed well.
+          // [email protected] doesn't parse "?." tokens well. Therefore, get the string from the source code and check it.
+          sourceCode.getText(token) === '?.')
+      );
+    }
+
+    return {
+      'CallExpression[optional=true]'(node) {
+        context.report({
+          messageId: 'forbidden',
+          node: sourceCode.getTokenAfter(node.callee, isQuestionDotToken),
+        });
+      },
+      'MemberExpression[optional=true]'(node) {
+        context.report({
+          messageId: 'forbidden',
+          node: sourceCode.getTokenAfter(node.object, isQuestionDotToken),
+        });
+      },
+    };
+  },
+};

packages/nextjs/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {
     '@sentry-internal/sdk/no-async-await': 'off',
+    '@sentry-internal/sdk/no-optional-chaining': 'off',
   },
   overrides: [
     {

packages/node/.eslintrc.js

@@ -5,5 +5,6 @@ module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {
     '@sentry-internal/sdk/no-async-await': 'off',
+    '@sentry-internal/sdk/no-optional-chaining': 'off',
   },
 };

packages/opentelemetry-node/.eslintrc.js

@@ -5,5 +5,6 @@ module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {
     '@sentry-internal/sdk/no-async-await': 'off',
+    '@sentry-internal/sdk/no-optional-chaining': 'off',
   },
 };

packages/react/src/reactrouterv6.tsx

@@ -226,7 +226,7 @@ export function wrapUseRoutes(origUseRoutes: UseRoutes): UseRoutes {
 
       // A value with stable identity to either pick `locationArg` if available or `location` if not
       const stableLocationParam =
-        typeof locationArg === 'string' || locationArg?.pathname !== undefined
+        typeof locationArg === 'string' || (locationArg && locationArg.pathname)
           ? (locationArg as { pathname: string })
           : location;
 

packages/remix/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {
     '@sentry-internal/sdk/no-async-await': 'off',
+    '@sentry-internal/sdk/no-optional-chaining': 'off',
   },
   overrides: [
     {

packages/replay/src/coreHandlers/handleGlobalEvent.ts

@@ -21,15 +21,15 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
 
     // Unless `captureExceptions` is enabled, we want to ignore errors coming from rrweb
     // As there can be a bunch of stuff going wrong in internals there, that we don't want to bubble up to users
-    if (isRrwebError(event) && !replay.getOptions()._experiments?.captureExceptions) {
+    if (isRrwebError(event) && !replay.getOptions()._experiments.captureExceptions) {
       __DEBUG_BUILD__ && logger.log('[Replay] Ignoring error from rrweb internals', event);
       return null;
     }
 
     // Only tag transactions with replayId if not waiting for an error
     // @ts-ignore private
     if (!event.type || replay.recordingMode === 'session') {
-      event.tags = { ...event.tags, replayId: replay.session?.id };
+      event.tags = { ...event.tags, replayId: replay.getSessionId() };
     }
 
     // Collect traceIds in _context regardless of `recordingMode` - if it's true,
@@ -44,12 +44,10 @@ export function handleGlobalEventListener(replay: ReplayContainer): (event: Even
       replay.getContext().errorIds.add(event.event_id as string);
     }
 
-    const exc = event.exception?.values?.[0];
-    if (__DEBUG_BUILD__ && replay.getOptions()._experiments?.traceInternals) {
+    if (__DEBUG_BUILD__ && replay.getOptions()._experiments.traceInternals) {
+      const exc = getEventExceptionValues(event);
       addInternalBreadcrumb({
-        message: `Tagging event (${event.event_id}) - ${event.message} - ${exc?.type || 'Unknown'}: ${
-          exc?.value || 'n/a'
-        }`,
+        message: `Tagging event (${event.event_id}) - ${event.message} - ${exc.type}: ${exc.value}`,
       });
     }
 
@@ -89,3 +87,11 @@ function addInternalBreadcrumb(arg: Parameters<typeof addBreadcrumb>[0]): void {
     ...rest,
   });
 }
+
+function getEventExceptionValues(event: Event): { type: string; value: string } {
+  return {
+    type: 'Unknown',
+    value: 'n/a',
+    ...(event.exception && event.exception.values && event.exception.values[0]),
+  };
+}