Merge pull request #33 from amplitude/revert-32-revert-22-rrweb-sync-…

…alpha-12 Revert "Revert "Rrweb sync alpha 12""
amplitude · Oct 16, 2024 · 0be05c5 · 0be05c5
2 parents 81feb90 + 3b29f1a
commit 0be05c5
Show file tree

Hide file tree

Showing 90 changed files with 3,641 additions and 582 deletions.
diff --git a/.changeset/breezy-cats-heal.md b/.changeset/breezy-cats-heal.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: createImageBitmap throws DOMException if source is 0 width or height
diff --git a/.changeset/breezy-mice-breathe.md b/.changeset/breezy-mice-breathe.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+safely capture BigInt values with the console log plugin"
diff --git a/.changeset/cold-hounds-teach.md b/.changeset/cold-hounds-teach.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/cool-grapes-hug.md b/.changeset/cool-grapes-hug.md
@@ -0,0 +1,5 @@
+---
+'rrdom': patch
+---
+
+Support `loop` in `RRMediaElement`
diff --git a/.changeset/dirty-rules-dress.md b/.changeset/dirty-rules-dress.md
@@ -0,0 +1,5 @@
+---
+'rrweb-snapshot': minor
+---
+
+Video and Audio elements now also capture `playbackRate`, `muted`, `loop`, `volume`.
diff --git a/.changeset/few-rockets-travel.md b/.changeset/few-rockets-travel.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/fluffy-planes-retire.md b/.changeset/fluffy-planes-retire.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Feat: Add support for replaying :defined pseudo-class of custom elements
diff --git a/.changeset/friendly-numbers-leave.md b/.changeset/friendly-numbers-leave.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/gold-apples-joke.md b/.changeset/gold-apples-joke.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+ref: Avoid unnecessary cloning of objects or arrays
diff --git a/.changeset/hip-worms-relax.md b/.changeset/hip-worms-relax.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lazy-squids-draw.md b/.changeset/lazy-squids-draw.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export the canvasMutation function
diff --git a/.changeset/lemon-lamps-switch.md b/.changeset/lemon-lamps-switch.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+export eventWithTime for consumption by typescript code
diff --git a/.changeset/light-fireants-exercise.md b/.changeset/light-fireants-exercise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/mighty-ads-worry.md b/.changeset/mighty-ads-worry.md
@@ -0,0 +1,5 @@
+---
+'rrweb': minor
+---
+
+Full overhawl of `video` and `audio` element playback. More robust and fixes lots of bugs related to pausing/playing/skipping/muting/playbackRate etc.
diff --git a/.changeset/mighty-bulldogs-begin.md b/.changeset/mighty-bulldogs-begin.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+Update `vite.config.ts` to account for all potential entry types.
diff --git a/.changeset/silver-pots-sit.md b/.changeset/silver-pots-sit.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/types': patch
+---
+
+Add `loop` to `mediaInteractionParam`
diff --git a/.changeset/silver-windows-float.md b/.changeset/silver-windows-float.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/smart-ears-refuse.md b/.changeset/smart-ears-refuse.md
@@ -0,0 +1,7 @@
+---
+'rrweb-snapshot': patch
+---
+
+Feat: Add 'isCustom' flag to serialized elements.
+
+This flag is used to indicate whether the element is a custom element or not. This is useful for replaying the :defined pseudo-class of custom elements.
diff --git a/.changeset/smart-geckos-cover.md b/.changeset/smart-geckos-cover.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Record `loop` on `<audio>` & `<video>` elements.
diff --git a/.changeset/smooth-papayas-boil.md b/.changeset/smooth-papayas-boil.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Capture stylesheets designated as `rel="preload"`
diff --git a/.changeset/spotty-bees-destroy.md b/.changeset/spotty-bees-destroy.md
@@ -0,0 +1,5 @@
+---
+'rrdom': patch
+---
+
+fix: scrolling may not be applied when fast-forwarding
diff --git a/.changeset/thin-vans-applaud.md b/.changeset/thin-vans-applaud.md
@@ -0,0 +1,6 @@
+---
+'rrweb-snapshot': patch
+'rrweb': patch
+---
+
+Snapshot performance when masking text: Avoid the repeated calls to `closest` when recursing through the DOM
diff --git a/.changeset/three-baboons-bow.md b/.changeset/three-baboons-bow.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+fix: protect against missing parentNode
diff --git a/.changeset/tidy-swans-repair.md b/.changeset/tidy-swans-repair.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🎈 perf(web-extension): conditional check in Player component
diff --git a/.changeset/tiny-candles-whisper.md b/.changeset/tiny-candles-whisper.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): typo
diff --git a/.changeset/twenty-goats-kneel.md b/.changeset/twenty-goats-kneel.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/wise-spiders-jog.md b/.changeset/wise-spiders-jog.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/types': patch
+---
+
+Fix type error when using `"moduleResolution": "NodeNext"`.
diff --git a/.changeset/witty-kids-talk.md b/.changeset/witty-kids-talk.md
@@ -0,0 +1,5 @@
+---
+'@rrweb/web-extension': patch
+---
+
+🐞 fix(web-extension): beforeunload logic
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,5 +21,6 @@ module.exports = {
   plugins: ['@typescript-eslint', 'eslint-plugin-tsdoc', 'jest', 'compat'],
   rules: {
     'tsdoc/syntax': 'warn',
+    '@typescript-eslint/prefer-as-const': 'warn',
   },
 };
