fix: don't bundle everything into console recorder

.changeset/nasty-guests-dream.md

@@ -0,0 +1,7 @@
+---
+"@rrweb/rrweb-plugin-console-record": patch
+"rrweb": patch
+"@rrweb/utils": patch
+---
+
+move patch function into rrweb/utils to improve bundling

.github/workflows/ci-cd.yml

@@ -33,6 +33,14 @@ jobs:
         # run: PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }} PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
         run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
 
+      - name: Check bundle sizes
+        uses: preactjs/compressed-size-action@v2
+        with:
+          install-script: "yarn install --frozen-lockfile"
+          build-script: "build:all"
+          compression: "none"
+          pattern: "**/dist/*.js"
+
       - name: Upload diff images to GitHub
         uses: actions/upload-artifact@v3
         if: failure()

.gitignore

@@ -35,3 +35,6 @@ dist
 # for vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# bundle analysis files
+*-bundle-analysis.html

package.json

@@ -38,6 +38,7 @@
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "prettier": "2.8.4",
+    "rollup-plugin-visualizer": "^5.12.0",
     "turbo": "^2.0.4",
     "typescript": "^5.4.5"
   },

packages/plugins/rrweb-plugin-console-record/package.json

@@ -53,6 +53,7 @@
     "puppeteer": "^20.9.0"
   },
   "peerDependencies": {
-    "rrweb": "^2.0.0-alpha.17"
+    "rrweb": "^2.0.0-alpha.17",
+    "@rrweb/utils": "^2.0.0-alpha.17"
   }
 }

packages/plugins/rrweb-plugin-console-record/src/index.ts

@@ -1,7 +1,7 @@
 import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
-import { utils } from 'rrweb';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';
+import { patch } from '@rrweb/utils';
 
 export type StringifyOptions = {
   // limit of string length
@@ -183,7 +183,7 @@ function initLogObserver(
       };
     }
     // replace the logger.{level}. return a restore function
-    return utils.patch(
+    return patch(
       _logger,
       level,
       (original: (...args: Array<unknown>) => void) => {

packages/record/package.json

@@ -56,7 +56,8 @@
   },
   "dependencies": {
     "@rrweb/types": "^2.0.0-alpha.17",
-    "rrweb": "^2.0.0-alpha.17"
+    "rrweb": "^2.0.0-alpha.17",
+    "@rrweb/utils": "^2.0.0-alpha.17"
   },
   "browserslist": [
     "supports es6-class"

packages/record/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["src"],
+  "include": [
+    "src"
+  ],
   "compilerOptions": {
     "rootDir": "src",
     "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
@@ -11,6 +13,9 @@
     },
     {
       "path": "../rrweb"
+    },
+    {
+      "path": "../utils"
     }
   ]
 }

packages/rrweb/src/record/observer.ts

@@ -15,10 +15,10 @@
   getWindowWidth,
   isBlocked,
   legacy_isTouchEvent,
-  patch,
   StyleSheetMirror,
   nowTimestamp,
 } from '../utils';
