ref: Extract worker into package

Author: mydea

package.json

@@ -51,6 +51,7 @@
     "packages/react",
     "packages/remix",
     "packages/replay",
+    "packages/replay-worker",
     "packages/serverless",
     "packages/svelte",
     "packages/tracing",

packages/replay-worker/.eslintrc.js

@@ -0,0 +1,17 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts'],
+      rules: {
+        // We cannot use backticks, as that conflicts with the stringified worker
+        'prefer-template': 'off',
+      },
+    },
+  ],
+};

packages/replay-worker/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+/*.tgz
+.eslintcache
+build
+!types/*.d.ts

packages/replay-worker/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2022 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/replay-worker/README.md

@@ -0,0 +1,12 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Session Replay Worker
+
+This is an internal package that is used by @sentry/replay.
+It generates a web worker and converts it to a string, so that we can process it easier in replay.
+
+By extracting this into a dedicated (private, internal) package, we can streamline the build of replay.

packages/replay-worker/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest/jest.config.js');

packages/replay-worker/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@sentry-internal/replay-worker",
+  "version": "7.37.0",
+  "description": "Worker for @sentry/replay",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "sideEffects": false,
+  "private": true,
+  "scripts": {
+    "build": "yarn build:transpile",
+    "build:transpile": "rollup -c rollup.worker.config.js",
+    "build:types": "yarn build:transpile",
+    "build:dev": "yarn build",
+    "build:watch": "run-p build:transpile:watch",
+    "build:dev:watch": "run-p build:watch",
+    "build:transpile:watch": "yarn build:rollup --watch",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:eslint": "eslint . --format stylish --fix",
+    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
+    "lint": "run-s lint:prettier lint:eslint",
+    "lint:eslint": "eslint . --format stylish",
+    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getsentry/sentry-javascript.git"
+  },
+  "author": "Sentry",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/getsentry/sentry-javascript/issues"
+  },
+  "homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
+  "devDependencies": {
+    "@types/pako": "^2.0.0",
+    "rollup-plugin-copy": "~3.4.0",
+    "tslib": "^1.9.3"
+  },
+  "dependencies": {
+    "pako": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

packages/replay-worker/rollup.worker.config.js

@@ -0,0 +1,35 @@
+// inspired by https://justinribeiro.com/chronicle/2020/07/17/building-module-web-workers-for-cross-browser-compatibility-with-rollup/
+
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import { defineConfig } from 'rollup';
+import { terser } from 'rollup-plugin-terser';
+import copy from 'rollup-plugin-copy';
+
+const config = defineConfig({
+  input: ['./src/index.ts'],
+  output: {
+    dir: './build/',
+    format: 'esm',
+  },
+  plugins: [
+    typescript({ tsconfig: './tsconfig.json', inlineSourceMap: false, sourceMap: false, inlineSources: false }),
+    resolve(),
+    terser({
+      mangle: {
+        module: true,
+      },
+    }),
+    {
+      name: 'worker-to-string',
+      renderChunk(code) {
+        return `export default \`${code}\`;`;
+      },
+    },
+    copy({
+      targets: [{ src: 'types/*', dest: 'build' }],
+    }),
+  ],
+});
+
+export default config;

packages/replay-worker/src/Compressor.ts

@@ -0,0 +1,83 @@
+import { constants, Deflate, deflate } from 'pako';
+
+/**
+ * A stateful compressor that can be used to batch compress events.
+ */
+export class Compressor {
+  /**
+   * pako deflator instance
+   */
+  public deflate: Deflate;
+
+  /**
+   * If any events have been added.
+   */
+  private _hasEvents: boolean;
+
+  public constructor() {
+    this._init();
+  }
+
+  /**
+   * Clear the compressor buffer.
+   */
+  public clear(): void {
+    this._init();
+  }
+
+  /**
+   * Add an event to the compressor buffer.
+   */
+  public addEvent(data: string): void {
+    if (!data) {
+      throw new Error('Adding invalid event');
+    }
+    // If the event is not the first event, we need to prefix it with a `,` so
+    // that we end up with a list of events
+    const prefix = this._hasEvents ? ',' : '';
+    // TODO: We may want Z_SYNC_FLUSH or Z_FULL_FLUSH (not sure the difference)
+    // Using NO_FLUSH here for now as we can create many attachments that our
+    // web UI will get API rate limited.
+    this.deflate.push(prefix + data, constants.Z_SYNC_FLUSH);
+
+    this._hasEvents = true;
+  }
+
+  /**
+   * Finish compression of the current buffer.
+   */
+  public finish(): Uint8Array {
+    // We should always have a list, it can be empty
+    this.deflate.push(']', constants.Z_FINISH);
+
+    if (this.deflate.err) {
+      throw this.deflate.err;
+    }
+
+    // Copy result before we create a new deflator and return the compressed
+    // result
+    const result = this.deflate.result;
+
+    this._init();
+
+    return result;
+  }
+
+  /**
+   * Re-initialize the compressor buffer.
+   */
+  private _init(): void {
+    this._hasEvents = false;
+    this.deflate = new Deflate();
+
+    // Fake an array by adding a `[`
+    this.deflate.push('[', constants.Z_NO_FLUSH);
+  }
+}
+
+/**
+ * Compress a string.
+ */
+export function compress(data: string): Uint8Array {
+  return deflate(data);
+}