diff --git a/.github/workflows/style-check.yml b/.github/workflows/style-check.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -62,7 +62,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
@@ -82,7 +82,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: lts/*
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

diff --git a/README.md b/README.md
@@ -27,6 +27,8 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
 
 [**🍳 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:
@@ -138,6 +140,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Yuyz0112</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -148,6 +151,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Yun Feng</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -158,6 +162,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>eoghanmurray</b></sub>
+        <br /><br />
       </a>
     </td>
     <td align="center">
@@ -168,6 +173,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
           alt=""
         />
         <br /><sub><b>Juice10</b></sub>
+        <br /><sub>open for rrweb consulting</sub>
       </a>
     </td>
   </tr>
@@ -226,5 +232,20 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
         <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>
diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -166,5 +166,10 @@ rrweb 主要由 3 部分组成：
         <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://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>
   </tr>
 </table>
diff --git a/docs/recipes/export-to-video.md b/docs/recipes/export-to-video.md
@@ -4,4 +4,4 @@ The event data recorded by rrweb is a performant, easy to compress, text-based f
 
 But if you really need to convert it into a video format, there are some tools that can do this work.
 
-Use [rrvideo](https://github.com/rrweb-io/rrvideo).
+Use [rrvideo](https://github.com/rrweb-io/rrweb/blob/master/packages/rrvideo/README.md).
diff --git a/docs/recipes/export-to-video.zh_CN.md b/docs/recipes/export-to-video.zh_CN.md
@@ -2,4 +2,4 @@
 
 rrweb 录制的数据是一种高效、易于压缩的文本格式，可以用于像素级的回放。但如果有进一步将录制数据转换为视频的需求，同样可以通过一些工具实现。
 
-使用 [rrvideo](https://github.com/rrweb-io/rrvideo)。
+使用 [rrvideo](https://github.com/rrweb-io/rrweb/blob/master/packages/rrvideo/README.zh_CN.md)。
diff --git a/guide.md b/guide.md
@@ -295,26 +295,27 @@ replayer.destroy();
 
 The replayer accepts options as its constructor's second parameter, and it has the following options:
 
-| key                 | default       | description                                                                                                                                                                                                                    |
-| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| speed               | 1             | replay speed ratio                                                                                                                                                                                                             |
-| root                | document.body | the root element of replayer                                                                                                                                                                                                   |
-| loadTimeout         | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
-| skipInactive        | false         | whether to skip inactive time                                                                                                                                                                                                  |
-| showWarning         | true          | whether to print warning messages during replay                                                                                                                                                                                |
-| showDebug           | false         | whether to print debug messages during replay                                                                                                                                                                                  |
-| blockClass          | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
-| liveMode            | false         | whether to enable live mode                                                                                                                                                                                                    |
-| insertStyleRules    | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
-| triggerFocus        | true          | whether to trigger focus during replay                                                                                                                                                                                         |
-| UNSAFE_replayCanvas | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
-| pauseAnimation      | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
-| mouseTail           | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
-| unpackFn            | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
-| logConfig           | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
-| plugins             | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
-| useVirtualDom       | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
-| logger              | console       | The logger object used by the replayer to print warnings or errors                                                                                                                                                             |
+| key                     | default       | description                                                                                                                                                                                                                    |
+| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| speed                   | 1             | replay speed ratio                                                                                                                                                                                                             |
+| root                    | document.body | the root element of replayer                                                                                                                                                                                                   |
+| loadTimeout             | 0             | timeout of loading remote style sheet                                                                                                                                                                                          |
+| skipInactive            | false         | whether to skip inactive time                                                                                                                                                                                                  |
+| inactivePeriodThreshold | 10000         | the threshold in milliseconds for what should be considered an inactive period                                                                                                                                                 |
+| showWarning             | true          | whether to print warning messages during replay                                                                                                                                                                                |
+| showDebug               | false         | whether to print debug messages during replay                                                                                                                                                                                  |
+| blockClass              | 'rr-block'    | element with the class name will display as a blocked area                                                                                                                                                                     |
+| liveMode                | false         | whether to enable live mode                                                                                                                                                                                                    |
+| insertStyleRules        | []            | accepts multiple CSS rule string, which will be injected into the replay iframe                                                                                                                                                |
+| triggerFocus            | true          | whether to trigger focus during replay                                                                                                                                                                                         |
+| UNSAFE_replayCanvas     | false         | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.**                                                                                                                                |
+| pauseAnimation          | true          | whether to pause CSS animation when the replayer is paused                                                                                                                                                                     |
+| mouseTail               | true          | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
+| unpackFn                | -             | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md)                                                                                                                                                 |
+| logConfig               | -             | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md)                                                                                                                             |
+| plugins                 | []            | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md)                                                                                                                                |
+| useVirtualDom           | true          | whether to use Virtual Dom optimization in the process of skipping to a new point of time                                                                                                                                      |
+| logger                  | console       | The logger object used by the replayer to print warnings or errors                                                                                                                                                             |
 
 #### Use rrweb-player
 

diff --git a/guide.zh_CN.md b/guide.zh_CN.md
@@ -159,7 +159,7 @@ setInterval(save, 10 * 1000);
 | collectFonts             | false              | 是否记录页面中的字体文件                                                                                                                                                              |
 | userTriggeredOnInput     | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                                  |
 | plugins                  | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                          |
-| errorHandler             | -                  | 一个可以定制化处理错误的毁掉函数，它的参数是错误对象。如果 rrweb recorder 内部的某些内容抛出错误，则会调用该回调。                                                                    |
+| errorHandler             | -                  | 一个可以定制化处理错误的回调函数，它的参数是错误对象。如果 rrweb recorder 内部的某些内容抛出错误，则会调用该回调。                                                                    |
 
 #### 隐私