ref(replay-internal): Use debug instead of logger (#16987)

resolves #16937

Also reaches into `packages/browser-utils/src/networkUtils.ts` to make a
quick change.

Please review `packages/replay-internal/src/util/logger.ts` carefully.

Author: AbhiPrasad

dev-packages/browser-integration-tests/suites/replay/logger/test.ts

@@ -21,7 +21,7 @@ sentryTest('should output logger messages', async ({ getLocalTestUrl, page }) =>
   await Promise.all([page.goto(url), reqPromise0]);
 
   expect(messages).toContain('Sentry Logger [log]: Integration installed: Replay');
-  expect(messages).toContain('Sentry Logger [info]: [Replay]  Creating new session');
-  expect(messages).toContain('Sentry Logger [info]: [Replay]  Starting replay in session mode');
-  expect(messages).toContain('Sentry Logger [info]: [Replay]  Using compression worker');
+  expect(messages).toContain('Sentry Logger [log]: [Replay]  Creating new session');
+  expect(messages).toContain('Sentry Logger [log]: [Replay]  Starting replay in session mode');
+  expect(messages).toContain('Sentry Logger [log]: [Replay]  Using compression worker');
 });

packages/browser-utils/src/networkUtils.ts

@@ -1,5 +1,4 @@
-import type { Logger } from '@sentry/core';
-import { logger } from '@sentry/core';
+import { debug } from '@sentry/core';
 import { DEBUG_BUILD } from './debug-build';
 import type { NetworkMetaWarning } from './types';
 
@@ -16,7 +15,7 @@ export function serializeFormData(formData: FormData): string {
 }
 
 /** Get the string representation of a body. */
-export function getBodyString(body: unknown, _logger: Logger = logger): [string | undefined, NetworkMetaWarning?] {
+export function getBodyString(body: unknown, _debug: typeof debug = debug): [string | undefined, NetworkMetaWarning?] {
   try {
     if (typeof body === 'string') {
       return [body];
@@ -34,11 +33,11 @@ export function getBodyString(body: unknown, _logger: Logger = logger): [string
       return [undefined];
     }
   } catch (error) {
-    DEBUG_BUILD && _logger.error(error, 'Failed to serialize body', body);
+    DEBUG_BUILD && _debug.error(error, 'Failed to serialize body', body);
     return [undefined, 'BODY_PARSE_ERROR'];
   }
 
-  DEBUG_BUILD && _logger.info('Skipping network body because of body type', body);
+  DEBUG_BUILD && _debug.log('Skipping network body because of body type', body);
 
   return [undefined, 'UNPARSEABLE_BODY_TYPE'];
 }

packages/replay-internal/src/coreHandlers/handleGlobalEvent.ts

@@ -3,7 +3,7 @@ import { DEBUG_BUILD } from '../debug-build';
 import type { ReplayContainer } from '../types';
 import { isErrorEvent, isFeedbackEvent, isReplayEvent, isTransactionEvent } from '../util/eventUtils';
 import { isRrwebError } from '../util/isRrwebError';
-import { logger } from '../util/logger';
+import { debug } from '../util/logger';
 import { resetReplayIdOnDynamicSamplingContext } from '../util/resetReplayIdOnDynamicSamplingContext';
 import { addFeedbackBreadcrumb } from './util/addFeedbackBreadcrumb';
 import { shouldSampleForBufferEvent } from './util/shouldSampleForBufferEvent';
@@ -52,7 +52,7 @@ 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, hint) && !replay.getOptions()._experiments.captureExceptions) {
-        DEBUG_BUILD && logger.log('Ignoring error from rrweb internals', event);
+        DEBUG_BUILD && debug.log('Ignoring error from rrweb internals', event);
         return null;
       }
 

packages/replay-internal/src/coreHandlers/handleNetworkBreadcrumbs.ts

@@ -3,7 +3,7 @@ import { getClient } from '@sentry/core';
 import type { FetchHint, XhrHint } from '@sentry-internal/browser-utils';
 import { DEBUG_BUILD } from '../debug-build';
 import type { ReplayContainer, ReplayNetworkOptions } from '../types';
-import { logger } from '../util/logger';
+import { debug } from '../util/logger';
 import { captureFetchBreadcrumbToReplay, enrichFetchBreadcrumb } from './util/fetchUtils';
 import { captureXhrBreadcrumbToReplay, enrichXhrBreadcrumb } from './util/xhrUtils';
 
@@ -79,7 +79,7 @@ export function beforeAddNetworkBreadcrumb(
       captureFetchBreadcrumbToReplay(breadcrumb, hint, options);
     }
   } catch (e) {
-    DEBUG_BUILD && logger.exception(e, 'Error when enriching network breadcrumb');
+    DEBUG_BUILD && debug.exception(e, 'Error when enriching network breadcrumb');
   }
 }
 

packages/replay-internal/src/coreHandlers/util/fetchUtils.ts

@@ -8,7 +8,7 @@ import type {
   ReplayNetworkRequestData,
   ReplayNetworkRequestOrResponse,
 } from '../../types';
