ref(replay): TS fixes for replay (#6286)

Author: mydea

packages/core/test/mocks/transport.ts

@@ -1,3 +1,4 @@
+import { Transport } from '@sentry/types';
 import { SyncPromise } from '@sentry/utils';
 import { TextEncoder } from 'util';
 
@@ -7,7 +8,12 @@ async function sleep(delay: number): Promise<void> {
   return new SyncPromise(resolve => setTimeout(resolve, delay));
 }
 
-export function makeFakeTransport(delay: number = 2000) {
+export function makeFakeTransport(delay: number = 2000): {
+  makeTransport: () => Transport;
+  getSendCalled: () => number;
+  getSentCount: () => number;
+  delay: number;
+} {
   let sendCalled = 0;
   let sentCount = 0;
   const makeTransport = () =>

packages/replay/jest.setup.ts

@@ -35,9 +35,9 @@ type SentReplayExpected = {
     };
   };
   replayEventHeader?: { type: 'replay_event' };
-  replayEventPayload?: Record<string, any>;
+  replayEventPayload?: Record<string, unknown>;
   recordingHeader?: { type: 'replay_recording'; length: number };
-  recordingPayloadHeader?: Record<string, any>;
+  recordingPayloadHeader?: Record<string, unknown>;
   events?: string | Uint8Array;
 };
 
@@ -101,9 +101,13 @@ const toHaveSentReplay = function (
   }
 
   const results = expected
-    ? Object.entries(actualObj)
-        .map(([key, val]: [keyof SentReplayExpected, any]) => {
-          return [!expectedObj?.[key] || this.equals(expectedObj[key], val), key, expectedObj?.[key], val];
+    ? Object.keys(expectedObj)
+        .map(key => {
+          const actualVal = actualObj[key as keyof SentReplayExpected];
+          const expectedVal = expectedObj[key as keyof SentReplayExpected];
+          const matches = !expectedVal || this.equals(actualVal, expectedVal);
+
+          return [matches, key, expectedVal, actualVal];
         })
         .filter(([passed]) => !passed)
     : [];

packages/replay/package.json

@@ -45,7 +45,7 @@
   "homepage": "https://github.com/getsentry/sentry-replay#readme",
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@sentry/browser": "7.21.0",
+    "@sentry/browser": "7.21.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.throttle": "^4.1.7",
     "@types/pako": "^2.0.0",
@@ -54,9 +54,9 @@
     "tslib": "^1.9.3"
   },
   "dependencies": {
-    "@sentry/core": "7.21.0",
-    "@sentry/types": "7.21.0",
-    "@sentry/utils": "7.21.0",
+    "@sentry/core": "7.21.1",
+    "@sentry/types": "7.21.1",
+    "@sentry/utils": "7.21.1",
     "lodash.debounce": "^4.0.8",
     "rrweb": "^1.1.3"
   },

packages/replay/src/coreHandlers/breadcrumbHandler.ts

@@ -0,0 +1,13 @@
+import { Breadcrumb, Scope } from '@sentry/types';
+
+import { InstrumentationTypeBreadcrumb } from '../types';
+import { DomHandlerData, handleDom } from './handleDom';
+import { handleScope } from './handleScope';
+
+export function breadcrumbHandler(type: InstrumentationTypeBreadcrumb, handlerData: unknown): Breadcrumb | null {
+  if (type === 'scope') {
+    return handleScope(handlerData as Scope);
+  }
+
+  return handleDom(handlerData as DomHandlerData);
+}

packages/replay/src/coreHandlers/getBreadcrumbHandler.ts

@@ -4,15 +4,19 @@ import { record } from 'rrweb';
 
 import { createBreadcrumb } from '../util/createBreadcrumb';
 
-export function handleDom(handlerData: any): Breadcrumb | null {
+export interface DomHandlerData {
+  name: string;
+  event: Node | { target: Node };
+}
+
+export function handleDom(handlerData: DomHandlerData): Breadcrumb | null {
   // Taken from https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/integrations/breadcrumbs.ts#L112
   let target;
   let targetNode;
 
   // Accessing event.target can throw (see getsentry/raven-js#838, #768)
   try {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    targetNode = (handlerData.event.target as Node) || (handlerData.event as unknown as Node);
+    targetNode = getTargetNode(handlerData);
     target = htmlTreeAsString(targetNode);
   } catch (e) {
     target = '<unknown>';
@@ -23,12 +27,24 @@ export function handleDom(handlerData: any): Breadcrumb | null {
   }
 
   return createBreadcrumb({
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     category: `ui.${handlerData.name}`,
     message: target,
     data: {
       // Not sure why this errors, Node should be correct (Argument of type 'Node' is not assignable to parameter of type 'INode')
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ...(targetNode ? { nodeId: record.mirror.getId(targetNode as any) } : {}),
     },
   });
 }
+
+function getTargetNode(handlerData: DomHandlerData): Node {
+  if (isEventWithTarget(handlerData.event)) {
+    return handlerData.event.target;
+  }
+
+  return handlerData.event;
+}
+
+function isEventWithTarget(event: unknown): event is { target: Node } {
+  return !!(event as { target?: Node }).target;
+}

packages/replay/src/coreHandlers/getSpanHandler.ts

@@ -1,7 +1,7 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
 import { isIngestHost } from '../util/isIngestHost';
 
-interface FetchHandlerData {
+export interface FetchHandlerData {
   args: Parameters<typeof fetch>;
   fetchData: {
     method: string;

packages/replay/src/coreHandlers/handleDom.ts

@@ -1,6 +1,6 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
 
-interface HistoryHandlerData {
+export interface HistoryHandlerData {
   from: string;
   to: string;
 }

packages/replay/src/coreHandlers/handleFetch.ts

@@ -19,7 +19,7 @@ interface SentryWrappedXMLHttpRequest extends XMLHttpRequest {
   __sentry_own_request__?: boolean;
 }
 
-interface XhrHandlerData {
+export interface XhrHandlerData {
   args: [string, string];
   xhr: SentryWrappedXMLHttpRequest;
   startTimestamp: number;

packages/replay/src/coreHandlers/handleHistory.ts

@@ -0,0 +1,17 @@
+import { ReplayPerformanceEntry } from '../createPerformanceEntry';
+import { InstrumentationTypeSpan } from '../types';
+import { FetchHandlerData, handleFetch } from './handleFetch';
+import { handleHistory, HistoryHandlerData } from './handleHistory';
+import { handleXhr, XhrHandlerData } from './handleXhr';
+
+export function spanHandler(type: InstrumentationTypeSpan, handlerData: unknown): null | ReplayPerformanceEntry {
+  if (type === 'fetch') {
+    return handleFetch(handlerData as FetchHandlerData);
+  }
+
+  if (type === 'xhr') {
+    return handleXhr(handlerData as XhrHandlerData);
+  }
+
+  return handleHistory(handlerData as HistoryHandlerData);
+}

packages/replay/src/coreHandlers/handleXhr.ts

@@ -143,14 +143,15 @@ function createLargestContentfulPaint(entry: PerformanceEntry & { size: number;
       duration,
       size,
       // Not sure why this errors, Node should be correct (Argument of type 'Node' is not assignable to parameter of type 'INode')
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       nodeId: record.mirror.getId(entry.element as any),
     },
   };
 }
 
-// TODO: type definition!
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function createMemoryEntry(memoryEntry: MemoryInfo) {
+type ReplayMemoryEntry = ReplayPerformanceEntry & { data: { memory: MemoryInfo } };
+
+export function createMemoryEntry(memoryEntry: MemoryInfo): ReplayMemoryEntry {
   const { jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize } = memoryEntry;
   // we don't want to use `getAbsoluteTime` because it adds the event time to the
   // time origin, so we get the current timestamp instead

packages/replay/src/coreHandlers/spanHandler.ts

@@ -6,8 +6,8 @@ import debounce from 'lodash.debounce';
 import { PerformanceObserverEntryList } from 'perf_hooks';
 import { EventType, record } from 'rrweb';
 
-import { getBreadcrumbHandler } from './coreHandlers/getBreadcrumbHandler';
-import { getSpanHandler } from './coreHandlers/getSpanHandler';
+import { breadcrumbHandler } from './coreHandlers/breadcrumbHandler';
+import { spanHandler } from './coreHandlers/spanHandler';
 import { createMemoryEntry, createPerformanceEntries, ReplayPerformanceEntry } from './createPerformanceEntry';
 import { createEventBuffer, IEventBuffer } from './eventBuffer';
 import {
@@ -705,14 +705,14 @@ export class Replay implements Integration {
    *
    * These specific events will create span-like objects in the recording.
    */
-  handleCoreSpanListener: (type: InstrumentationTypeSpan) => (handlerData: any) => void =
-    (type: InstrumentationTypeSpan) => (handlerData: any) => {
+  handleCoreSpanListener: (type: InstrumentationTypeSpan) => (handlerData: unknown) => void =
+    (type: InstrumentationTypeSpan) =>
+    (handlerData: unknown): void => {
       if (!this.isEnabled) {
         return;
       }
 
-      const handler = getSpanHandler(type);
-      const result = handler(handlerData);
+      const result = spanHandler(type, handlerData);
 
       if (result === null) {
         return;
@@ -738,14 +738,14 @@ export class Replay implements Integration {
    *
    * These events will create breadcrumb-like objects in the recording.
    */
-  handleCoreBreadcrumbListener: (type: InstrumentationTypeBreadcrumb) => (handlerData: any) => void =
-    (type: InstrumentationTypeBreadcrumb) => (handlerData: any) => {
+  handleCoreBreadcrumbListener: (type: InstrumentationTypeBreadcrumb) => (handlerData: unknown) => void =
+    (type: InstrumentationTypeBreadcrumb) =>
+    (handlerData: unknown): void => {
       if (!this.isEnabled) {
         return;
       }
 
-      const handler = getBreadcrumbHandler(type);
-      const result = handler(handlerData);
+      const result = breadcrumbHandler(type, handlerData);
 
       if (result === null) {
         return;
@@ -1174,7 +1174,7 @@ export class Replay implements Integration {
    * from calling both `flush` and `debouncedFlush`. Otherwise, there could be
    * cases of mulitple flushes happening closely together.
    */
-  flushImmediate(): any {
+  flushImmediate(): Promise<void> {
     this.debouncedFlush();
     // `.flush` is provided by lodash.debounce
     return this.debouncedFlush.flush();

packages/replay/src/createPerformanceEntry.ts

@@ -30,7 +30,7 @@ export type InstrumentationType =
 export interface WorkerRequest {
   id: number;
   method: string;
-  args: any[];
+  args: unknown[];
 }
 
 declare global {

packages/replay/src/index.ts

@@ -5,7 +5,7 @@ export function createPayload({
   headers,
 }: {
   events: RecordedEvents;
-  headers: Record<string, any>;
+  headers: Record<string, unknown>;
 }): string | Uint8Array {
   let payloadWithSequence;
 

packages/replay/src/types.ts

@@ -23,7 +23,10 @@ function isNavigationEntryEqual(a: PerformanceNavigationTiming) {
  */
 // TODO (high-prio): Figure out wth is returned here
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function dedupePerformanceEntries(currentList: PerformanceEntryList, newList: PerformanceEntryList) {
+export function dedupePerformanceEntries(
+  currentList: PerformanceEntryList,
+  newList: PerformanceEntryList,
+): PerformanceEntryList {
   // Partition `currentList` into 3 different lists based on entryType
   const [existingNavigationEntries, existingLcpEntries, existingEntries] = currentList.reduce(
     (acc: [PerformanceNavigationTiming[], PerformancePaintTiming[], PerformanceEntryList], entry) => {

packages/replay/src/util/createPayload.ts

@@ -1,7 +1,7 @@
 import { logger as sentryLogger } from '@sentry/utils';
 
 function wrapLogger(logFn: typeof sentryLogger[keyof typeof sentryLogger]) {
-  return function wrappedLog(...args: any[]) {
+  return function wrappedLog(...args: unknown[]) {
     return logFn.call(sentryLogger, '[Replay]', ...args);
   };
 }

packages/replay/src/util/dedupePerformanceEntries.ts

@@ -1,7 +1,7 @@
 import { SeverityLevel } from '@sentry/browser';
 import { Event } from '@sentry/types';
 
-export function Error(obj?: Event) {
+export function Error(obj?: Event): any {
   const timestamp = new Date().getTime() / 1000;
 
   return {

packages/replay/src/util/logger.ts

@@ -1,6 +1,6 @@
 import { Event, SeverityLevel } from '@sentry/types';
 
-export function Transaction(obj?: Partial<Event>) {
+export function Transaction(obj?: Partial<Event>): any {
   const timestamp = new Date().getTime() / 1000;
 
   return {

packages/replay/test/fixtures/error.ts

@@ -49,7 +49,7 @@ jest.mock('rrweb', () => {
 // XXX: Intended to be after `mock('rrweb')`
 import * as rrweb from 'rrweb';
 
-export function mockRrweb() {
+export function mockRrweb(): { record: RecordMock } {
   return {
     record: rrweb.record as RecordMock,
   };

packages/replay/test/fixtures/transaction.ts

@@ -1,4 +1,4 @@
-export function useFakeTimers() {
+export function useFakeTimers(): void {
   const _setInterval = setInterval;
   const _clearInterval = clearInterval;
   jest.useFakeTimers();

packages/replay/test/mocks/mockRrweb.ts

@@ -25,7 +25,7 @@ export class Compressor {
     return;
   }
 
-  public addEvent(data: Record<string, any>): void {
+  public addEvent(data: Record<string, unknown>): void {
     if (!data) {
       return;
     }

packages/replay/test/utils/use-fake-timers.ts

@@ -3,13 +3,19 @@ import { Compressor } from './Compressor';
 
 const compressor = new Compressor();
 
-const handlers: Record<string, (args: any[]) => void> = {
+interface Handlers {
+  init: () => void;
+  addEvent: (data: Record<string, unknown>) => void;
+  finish: () => void;
+}
+
+const handlers: Handlers = {
   init: () => {
     compressor.init();
     return '';
   },
 
-  addEvent: (data: Record<string, any>) => {
+  addEvent: (data: Record<string, unknown>) => {
     compressor.addEvent(data);
     return '';
   },