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,cjs,mjs,css}"
+
       - 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

README.md

@@ -1,249 +1,18 @@
-<p align="center">
-  <img width="100px" height="100px" src="https://www.rrweb.io/favicon.png">
-</p>
-<p align="center">
-  <a href="https://www.rrweb.io/" style="font-weight: bold">Try rrweb</a>
-</p>
+# The PostHog fork of RRWeb
 
-# rrweb
+We're using this fork
 
-**[The rrweb documentary (in Chinese, with English subtitles)](https://www.bilibili.com/video/BV1wL4y1B7wN?share_source=copy_web)**
+- to make it easier to test new versions of rrweb in production at PostHog
+- because patching rrweb has a poor DevEx compared to Pull Requests on this repo
 
-[![Join the chat at slack](https://img.shields.io/badge/[email protected]?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
-[![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io)
-![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size)
-[![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
+We're publishing it to NPM because transparency and being open is one of our core principles
 
-[中文文档](./README.zh_CN.md)
+# BUT PLEASE DO NOT DEPEND ON THIS FORK YOURSELF
 
-> I have joined Github Sponsors and highly appreciate your sponsorship.
+we'll change it based on PostHog's needs and will only be mindful of breaking changes to PostHog's usage of this published version.
 
-rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
+You should depend on th upstream rrweb, we won't support anyone else's use of this fork.
 
-## Guide
+# The upstream repo
 
-[**📚 Read the rrweb guide here. 📚**](./guide.md)
-
-[**🍳 Recipes 🍳**](./docs/recipes/index.md)
-
-[**📺 Presentation:** Hacking the browser to digital twin your users 📺](https://youtu.be/cWxpp9HwLYw)
-
-## Project Structure
-
-rrweb is mainly composed of 3 parts:
-
-- **[rrweb-snapshot](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot/)**, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
-- **[rrweb](https://github.com/rrweb-io/rrweb)**, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
-- **[rrweb-player](https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-player/)**, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
-
-## Roadmap
-
-- storage engine: do deduplication on a large number of rrweb sessions
-- compact mutation data in common patterns
-- provide plugins via the new plugin API, including:
-  - XHR plugin
-  - fetch plugin
-  - GraphQL plugin
-  - ...
-
-## Internal Design
-
-- [serialization](./docs/serialization.md)
-- [incremental snapshot](./docs/observer.md)
-- [replay](./docs/replay.md)
-- [sandbox](./docs/sandbox.md)
-
-## Contribute Guide
-
-Since we want the record and replay sides to share a strongly typed data structure, rrweb is developed with typescript which provides stronger type support.
-
-[Typescript handbook](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html)
-
-1. Fork this repository.
-2. Run `yarn install` in the root to install required dependencies for all sub-packages (note: `npm install` is _not_ recommended).
-3. Run `yarn build:all` to build all packages and get a stable base, then `yarn dev` in the root to get auto-building for all the sub-packages whenever you modify anything.
-4. Navigate to one of the sub-packages (in the `packages` folder) where you'd like to make a change.
-5. Patch the code and run `yarn test` to run the tests, make sure they pass before you commit anything. Add test cases in order to avoid future regression.
-6. If tests are failing, but the change in output is desirable, run `yarn test:update` and carefully commit the changes in test output.
-7. Push the code and create a pull request.
-
-Protip: You can run `yarn test` in the root folder to run all the tests.
-
-In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.
-
-[Using the REPL tool](./guide.md#REPL-tool)
-
-## Sponsors
-
-[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
-
-### Gold Sponsors 🥇
-
-<div dir="auto">
-
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
-
-</div>
-
-### Silver Sponsors 🥈
-
-<div dir="auto">
-
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
-
-</div>
-
-### Bronze Sponsors 🥉
-
-<div dir="auto">
-
-<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
-
-</div>
-
-### Backers
-
-<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
-
-## Core Team Members
-
-<table>
-  <tr>
-    <td align="center">
-      <a href="https://github.com/Yuyz0112">
-        <img
-          src="https://avatars.githubusercontent.com/u/13651389?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Yuyz0112</b></sub>
-        <br /><br />
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/YunFeng0817">
-        <img
-          src="https://avatars.githubusercontent.com/u/27533910?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Yun Feng</b></sub>
-        <br /><br />
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/eoghanmurray">
-        <img
-          src="https://avatars.githubusercontent.com/u/156780?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>eoghanmurray</b></sub>
-        <br /><br />
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://github.com/juice10">
-        <img
-          src="https://avatars.githubusercontent.com/u/4106?s=100"
-          width="100px;"
-          alt=""
-        />
-        <br /><sub><b>Juice10</b></sub>
-        <br /><sub>open for rrweb consulting</sub>
-      </a>
-    </td>
-  </tr>
-</table>
-
-## Who's using rrweb?
-
-<table>
-  <tr>
-    <td align="center">
-      <a href="http://www.smartx.com/" target="_blank">
-        <img width="195px" src="https://www.rrweb.io/logos/smartx.png">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
-        <img width="195px" src="https://www.rrweb.io/logos/posthog.png">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://statcounter.com/session-replay/" target="_blank">
-        <img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://recordonce.com/" target="_blank">
-        <img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
-      </a>
-    </td>
-  </tr>
-    <tr>
-    <td align="center">
-      <a href="https://cux.io" target="_blank">
-        <img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://remsupp.com" target="_blank">
-        <img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://highlight.io" target="_blank">
-        <img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://analyzee.io" target="_blank">
-        <img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
-      </a>
-    </td>
-  </tr>
-  <tr>
-    <td align="center">
-      <a href="https://requestly.io" target="_blank">
-        <img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://gleap.io" target="_blank">
-        <img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://uxwizz.com" target="_blank">
-        <img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
-      </a>
-    </td>
-    <td align="center">
-      <a href="https://www.howdygo.com" target="_blank">
-        <img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
-      </a>
-    </td>
-  </tr>
-</table>
+We're still committed to supporting upstream rrweb financially and with fixes/improvements that we make at PostHog

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.18"
+    "rrweb": "^2.0.0-alpha.18",
+    "@rrweb/utils": "^2.0.0-alpha.18"
   }
 }

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.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

@@ -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 @@ 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,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,