-import { logger } from '../../util/logger';
+import { debug } from '../../util/logger';
 import { addNetworkBreadcrumb } from './addNetworkBreadcrumb';
 import {
   buildNetworkRequestOrResponse,
@@ -39,7 +39,7 @@ export async function captureFetchBreadcrumbToReplay(
     const result = makeNetworkReplayBreadcrumb('resource.fetch', data);
     addNetworkBreadcrumb(options.replay, result);
   } catch (error) {
-    DEBUG_BUILD && logger.exception(error, 'Failed to capture fetch breadcrumb');
+    DEBUG_BUILD && debug.exception(error, 'Failed to capture fetch breadcrumb');
   }
 }
 
@@ -115,7 +115,7 @@ function _getRequestInfo(
 
   // We only want to transmit string or string-like bodies
   const requestBody = getFetchRequestArgBody(input);
-  const [bodyStr, warning] = getBodyString(requestBody, logger);
+  const [bodyStr, warning] = getBodyString(requestBody, debug);
   const data = buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr);
 
   if (warning) {
@@ -188,7 +188,7 @@ function getResponseData(
 
     return buildNetworkRequestOrResponse(headers, size, undefined);
   } catch (error) {
-    DEBUG_BUILD && logger.exception(error, 'Failed to serialize response body');
+    DEBUG_BUILD && debug.exception(error, 'Failed to serialize response body');
     // fallback
     return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
@@ -206,11 +206,11 @@ async function _parseFetchResponseBody(response: Response): Promise<[string | un
     return [text];
   } catch (error) {
     if (error instanceof Error && error.message.indexOf('Timeout') > -1) {
-      DEBUG_BUILD && logger.warn('Parsing text body from response timed out');
+      DEBUG_BUILD && debug.warn('Parsing text body from response timed out');
       return [undefined, 'BODY_PARSE_TIMEOUT'];
     }
 
-    DEBUG_BUILD && logger.exception(error, 'Failed to get text body from response');
+    DEBUG_BUILD && debug.exception(error, 'Failed to get text body from response');
     return [undefined, 'BODY_PARSE_ERROR'];
   }
 }
@@ -271,7 +271,7 @@ function _tryCloneResponse(response: Response): Response | void {
     return response.clone();
   } catch (error) {
     // this can throw if the response was already consumed before
-    DEBUG_BUILD && logger.exception(error, 'Failed to clone response body');
+    DEBUG_BUILD && debug.exception(error, 'Failed to clone response body');
   }
 }
 

packages/replay-internal/src/coreHandlers/util/xhrUtils.ts

@@ -3,7 +3,7 @@ import type { NetworkMetaWarning, XhrHint } from '@sentry-internal/browser-utils
 import { getBodyString, SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils';
 import { DEBUG_BUILD } from '../../debug-build';
 import type { ReplayContainer, ReplayNetworkOptions, ReplayNetworkRequestData } from '../../types';
-import { logger } from '../../util/logger';
+import { debug } from '../../util/logger';
 import { addNetworkBreadcrumb } from './addNetworkBreadcrumb';
 import {
   buildNetworkRequestOrResponse,
@@ -32,7 +32,7 @@ export async function captureXhrBreadcrumbToReplay(
     const result = makeNetworkReplayBreadcrumb('resource.xhr', data);
     addNetworkBreadcrumb(options.replay, result);
   } catch (error) {
-    DEBUG_BUILD && logger.exception(error, 'Failed to capture xhr breadcrumb');
+    DEBUG_BUILD && debug.exception(error, 'Failed to capture xhr breadcrumb');
   }
 }
 
@@ -106,7 +106,7 @@ function _prepareXhrData(
     : {};
   const networkResponseHeaders = getAllowedHeaders(getResponseHeaders(xhr), options.networkResponseHeaders);
 
-  const [requestBody, requestWarning] = options.networkCaptureBodies ? getBodyString(input, logger) : [undefined];
+  const [requestBody, requestWarning] = options.networkCaptureBodies ? getBodyString(input, debug) : [undefined];
   const [responseBody, responseWarning] = options.networkCaptureBodies ? _getXhrResponseBody(xhr) : [undefined];
 
   const request = buildNetworkRequestOrResponse(networkRequestHeaders, requestBodySize, requestBody);
@@ -156,7 +156,7 @@ function _getXhrResponseBody(xhr: XMLHttpRequest): [string | undefined, NetworkM
     errors.push(e);
   }
 
-  DEBUG_BUILD && logger.warn('Failed to get xhr response body', ...errors);
+  DEBUG_BUILD && debug.warn('Failed to get xhr response body', ...errors);
 
   return [undefined];
 }
@@ -193,11 +193,11 @@ export function _parseXhrResponse(
       return [undefined];
     }
   } catch (error) {
-    DEBUG_BUILD && logger.exception(error, 'Failed to serialize body', body);
+    DEBUG_BUILD && debug.exception(error, 'Failed to serialize body', body);
     return [undefined, 'BODY_PARSE_ERROR'];
   }
 
