fix: console recorder imports are exploding bundle size

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

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

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

@@ -1,5 +1,5 @@
 import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
-import { utils } from 'rrweb';
+import { patch } from '@rrweb/utils';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';
 
@@ -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.18",
-    "rrweb": "^2.0.0-alpha.18"
+    "rrweb": "^2.0.0-alpha.18",
+    "@rrweb/utils": "^2.0.0-alpha.18"
   },
   "browserslist": [
     "supports es6-class"

packages/record/tsconfig.json

@@ -11,6 +11,9 @@
     },
     {
       "path": "../rrweb"
+    },
+    {
+      "path": "../utils"
     }
   ]
 }

packages/rrweb/src/record/observer.ts

@@ -15,10 +15,10 @@ import {
   getWindowWidth,
   isBlocked,
   legacy_isTouchEvent,
-  patch,
   StyleSheetMirror,
   nowTimestamp,
 } from '../utils';
+import { patch } from '@rrweb/utils';
 import type { observerParam, MutationBufferParam } from '../types';
 import {
   IncrementalSource,

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

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

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,7 +6,8 @@ import {
   type IWindow,
   type listenerHandler,
 } from '@rrweb/types';
-import { hookSetter, isBlocked, patch } from '../../../utils';
+import { hookSetter, isBlocked } from '../../../utils';
+import { patch } from '@rrweb/utils';
 import { saveWebGLVar, serializeArgs } from './serialize-args';
 
 function patchGLPrototype(

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

@@ -127,49 +127,6 @@ export function hookSetter<T>(
   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

@@ -222,6 +222,49 @@ export function mutationObserverCtor(): (typeof MutationObserver)['prototype']['
   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,
@@ -235,4 +278,5 @@ export default {
   querySelector,
   querySelectorAll,
   mutationObserver: mutationObserverCtor,
+  patch,
 };