ref: Docs & mergability improvements (#128)

1. Add notes on major changes in this fork 2. Refactor a previous change a bit in order to keep line breaks etc. better aligned with upstream, in order to prevent future merge conflicts
getsentry · Oct 30, 2023 · 88e5a85 · 88e5a85
1 parent b9e5413
commit 88e5a85
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 140 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,14 @@ From this monorepo, Sentry maintains and publishes the following NPM packages:
 - `@sentry-internal/rrweb-player` (corresponds to the [original `rrweb-player` package](https://www.npmjs.com/package/rrweb-player))
 - `@sentry-internal/rrweb-snapshot` (corresponds to the [original `rrweb-snapshot` package](https://www.npmjs.com/package/rrweb-snapshot))
 
+## Major changes from upstream branch
+
+Apart from some small fixes/changes in this fork, these are the main relevant changes compared to the upstream rrweb repository:
+
+- Removed `hooks` related code, so passing `hooks: myHooks` to `record()` will have no effect
+- Removed `plugins` related code, so passing `plugins: myPlugins` to `record()` will have no effect
+- Added build flags to allow to disable iframe, canvas & shadow dom recording (in order to get bundle size optimizations)
+
 # rrweb
 
 <p align="center">

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -461,146 +461,149 @@ function record<T = eventWithTime>(
     const handlers: listenerHandler[] = [];
 
     const observe = (doc: Document) => {
-      return callbackWrapper(initObservers)({
-        onMutation,
-        mutationCb: wrappedMutationEmit,
-        mousemoveCb: (positions, source) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source,
-                positions,
-              },
-            }),
-          ),
-        mouseInteractionCb: (d) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.MouseInteraction,
-                ...d,
-              },
-            }),
-          ),
-        scrollCb: wrappedScrollEmit,
-        viewportResizeCb: (d) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.ViewportResize,
-                ...d,
-              },
-            }),
-          ),
-        inputCb: (v) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.Input,
-                ...v,
-              },
-            }),
-          ),
-        mediaInteractionCb: (p) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.MediaInteraction,
-                ...p,
-              },
-            }),
-          ),
-        styleSheetRuleCb: (r) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.StyleSheetRule,
-                ...r,
-              },
-            }),
-          ),
-        styleDeclarationCb: (r) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.StyleDeclaration,
-                ...r,
-              },
-            }),
-          ),
-        canvasMutationCb: wrappedCanvasMutationEmit,
-        fontCb: (p) =>
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.Font,
-                ...p,
-              },
-            }),
-          ),
-        selectionCb: (p) => {
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.Selection,
-                ...p,
-              },
-            }),
-          );
-        },
-        customElementCb: (c) => {
-          wrappedEmit(
-            wrapEvent({
-              type: EventType.IncrementalSnapshot,
-              data: {
-                source: IncrementalSource.CustomElement,
-                ...c,
-              },
-            }),
-          );
+      return callbackWrapper(initObservers)(
+        {
+          onMutation,
+          mutationCb: wrappedMutationEmit,
+          mousemoveCb: (positions, source) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source,
+                  positions,
+                },
+              }),
+            ),
+          mouseInteractionCb: (d) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.MouseInteraction,
+                  ...d,
+                },
+              }),
+            ),
+          scrollCb: wrappedScrollEmit,
+          viewportResizeCb: (d) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.ViewportResize,
+                  ...d,
+                },
+              }),
+            ),
+          inputCb: (v) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.Input,
+                  ...v,
+                },
+              }),
+            ),
+          mediaInteractionCb: (p) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.MediaInteraction,
+                  ...p,
+                },
+              }),
+            ),
+          styleSheetRuleCb: (r) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.StyleSheetRule,
+                  ...r,
+                },
+              }),
+            ),
+          styleDeclarationCb: (r) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.StyleDeclaration,
+                  ...r,
+                },
+              }),
+            ),
+          canvasMutationCb: wrappedCanvasMutationEmit,
+          fontCb: (p) =>
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.Font,
+                  ...p,
+                },
+              }),
+            ),
+          selectionCb: (p) => {
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.Selection,
+                  ...p,
+                },
+              }),
+            );
+          },
+          customElementCb: (c) => {
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.CustomElement,
+                  ...c,
+                },
+              }),
+            );
+          },
+          blockClass,
+          ignoreClass,
+          ignoreSelector,
+          maskAllText,
+          maskTextClass,
+          unmaskTextClass,
+          maskTextSelector,
+          unmaskTextSelector,
+          maskInputOptions,
+          inlineStylesheet,
+          sampling,
+          recordCanvas,
+          inlineImages,
+          userTriggeredOnInput,
+          collectFonts,
+          doc,
+          maskAttributeFn,
+          maskInputFn,
+          maskTextFn,
+          keepIframeSrcFn,
+          blockSelector,
+          unblockSelector,
+          slimDOMOptions,
+          dataURLOptions,
+          mirror,
+          iframeManager,
+          stylesheetManager,
+          shadowDomManager,
+          processedNodeManager,
+          canvasManager,
+          ignoreCSSAttributes,
+          plugins: [],
         },
-        blockClass,
-        ignoreClass,
-        ignoreSelector,
-        maskAllText,
-        maskTextClass,
-        unmaskTextClass,
-        maskTextSelector,
-        unmaskTextSelector,
-        maskInputOptions,
-        inlineStylesheet,
-        sampling,
-        recordCanvas,
-        inlineImages,
-        userTriggeredOnInput,
-        collectFonts,
-        doc,
-        maskAttributeFn,
-        maskInputFn,
-        maskTextFn,
-        keepIframeSrcFn,
-        blockSelector,
-        unblockSelector,
-        slimDOMOptions,
-        dataURLOptions,
-        mirror,
-        iframeManager,
-        stylesheetManager,
-        shadowDomManager,
-        processedNodeManager,
-        canvasManager,
-        ignoreCSSAttributes,
-        plugins: [],
-      });
+        {},
+      );
     };
 
     iframeManager.addLoadListener((iframeEl) => {

diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -35,6 +35,7 @@ import {
   fontParam,
   IWindow,
   SelectionRange,
+  hooksParam,
 } from '@sentry-internal/rrweb-types';
 import MutationBuffer from './mutation';
 import { callbackWrapper } from './error-handler';
@@ -1278,7 +1279,10 @@ function initCustomElementObserver({
   return restoreHandler;
 }
 
-export function initObservers(o: observerParam): listenerHandler {
+export function initObservers(
+  o: observerParam,
+  _hooks: hooksParam = {},
+): listenerHandler {
   const currentWindow = o.doc.defaultView; // basically document.window
   if (!currentWindow) {
     return () => {