packages/replay-worker/src/handleMessage.ts

@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { compress, Compressor } from './Compressor';
+
+const compressor = new Compressor();
+
+interface Handlers {
+  clear: () => void;
+  addEvent: (data: string) => void;
+  finish: () => Uint8Array;
+  compress: (data: string) => Uint8Array;
+}
+
+const handlers: Handlers = {
+  clear: () => {
+    compressor.clear();
+  },
+
+  addEvent: (data: string) => {
+    compressor.addEvent(data);
+  },
+
+  finish: () => {
+    return compressor.finish();
+  },
+
+  compress: (data: string) => {
+    return compress(data);
+  },
+};
+
+/**
+ * Handler for worker messages.
+ */
+export function handleMessage(e: MessageEvent): void {
+  const method = e.data.method as string;
+  const id = e.data.id as number;
+  const data = e.data.arg as string;
+
+  // @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);
+      // @ts-ignore this syntax is actually fine
+      postMessage({
+        id,
+        method,
+        success: true,
+        response,
+      });
+    } catch (err) {
+      // @ts-ignore this syntax is actually fine
+      postMessage({
+        id,
+        method,
+        success: false,
+        response: err.message,
+      });
+
+      // eslint-disable-next-line no-console
+      console.error(err);
+    }
+  }
+}

packages/replay-worker/src/index.ts

@@ -0,0 +1,12 @@
+import { handleMessage } from './handleMessage';
+
+addEventListener('message', handleMessage);
+
+// Immediately send a message when worker loads, so we know the worker is ready
+// @ts-ignore this syntax is actually fine
+postMessage({
+  id: undefined,
+  method: 'init',
+  success: true,
+  response: undefined,
+});

packages/replay-worker/test/tsconfig.json

@@ -0,0 +1,7 @@
+// TODO Once https://github.com/microsoft/TypeScript/issues/33094 is done (if it ever is), this file can disappear, as
+// it's purely a placeholder to satisfy VSCode.
+{
+  "extends": "../tsconfig.test.json",
+
+  "include": ["./**/*"]
+}

packages/replay-worker/test/unit/Compressor.test.ts

@@ -0,0 +1,41 @@
+import pako from 'pako';
+
+import { Compressor } from '../../src/Compressor';
+
+describe('Compressor', () => {
+  it('compresses multiple events', () => {
+    const compressor = new Compressor();
+
+    const events = [
+      {
+        id: 1,
+        foo: ['bar', 'baz'],
+      },
+      {
+        id: 2,
+        foo: [false],
+      },
+    ];
+
+    events.forEach(event => compressor.addEvent(JSON.stringify(event)));
+
+    const compressed = compressor.finish();
+
+    const restored = pako.inflate(compressed, { to: 'string' });
+
+    expect(restored).toBe(JSON.stringify(events));
+  });
+
+  it('throws on invalid/undefined events', () => {
+    const compressor = new Compressor();
+
+    // @ts-ignore ignoring type for test
+    expect(() => void compressor.addEvent(undefined)).toThrow();
+
+    const compressed = compressor.finish();
+
+    const restored = pako.inflate(compressed, { to: 'string' });
+
+    expect(restored).toBe(JSON.stringify([]));
+  });
+});

packages/replay-worker/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["webworker", "scripthost"],
+    "esModuleInterop": true,
+    "target": "es6",
+    "strictPropertyInitialization": false
+  },
+  "include": ["src/**/*.ts"]
+}

packages/replay-worker/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["test/**/*.ts"],
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  }
+}