ref(replay): Avoid deserializing JSON

Author: mydea

packages/replay/src/eventBuffer/EventBufferCompressionWorker.ts

@@ -72,7 +72,7 @@ export class EventBufferCompressionWorker extends EventBufferArray {
   /**
    * Post message to worker and wait for response before resolving promise.
    */
-  private _postMessage<T>({ id, method, args }: WorkerRequest): Promise<T> {
+  private _postMessage<T>({ id, method, arg }: WorkerRequest): Promise<T> {
     return new Promise((resolve, reject) => {
       const listener = ({ data }: MessageEvent): void => {
         const response = data as WorkerResponse;
@@ -100,26 +100,18 @@ export class EventBufferCompressionWorker extends EventBufferArray {
         resolve(response.response as T);
       };
 
-      let stringifiedArgs;
-      try {
-        stringifiedArgs = JSON.stringify(args);
-      } catch (err) {
-        __DEBUG_BUILD__ && logger.error('[Replay] Error when trying to stringify args', err);
-        stringifiedArgs = '[]';
-      }
-
       // 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.postMessage({ id, method, arg });
     });
   }
 
   /**
    * Finish the request and return the compressed data from the worker.
    */
   private async _compressEvents(id: number, events: RecordingEvent[]): Promise<Uint8Array> {
-    return this._postMessage<Uint8Array>({ id, method: 'compress', args: [events] });
+    return this._postMessage<Uint8Array>({ id, method: 'compress', arg: JSON.stringify(events) });
   }
 
   /** Get the current ID and increment it for the next call. */

packages/replay/src/types.ts

@@ -24,7 +24,7 @@ export interface SendReplayData {
 export interface WorkerRequest {
   id: number;
   method: string;
-  args: unknown[];
+  arg: string;
 }
 
 // PerformancePaintTiming and PerformanceNavigationTiming are only available with TS 4.4 and newer

packages/replay/src/worker/worker.js

@@ -11,24 +11,10 @@ describe('Unit | worker | compress', () => {
       },
     ];
 
-    const compressed = compress(events);
+    const compressed = compress(JSON.stringify(events));
 
     const restored = pako.inflate(compressed, { to: 'string' });
 
     expect(restored).toBe(JSON.stringify(events));
   });
-
-  it('ignores empty data', () => {
-    const event = {
-      id: 1,
-      foo: ['bar', 'baz'],
-    };
-
-    // @ts-ignore ignoring type for test
-    const compressed = compress([null, undefined, event]);
-
-    const restored = pako.inflate(compressed, { to: 'string' });
-
-    expect(restored).toBe(JSON.stringify([event]));
-  });
 });

packages/replay/test/unit/worker/compress.test.ts

@@ -1,19 +1,5 @@
 import pako from 'pako';
 
-type RecordingEvent = Record<string, unknown>;
-
-export function compress(data: RecordingEvent[]): Uint8Array {
-  return pako.deflate(buildDeflate(data));
-}
-
-function buildDeflate(data: RecordingEvent[]): string {
-  // We cannot use backticks, as that conflicts with the stringified worker
-  return (
-    '[' +
-    data
-      .filter((event: RecordingEvent) => !!event)
-      .map(event => JSON.stringify(event))
-      .join(',') +
-    ']'
-  );
+export function compress(data: string): Uint8Array {
+  return pako.deflate(data);
 }

packages/replay/worker/src/compress.ts

@@ -1,25 +1,24 @@
 import { compress } from './compress';
 
 interface Handlers {
-  compress: (data: Record<string, unknown>[]) => void;
+  compress: (data: string) => void;
 }
 
 const handlers: Handlers = {
-  compress: (data: Record<string, unknown>[]) => {
+  compress: (data: string) => {
     return compress(data);
   },
 };
 
 export function handleMessage(e: MessageEvent): void {
-  const eventData = e.data as unknown as { method: string; id: number; args: string };
-  const { method, id, args } = eventData;
-  const [data] = args ? JSON.parse(args) : [];
+  const eventData = e.data as unknown as { method: string; id: number; arg: string };
+  const { method, id, arg } = eventData;
 
   // @ts-ignore this syntax is actually fine
   if (method in handlers && typeof handlers[method] === 'function') {
     try {
       // @ts-ignore this syntax is actually fine
-      const response = handlers[method](data);
+      const response = handlers[method](arg);
       // @ts-ignore this syntax is actually fine
       postMessage({
         id,