ref(replay): Avoid optional chaining

As this is transpiled to a rather verbose form.

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/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) {
+    const exc = getEventExceptionValues(event);
+    if (__DEBUG_BUILD__ && replay.getOptions()._experiments.traceInternals) {
       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]),
+  };
+}

packages/replay/src/coreHandlers/handleXhr.ts

@@ -50,11 +50,15 @@ function handleXhr(handlerData: XhrHandlerData): ReplayPerformanceEntry | null {
     return null;
   }
 
+  const timestamp = handlerData.xhr.__sentry_xhr__
+    ? handlerData.xhr.__sentry_xhr__.startTimestamp || 0
+    : handlerData.endTimestamp;
+
   return {
     type: 'resource.xhr',
     name: url,
-    start: (handlerData.xhr.__sentry_xhr__?.startTimestamp || 0) / 1000 || handlerData.endTimestamp / 1000.0,
-    end: handlerData.endTimestamp / 1000.0,
+    start: timestamp / 1000,
+    end: handlerData.endTimestamp / 1000,
     data: {
       method,
       statusCode,

packages/replay/src/eventBuffer.ts

@@ -95,7 +95,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
    */
   public _pendingEvents: RecordingEvent[] = [];
 
-  private _worker: null | Worker;
+  private _worker: Worker;
   private _eventBufferItemLength: number = 0;
   private _id: number = 0;
 
@@ -124,8 +124,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
    */
   public destroy(): void {
     __DEBUG_BUILD__ && logger.log('[Replay] Destroying compression worker');
-    this._worker?.terminate();
-    this._worker = null;
+    this._worker.terminate();
   }
 
   /**
@@ -177,7 +176,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
         }
 
         // At this point, we'll always want to remove listener regardless of result status
-        this._worker?.removeEventListener('message', listener);
+        this._worker.removeEventListener('message', listener);
 
         if (!data.success) {
           // TODO: Do some error handling, not sure what
@@ -200,8 +199,8 @@ export class EventBufferCompressionWorker implements EventBuffer {
 
       // Note: we can't use `once` option because it's possible it needs to
       // listen to multiple messages
-      this._worker?.addEventListener('message', listener);
-      this._worker?.postMessage({ id, method, args: stringifiedArgs });
+      this._worker.addEventListener('message', listener);
+      this._worker.postMessage({ id, method, args: stringifiedArgs });
     });
   }
 

packages/replay/src/replay.ts

@@ -231,8 +231,8 @@ export class ReplayContainer implements ReplayContainerInterface {
       __DEBUG_BUILD__ && logger.log('[Replay] Stopping Replays');
       this._isEnabled = false;
       this._removeListeners();
-      this._stopRecording?.();
-      this.eventBuffer?.destroy();
+      this._stopRecording && this._stopRecording();
+      this.eventBuffer && this.eventBuffer.destroy();
       this.eventBuffer = null;
     } catch (err) {
       this._handleException(err);
@@ -277,7 +277,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   public addUpdate(cb: AddUpdateCallback): void {
     // We need to always run `cb` (e.g. in the case of `this.recordingMode == 'error'`)
-    const cbResult = cb?.();
+    const cbResult = cb();
 
     // If this option is turned on then we will only want to call `flush`
     // explicitly
@@ -334,6 +334,11 @@ export class ReplayContainer implements ReplayContainerInterface {
     return this._debouncedFlush.flush() as Promise<void>;
   }
 
+  /** Get the current sesion (=replay) ID */
+  public getSessionId(): string | undefined {
+    return this.session && this.session.id;
+  }
+
   /** A wrapper to conditionally capture exceptions. */
   private _handleException(error: unknown): void {
     __DEBUG_BUILD__ && logger.error('[Replay]', error);
@@ -362,8 +367,9 @@ export class ReplayContainer implements ReplayContainerInterface {
       this._setInitialState();
     }
 
-    if (session.id !== this.session?.id) {
-      session.previousSessionId = this.session?.id;
+    const currentSessionId = this.getSessionId();
+    if (session.id !== currentSessionId) {
+      session.previousSessionId = currentSessionId;
     }
 
     this.session = session;
@@ -404,7 +410,9 @@ export class ReplayContainer implements ReplayContainerInterface {
       if (!this._hasInitializedCoreListeners) {
         // Listeners from core SDK //
         const scope = getCurrentHub().getScope();
-        scope?.addScopeListener(this._handleCoreBreadcrumbListener('scope'));
+        if (scope) {
+          scope.addScopeListener(this._handleCoreBreadcrumbListener('scope'));
+        }
         addInstrumentationHandler('dom', this._handleCoreBreadcrumbListener('dom'));
         addInstrumentationHandler('fetch', handleFetchSpanListener(this));
         addInstrumentationHandler('xhr', handleXhrSpanListener(this));
@@ -491,7 +499,7 @@ export class ReplayContainer implements ReplayContainerInterface {
       // of the previous session. Do not immediately flush in this case
       // to avoid capturing only the checkout and instead the replay will
       // be captured if they perform any follow-up actions.
-      if (this.session?.previousSessionId) {
+      if (this.session && this.session.previousSessionId) {
         return true;
       }
 
@@ -706,7 +714,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Returns true if session is not expired, false otherwise.
    */
   private _checkAndHandleExpiredSession({ expiry = SESSION_IDLE_DURATION }: { expiry?: number } = {}): boolean | void {
-    const oldSessionId = this.session?.id;
+    const oldSessionId = this.getSessionId();
 
     // Prevent starting a new session if the last user activity is older than
     // MAX_SESSION_LIFE. Otherwise non-user activity can trigger a new
@@ -723,7 +731,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     this._loadSession({ expiry });
 
     // Session was expired if session ids do not match
-    const expired = oldSessionId !== this.session?.id;
+    const expired = oldSessionId !== this.getSessionId();
 
     if (!expired) {
       return true;
@@ -787,14 +795,14 @@ export class ReplayContainer implements ReplayContainerInterface {
    * Should never be called directly, only by `flush`
    */
   private async _runFlush(): Promise<void> {
-    if (!this.session) {
-      __DEBUG_BUILD__ && logger.error('[Replay] No session found to flush.');
+    if (!this.session || !this.eventBuffer) {
+      __DEBUG_BUILD__ && logger.error('[Replay] No session or eventBuffer found to flush.');
       return;
     }
 
     await this._addPerformanceEntries();
 
-    if (!this.eventBuffer?.pendingLength) {
+    if (!this.eventBuffer.pendingLength) {
       return;
     }
 
@@ -847,13 +855,13 @@ export class ReplayContainer implements ReplayContainerInterface {
       return;
     }
 
-    if (!this.session?.id) {
+    if (!this.session) {
       __DEBUG_BUILD__ && logger.error('[Replay] No session found to flush.');
       return;
     }
 
     // A flush is about to happen, cancel any queued flushes
-    this._debouncedFlush?.cancel();
+    this._debouncedFlush.cancel();
 
     // this._flushLock acts as a lock so that future calls to `_flush()`
     // will be blocked until this promise resolves

packages/replay/src/types.ts

@@ -118,7 +118,7 @@ export interface ReplayPluginOptions extends SessionOptions {
    *
    * Default: undefined
    */
-  _experiments?: Partial<{
+  _experiments: Partial<{
     captureExceptions: boolean;
     traceInternals: boolean;
   }>;
@@ -259,6 +259,7 @@ export interface ReplayContainer {
   triggerUserActivity(): void;
   addUpdate(cb: AddUpdateCallback): void;
   getOptions(): ReplayPluginOptions;
+  getSessionId(): string | undefined;
 }
 
 export interface ReplayPerformanceEntry {

packages/replay/src/util/addEvent.ts

@@ -35,7 +35,7 @@ export async function addEvent(
   // Only record earliest event if a new session was created, otherwise it
   // shouldn't be relevant
   const earliestEvent = replay.getContext().earliestEvent;
-  if (replay.session?.segmentId === 0 && (!earliestEvent || timestampInMs < earliestEvent)) {
+  if (replay.session && replay.session.segmentId === 0 && (!earliestEvent || timestampInMs < earliestEvent)) {
     replay.getContext().earliestEvent = timestampInMs;
   }
 

packages/replay/src/util/isRrwebError.ts

@@ -4,16 +4,16 @@ import type { Event } from '@sentry/types';
  * Returns true if we think the given event is an error originating inside of rrweb.
  */
 export function isRrwebError(event: Event): boolean {
-  if (event.type || !event.exception?.values?.length) {
+  if (event.type || !event.exception || !event.exception.values || !event.exception.values.length) {
     return false;
   }
 
   // Check if any exception originates from rrweb
   return event.exception.values.some(exception => {
-    if (!exception.stacktrace?.frames?.length) {
+    if (!exception.stacktrace || !exception.stacktrace.frames || !exception.stacktrace.frames.length) {
       return false;
     }
 
-    return exception.stacktrace.frames.some(frame => frame.filename?.includes('/rrweb/src/'));
+    return exception.stacktrace.frames.some(frame => frame.filename && frame.filename.includes('/rrweb/src/'));
   });
 }

packages/replay/src/util/isSessionExpired.ts

@@ -11,6 +11,6 @@ export function isSessionExpired(session: Session, idleTimeout: number, targetTi
     isExpired(session.started, MAX_SESSION_LIFE, targetTime) ||
     // check that the idle timeout has not been exceeded (i.e. user has
     // performed an action within the last `idleTimeout` ms)
-    isExpired(session?.lastActivity, idleTimeout, targetTime)
+    isExpired(session.lastActivity, idleTimeout, targetTime)
   );
 }

packages/replay/src/util/sendReplayRequest.ts

@@ -35,7 +35,7 @@ export async function sendReplayRequest({
   const client = hub.getClient();
   const scope = hub.getScope();
   const transport = client && client.getTransport();
-  const dsn = client?.getDsn();
+  const dsn = client && client.getDsn();
 
   if (!client || !scope || !transport || !dsn || !session.sampled) {
     return;

packages/replay/src/util/shouldFilterRequest.ts

@@ -7,7 +7,7 @@ import type { ReplayContainer } from '../types';
  */
 export function shouldFilterRequest(replay: ReplayContainer, url: string): boolean {
   // If we enabled the `traceInternals` experiment, we want to trace everything
-  if (__DEBUG_BUILD__ && replay.getOptions()._experiments?.traceInternals) {
+  if (__DEBUG_BUILD__ && replay.getOptions()._experiments.traceInternals) {
     return false;
   }
 
@@ -18,6 +18,7 @@ export function shouldFilterRequest(replay: ReplayContainer, url: string): boole
  * Checks wether a given URL belongs to the configured Sentry DSN.
  */
 function _isSentryRequest(url: string): boolean {
-  const dsn = getCurrentHub().getClient()?.getDsn();
+  const client = getCurrentHub().getClient();
+  const dsn = client && client.getDsn();
   return dsn ? url.includes(dsn.host) : false;
 }