+import { patch } from '@rrweb/utils';
 import type { observerParam, MutationBufferParam } from '../types';
 import {
   IncrementalSource,
@@ -131,7 +131,7 @@
           | IncrementalSource.TouchMove
           | IncrementalSource.Drag,
       ) => {
         const totalOffset = Date.now() - timeBaseline!;
         mousemoveCb(
           positions.map((p) => {
             p.timeOffset -= totalOffset;

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -5,8 +5,9 @@ import {
   type IWindow,
   type listenerHandler,
 } from '@rrweb/types';
-import { hookSetter, isBlocked, patch } from '../../../utils';
+import { hookSetter, isBlocked } from '../../../utils';
 import { serializeArgs } from './serialize-args';
+import { patch } from '@rrweb/utils';
 
 export default function initCanvas2DMutationObserver(
   cb: canvasManagerMutationCallback,

packages/rrweb/src/record/observers/canvas/canvas.ts

@@ -1,6 +1,7 @@
 import type { ICanvas } from 'rrweb-snapshot';
 import type { blockClass, IWindow, listenerHandler } from '@rrweb/types';
-import { isBlocked, patch } from '../../../utils';
+import { isBlocked } from '../../../utils';
+import { patch } from '@rrweb/utils';
 
 function getNormalizedContextName(contextType: string) {
   return contextType === 'experimental-webgl' ? 'webgl' : contextType;

packages/rrweb/src/record/observers/canvas/webgl.ts

@@ -6,8 +6,9 @@ import {
   type IWindow,
   type listenerHandler,
 } from '@rrweb/types';
-import { hookSetter, isBlocked, patch } from '../../../utils';
+import { hookSetter, isBlocked } from '../../../utils';
 import { saveWebGLVar, serializeArgs } from './serialize-args';
+import { patch } from '@rrweb/utils';
 
 function patchGLPrototype(
   prototype: WebGLRenderingContext | WebGL2RenderingContext,

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -9,10 +9,10 @@ import {
   initScrollObserver,
   initAdoptedStyleSheetObserver,
 } from './observer';
-import { patch, inDom } from '../utils';
+import { inDom } from '../utils';
 import type { Mirror } from 'rrweb-snapshot';
 import { isNativeShadowDom } from 'rrweb-snapshot';
-import dom from '@rrweb/utils';
+import dom, { patch } from '@rrweb/utils';
 
 type BypassOptions = Omit<
   MutationBufferParam,

packages/rrweb/src/utils.ts

@@ -31,7 +31,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -115,7 +115,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -126,49 +126,6 @@
   return () => hookSetter(target, key, original || {}, true);
 }
 
-// copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
-export function patch(
-  source: { [key: string]: any },
-  name: string,
-  replacement: (...args: unknown[]) => unknown,
-): () => void {
-  try {
-    if (!(name in source)) {
-      return () => {
-        //
-      };
-    }
-
-    const original = source[name] as () => unknown;
-    const wrapped = replacement(original);
-
-    // Make sure it's a function first, as we need to attach an empty prototype for `defineProperties` to work
-    // otherwise it'll throw "TypeError: Object.defineProperties called on non-object"
-    if (typeof wrapped === 'function') {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      wrapped.prototype = wrapped.prototype || {};
-      Object.defineProperties(wrapped, {
-        __rrweb_original__: {
-          enumerable: false,
-          value: original,
-        },
-      });
-    }
-
-    source[name] = wrapped;
-
-    return () => {
-      source[name] = original;
-    };
-  } catch {
-    return () => {
-      //
-    };
-    // This can throw if multiple fill happens on a global object like XMLHttpRequest
-    // Fixes https://github.com/getsentry/sentry-javascript/issues/2043
-  }
-}
-
 // guard against old third party libraries which redefine Date.now
 let nowTimestamp = Date.now;
 

packages/utils/src/index.ts

@@ -205,6 +205,49 @@
   return getUntaintedPrototype('MutationObserver').constructor;
 }
 
+// copy from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
+export function patch(
+  source: { [key: string]: any },
+  name: string,
+  replacement: (...args: unknown[]) => unknown,
+): () => void {
+  try {
+    if (!(name in source)) {
+      return () => {
+        //
+      };
+    }
+
+    const original = source[name] as () => unknown;
+    const wrapped = replacement(original);
+
+    // Make sure it's a function first, as we need to attach an empty prototype for `defineProperties` to work
+    // otherwise it'll throw "TypeError: Object.defineProperties called on non-object"
+    if (typeof wrapped === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      wrapped.prototype = wrapped.prototype || {};
+      Object.defineProperties(wrapped, {
+        __rrweb_original__: {
+          enumerable: false,
+          value: original,
+        },
+      });
+    }
+
+    source[name] = wrapped;
+
+    return () => {
+      source[name] = original;
+    };
+  } catch {
+    return () => {
+      //
+    };
+    // This can throw if multiple fill happens on a global object like XMLHttpRequest
+    // Fixes https://github.com/getsentry/sentry-javascript/issues/2043
+  }
+}
+
 export default {
   childNodes,
   parentNode,
@@ -218,4 +261,5 @@
   querySelector,
   querySelectorAll,
   mutationObserver: mutationObserverCtor,
+  patch,
 };

vite.config.default.ts

@@ -4,8 +4,10 @@ import { copyFileSync } from 'node:fs';
 import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
 import glob from 'fast-glob';
 import { build, Format } from 'esbuild';
-import { resolve } from 'path';
+import path, { resolve } from 'path';
 import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
+import * as fs from 'node:fs';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // don't empty out dir if --watch flag is passed
 const emptyOutDir = !process.argv.includes('--watch');
@@ -157,6 +159,30 @@ export default function (
         },
       }),
       minifyAndUMDPlugin({ name, outDir }),
+      {
+        name: 'outout-graph',
+        buildEnd() {
+          console.log('on build end running for: ', name);
+          const deps = [];
+          for (const id of Array.from(this.getModuleIds())) {
+            const m = this.getModuleInfo(id);
+            if (m != null && !m.isExternal) {
+              for (const target of m.importedIds) {
+                deps.push({ source: m.id, target });
+              }
+            }
+          }
+
+          fs.writeFileSync(
+            path.join(__dirname, name + '-graph.json'),
+            JSON.stringify(deps, null, 2),
+          );
+        },
+      },
+      visualizer({
+        filename: path.resolve(__dirname, name + '-bundle-analysis.html'), // Path for the HTML report
+        open: false, // don't Automatically open the report in the browser
+      }),
       ...plugins,
     ],
   }));

yarn.lock

@@ -4509,6 +4509,11 @@ define-data-property@^1.0.1, define-data-property@^1.1.4:
     es-errors "^1.3.0"
     gopd "^1.0.1"
 
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
 define-properties@^1.2.0, define-properties@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
@@ -6233,7 +6238,7 @@ is-date-object@^1.0.1:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-docker@^2.0.0:
+is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
@@ -7890,6 +7895,15 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
+open@^8.4.0:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
 optionator@^0.9.3:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
@@ -8827,6 +8841,16 @@ rimraf@~2.4.0:
   dependencies:
     glob "^6.0.1"
 
+rollup-plugin-visualizer@^5.12.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz#661542191ce78ee4f378995297260d0c1efb1302"
+  integrity sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==
+  dependencies:
+    open "^8.4.0"
+    picomatch "^2.3.1"
+    source-map "^0.7.4"
+    yargs "^17.5.1"
+
 rollup@^4.13.0:
   version "4.18.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.18.0.tgz#497f60f0c5308e4602cf41136339fbf87d5f5dda"
@@ -9218,7 +9242,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
+source-map@^0.7.3, source-map@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
@@ -10754,7 +10778,7 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.3.1, yargs@^17.7.1:
+yargs@^17.3.1, yargs@^17.5.1, yargs@^17.7.1:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==