-  DEBUG_BUILD && logger.info('Skipping network body because of body type', body);
+  DEBUG_BUILD && debug.log('Skipping network body because of body type', body);
 
   return [undefined, 'UNPARSEABLE_BODY_TYPE'];
 }

packages/replay-internal/src/eventBuffer/EventBufferCompressionWorker.ts

@@ -2,7 +2,7 @@ import type { ReplayRecordingData } from '@sentry/core';
 import { REPLAY_MAX_EVENT_BUFFER_SIZE } from '../constants';
 import { DEBUG_BUILD } from '../debug-build';
 import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
-import { logger } from '../util/logger';
+import { debug } from '../util/logger';
 import { timestampToMs } from '../util/timestamp';
 import { EventBufferSizeExceededError } from './error';
 import { WorkerHandler } from './WorkerHandler';
@@ -91,7 +91,7 @@ export class EventBufferCompressionWorker implements EventBuffer {
 
     // We do not wait on this, as we assume the order of messages is consistent for the worker
     this._worker.postMessage('clear').then(null, e => {
-      DEBUG_BUILD && logger.exception(e, 'Sending "clear" message to worker failed', e);
+      DEBUG_BUILD && debug.exception(e, 'Sending "clear" message to worker failed', e);
     });
   }
 

packages/replay-internal/src/eventBuffer/EventBufferProxy.ts

@@ -1,7 +1,7 @@
 import type { ReplayRecordingData } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 import type { AddEventResult, EventBuffer, EventBufferType, RecordingEvent } from '../types';
-import { logger } from '../util/logger';
+import { debug } from '../util/logger';
 import { EventBufferArray } from './EventBufferArray';
 import { EventBufferCompressionWorker } from './EventBufferCompressionWorker';
 
@@ -99,7 +99,7 @@ export class EventBufferProxy implements EventBuffer {
     } catch (error) {
       // If the worker fails to load, we fall back to the simple buffer.
       // Nothing more to do from our side here
-      DEBUG_BUILD && logger.exception(error, 'Failed to load the compression worker, falling back to simple buffer');
+      DEBUG_BUILD && debug.exception(error, 'Failed to load the compression worker, falling back to simple buffer');
       return;
     }
 
@@ -130,7 +130,7 @@ export class EventBufferProxy implements EventBuffer {
       // Can now clear fallback buffer as it's no longer necessary
       this._fallback.clear();
     } catch (error) {
-      DEBUG_BUILD && logger.exception(error, 'Failed to add events when switching buffers.');
+      DEBUG_BUILD && debug.exception(error, 'Failed to add events when switching buffers.');
     }
   }
 }

packages/replay-internal/src/eventBuffer/WorkerHandler.ts

@@ -1,6 +1,6 @@
 import { DEBUG_BUILD } from '../debug-build';
 import type { WorkerRequest, WorkerResponse } from '../types';
-import { logger } from '../util/logger';
+import { debug } from '../util/logger';
 
 /**
  * Event buffer that uses a web worker to compress events.
@@ -55,7 +55,7 @@ export class WorkerHandler {
    * Destroy the worker.
    */
   public destroy(): void {
-    DEBUG_BUILD && logger.info('Destroying compression worker');
+    DEBUG_BUILD && debug.log('Destroying compression worker');
     this._worker.terminate();
   }
 
@@ -83,7 +83,7 @@ export class WorkerHandler {
 
         if (!response.success) {
           // TODO: Do some error handling, not sure what
-          DEBUG_BUILD && logger.error('Error in compression worker: ', response.response);
+          DEBUG_BUILD && debug.error('Error in compression worker: ', response.response);
 
           reject(new Error('Error in compression worker'));
           return;

packages/replay-internal/src/eventBuffer/index.ts

@@ -1,7 +1,7 @@
 import { getWorkerURL } from '@sentry-internal/replay-worker';
 import { DEBUG_BUILD } from '../debug-build';
 import type { EventBuffer, ReplayWorkerURL } from '../types';
-import { logger } from '../util/logger';
+import { debug } from '../util/logger';
 import { EventBufferArray } from './EventBufferArray';
 import { EventBufferProxy } from './EventBufferProxy';
 
@@ -32,7 +32,7 @@ export function createEventBuffer({
     }
   }
 
-  DEBUG_BUILD && logger.info('Using simple buffer');
+  DEBUG_BUILD && debug.log('Using simple buffer');
   return new EventBufferArray();
 }
 
@@ -44,11 +44,11 @@ function _loadWorker(customWorkerUrl?: ReplayWorkerURL): EventBufferProxy | void
       return;
     }
 
-    DEBUG_BUILD && logger.info(`Using compression worker${customWorkerUrl ? ` from ${customWorkerUrl}` : ''}`);
+    DEBUG_BUILD && debug.log(`Using compression worker${customWorkerUrl ? ` from ${customWorkerUrl}` : ''}`);
     const worker = new Worker(workerUrl);
     return new EventBufferProxy(worker);
   } catch (error) {
-    DEBUG_BUILD && logger.exception(error, 'Failed to create compression worker');
+    DEBUG_BUILD && debug.exception(error, 'Failed to create compression worker');
     // Fall back to use simple event buffer array
   }
 }