Commit Graph

1049 Commits

Author SHA1 Message Date
Jimmy Liu
7e8dcdb11d Fix muted false -> true not being set 2023-01-06 18:43:11 +08:00
Justin Halsall
a220835eeb Fix: Post message can break cross origin iframe recording (#1053) 2022-11-16 21:25:36 +08:00
Yanzhen Yu
59a1e4f7d9 fix @rrweb prefix package access 2022-11-16 14:57:54 +08:00
Yanzhen Yu
7bb68625e3 chore(release): publish new version
- rrdom-nodejs@0.1.7
 - rrdom@0.1.7
 - rrweb-player@1.0.0-alpha.4
 - rrweb-snapshot@2.0.0-alpha.4
 - rrweb@2.0.0-alpha.4
 - @rrweb/types@2.0.0-alpha.4
2022-11-16 13:12:31 +08:00
Justin Halsall
2a80949948 Cross origin iframe support (#1035)
* Add `recordCrossOriginIframe` setting

* Set up messaging between iframes

* should emit full snapshot event from iframe as mutation event

* this.mirror was dropped on attachIframe

* should use unique id for child of iframe

* Cross origin iframe recording in `yarn live-stream`

* Root iframe check thats supported by firefox

* Live stream: Inject script in all frames

* Record same origin and cross origin iframes differently

* Should map Input events correctly

* Turn on other tests

* Fix compatibility with newer puppeteer

* puppeteer vs 12 seems stable without to many changes needed

* normalize port numbers in snapshots

* Handle scroll and ViewportResize events in cross origin iframe

* Correctly map cross origin mutations

* Map selection events for cross origin iframes

* Map canvas mutations for cross origin iframes

* Update snapshot to include canvas events

* Skip all meta events

* Support custom events as best we can in cross origin iframes

* Use earliest version of puppeteer that works with cross origin live-stream

* Map mouse/touch interaction events

* Update snapshots for correctly mapped click events

* Tweak tests for new puppeteer version

* Map MediaInteraction correctly for cross origin iframes

* Make tests consistent between high and low dpi devices

* Make test less flaky

* Make test less flaky

* Make test less flaky

* Make test less flaky

* Add support for styles in cross origin iframes

* Map traditional stylesheet mutations on cross origin iframes

* Add todo

* Add iframe mirror

* Get iframe manager to use iframe mirrors internally

* Rename `IframeMirror` to `CrossOriginIframeMirror`

* Setup basic cross origin canvas webrtc streaming

* Clean up removed canvas elements

* reset style mirror on new full snapshot

* Fix cross origin canvas webrtc streaming

* Make emit optional

* Run tests on github actions

* Upload image artifacts from failed tests

* Use newer github actions

* Test: hopefully adding more wait will fix it

* add extra wait

* Fix image snapshot tests

* Make tests run with new puppeteer version

* upgrade eslint-plugin-jest

* Chore: Remove travis ci as ci's running on github actions

* Chore: Support recording cross origin iframe in repl

* Force developers to update the cross origin iframe mapping when adding new events

https://github.com/rrweb-io/rrweb/pull/1035#discussion_r1012516277

* Document cross origin iframe recording

* Docs: cross origin iframes recording methods

* Docs: AI translated, cross origin iframe recording

* rename getParentId to getId

* Migrate to @rrweb/types

* Run on pull request

* doc: improve Chinese doc

* Rename `parentId` to `Id`

Co-authored-by: Mark-Fenng <f18846188605@gmail.com>
2022-11-16 13:11:11 +08:00
luocongqiu
a9fffb3bc0 shadow root use the correct dom in iframe (#1037)
Co-authored-by: luocq3 <luocq3@asiainfo.com>
2022-11-13 16:18:58 +08:00
Justin Halsall
fdb7135fbe Fix: scrolling on elements being is ignored (#1029)
In certain cases when scrollLeft is being set, but the value doesn't change. Then scrollTop is also ignored, even if that value was changed.
In this case we use the `scrollTo` api as it doesn't have that issue.
2022-11-12 16:03:30 +08:00
Justin Halsall
9bbc3e0073 Fix: Capture css background-clip: text with browser prefix (#1047) 2022-11-12 16:02:30 +08:00
Justin Halsall
75e2280bf6 Add rrweb-player readme (#1050)
* Add rrweb-player readme

* Apply formatting changes
2022-11-12 14:02:03 +08:00
MF
e08d03988f fix CI error (#1045)
* fix CI error

* change the CI triggering event to pull_request
2022-11-07 12:54:36 +08:00
MF
1990524ebb fix: bug when handling shadow doms (#1041)
On the website https://mixpanel.com/project/2195193/view/139237/app/dashboards#id=3679845, the bottom chart makes the recorder crash (infinite loop)
2022-11-07 09:12:52 +08:00
Justin Halsall
98e71cd0d2 Replace travis ci with github actions (#1043) 2022-11-04 17:26:44 +08:00
Justin Halsall
ad9bc3ed19 Chore: Move most types from rrweb to @rrweb/types package (#1031)
* Chore: Add move most types from rrweb to @rrweb/types package

* Split off type imports

* Split off type import to its own line

* Get vite to generate type definitions

* Apply formatting changes

* noEmit not allowed in tsconfig, moved it to build step

* Align version of @rrweb/types with main rrweb package

Based on @mark-fenng's comments https://github.com/rrweb-io/rrweb/pull/1031/files#r1002298176

* Move up keywords
2022-11-04 17:25:15 +08:00
fukang wang
5012b1eb60 fix: wrappedEmit is not a function (#1034)
Co-authored-by: wangfukang <wangfukang@kuaishou.com>
2022-11-01 08:27:30 +08:00
DexxDing
bdd89400d2 Implement: Inactive activity indicator on progress bar (#1039)
* update utils.ts: add a tool function to detect inactive periods

* update Controller.svelte: add a fixed div element as an indicator

* update Controller.svelte: add one blank space at the end

* update Controller.svelte: add a variable inactivePeriods and use util function to get inactive periods

* update Controller.svelte: add width property for inactive activity indicators

* update Controller.svelte: combine calculation value with indicator UI

* update utils.ts: fix error https://github.com/HurricaHjz/rrweb_2120_ga_3/pull/5#discussion_r1008677230 and add comments

update Controller.svelte: apply Zihan's suggestion https://github.com/HurricaHjz/rrweb_2120_ga_3/pull/5#discussion_r1008678403

* update Controller.svelte: make the color of indicator customizable

update index.d.ts: add type definition for the color option

Co-authored-by: u7149141 <fengyun5264@outlook.com>
Co-authored-by: Jerry Zhang <u7305891@anu.edu.au>
Co-authored-by: fengyun5264 <115444501+fengyun5264@users.noreply.github.com>
Co-authored-by: Zihan Meng <u7354208@anu.edu.au>
Co-authored-by: HurricaHjz <105645379+HurricaHjz@users.noreply.github.com>
Co-authored-by: u6924169 <u6924169@anu.edu.au>
Co-authored-by: Majia0712 <55265314+MengZihan712@users.noreply.github.com>
2022-10-31 22:17:35 +08:00
Majia0712
2286c11912 Update Player.svelte: fix the bug. (#1028)
The progress bar and controls now can be displayed under the fullscreen mode.
2022-10-17 22:15:43 +08:00
HurricaHjz
ae643f4c48 Fix #972 [Docs]: Add Readme.md to packages/rrweb (#1025)
* Create README.md

Copy the README.md from source folder, change link dependencies

* Update README.md

Fix the root directory reference

* Update README.md

* Update README.md

fix the typo

* Update README.md: formatting using prettier
2022-10-17 18:16:40 +08:00
Samuel Berthe
1ec4413137 doc: improve contributor experience (#1024) 2022-10-16 13:41:04 +08:00
MF
7edfefe680 fix: recording bug in youtube and bitbucket (#1020)
when getting shadow host elements, the anchor element <a> also has a host property as a string. This unexpected value can  crash recorder
2022-10-12 20:51:23 +08:00
Eoghan Murray
87aa3b6a3d Ignore noisy webgl params (#1016)
* `isContextLost` is particularly noisy, being called almost constantly by e.g. Figma to check whether there's a need to re initialize a canvas

Juice10: We could perhaps look at 5cd49f6cbc/lib/lib.dom.d.ts (L14578)  via https://stackoverflow.com/questions/60150251/how-to-import-an-interface-from-lib-dom-d-ts

* Apply formatting changes

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
2022-10-08 10:28:01 +08:00
Eoghan Murray
20ad416d9b prototype here does not refer to the correct WebGLRenderingContext … (#1013)
* `prototype` here does not refer to the correct WebGLRenderingContext when there are multiple being patched - all were referring to the same one meaning that variables weren't being indexed correctly as `canvasVarMap` in serialize-args.ts was only seeing a single context

If you revert the change from `prototype` to `this` from this commit, you'll get the following failure in the new test added in this commit:

   @@ -199,11 +199,11 @@
                "property": "bindBuffer",
                "args": [
                  34962,
                  {
                    "rr_type": "WebGLBuffer",
    -               "index": 0
    +               "index": 1
                  }
                ]
              },

This is because the 'confound' canvas was populating a single entry in the canvasVarMap so when 'myCanvas' starts populating, there is already an entry (which doesn't exist on the replay side as the 'confound' canvas was never emitted)

* Update packages/rrweb/test/integration.test.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* Update packages/rrweb/test/html/canvas-webgl-shader.html

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-10-05 11:52:19 +08:00
Justin Halsall
9de0de2cc5 Add maxScale to rrwebPlayer types and add docs to others (#1014) 2022-10-04 14:27:53 +08:00
Yanzhen Yu
e86d482ffd chore(release): publish new version
- rrdom-nodejs@0.1.6
 - rrdom@0.1.6
 - rrweb-player@1.0.0-alpha.3
 - rrweb-snapshot@2.0.0-alpha.3
 - rrweb@2.0.0-alpha.3
2022-09-30 14:16:57 +08:00
Justin Halsall
6f44bb72a1 Call afterAppend for mutations and top level elements (#1012) 2022-09-30 14:15:24 +08:00
MF
55ebce7337 Fix inline link elements bug (#995)
* fix: bug when inlined link elements

* test: update snapshot for test cases

* apply Justin's review suggestions

1. make Mirror's replace function act the same with the original one when there's no existed node to get replaced.
2. when replacing with the link/style elements, keep their existing attributes to prevent potential bugs
2022-09-30 14:14:35 +08:00
Yun Feng
3809060684 feat: add support for recording and replaying adoptedStyleSheets API (#989)
* test(recording side): add test case for adopted stylesheets in shadow doms and iframe

* add type definition for adopted StyleSheets

* create a StyleSheet Mirror

* enable to record the outermost document's adoptedStyleSheet

* enable to serialize all stylesheets in documents (iframe) and shadow roots

* enable to record adopted stylesheets while building full snapshot

* test: add test case for mutations on adoptedStyleSheets

* defer to record adoptedStyleSheets to avoid create events before full snapshot

* feat: enable to track the mutation of AdoptedStyleSheets

* Merge branch 'fix-shadowdom-record' into construct-style

* fix: incorrect id conditional judgement

* test: add a test case for replaying side

* tweak the style mirror for replayer

* feat: enable to replay adoptedStyleSheet events

* fix: rule index wasn't recorded when serializing the adoptedStyleSheets

* add test case for mutation of stylesheet objects and add support for replace & replaceSync

* refactor: improve the code quality

* feat: monkey patch adoptedStyleSheet API to track its modification

* feat: add support for checkouting fullsnapshot

* CI: fix failed type checks

* test: add test case for nested shadow doms and iframe elements

* feat: add support for adoptedStyleSheets in VirtualDom mode

* style: format files

* test: improve the robustness of the test case

* CI: fix an eslint error

* test: improve the robustness of the test case

* fix: adoptedStyleSheets not applied in fast-forward mode (virtual dom optimization not used)

* refactor the data structure of adoptedStyleSheet event to make it more efficient and robust

* improve the robustness in the live mode

In the live mode where events are transferred over network without strict order guarantee, some newer events are applied before some old events and adopted stylesheets may haven't been created.
Added a retry mechanism to solve this problem.

* apply Yanzhen's review suggestion

* update action name

* test: make the test case more robust for travis CI

* Update packages/rrweb/src/record/constructableStyleSheets.d.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* Update packages/rrweb/src/record/constructableStyleSheets.d.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* apply Justin's review suggestions

add more browser compatibility checks

* add eslint-plugin-compat and config

* fix record test  type errors

* make Mirror's replace function act the same with the original one when there's no existed node to replace

* test: increase the robustness of test cases

* remove eslint disable in favor of feature detection

Early returns aren't supported yet unfortunately, otherwise this code would be cleaner https://github.com/amilajack/eslint-plugin-compat/issues/523

* Remove eslint-disable-next-line compat/compat

* Standardize browserslist and remove lint exceptions (#1010)

* test: revert deleting virtual style tests and rewrite them to fit the current code base

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-09-29 14:40:13 +08:00
Justin Halsall
23e3a73bf3 bugfix: Sort attributes to make rr_* attributes handled last (#970)
* Sort attributes to make `rr_*` attributes handled last

`rr_dataURL` overwrites `src` attribute, because of this we need to evaluate `rr_dataURL` last so it doesn't accidentally get overwritten again.

* Update packages/rrweb-snapshot/src/rebuild.ts

* Refactor handling of rr_* attributes

Be a little more strict when it comes attribute types
2022-09-27 00:12:29 +08:00
Justin Halsall
6f63cf1584 Make maximum scale configurable (#1006) 2022-09-27 00:10:19 +08:00
Justin Halsall
3924aafd61 Allow player to play a from-to range (#1007)
* Allow player to play a from-to range

And optionally trigger a callback or loop

* Update packages/rrweb-player/src/Controller.svelte
2022-09-27 00:09:39 +08:00
Eoghan Murray
a16d506d0c Add play to live-mode.md (#1009)
* Update live-mode.md

`play`  is superior in the case that there are existing events as it will utilize `discardPriorSnapshots` to skip unnecessary things.

* Apply formatting changes

* Update live-mode.md

tweak

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
2022-09-26 21:44:18 +08:00
Yanzhen Yu
58cd78799b chore(release): publish new version
- rrdom-nodejs@0.1.5
 - rrdom@0.1.5
 - rrweb-player@1.0.0-alpha.2
 - rrweb-snapshot@2.0.0-alpha.2
 - rrweb@2.0.0-alpha.2
2022-09-22 20:11:24 +08:00
Eoghan Murray
c619a59d76 Fix that addAction wouldn't have any effect without a stop and start (#1001)
* Fix that `addAction` wouldn't have any effect without a stop and start - noticed during live mode

* Remove `addActions` as it has a bug-causing replacement of `this.actions` - refactor to reuse `addAction` and add a `push` fast-track to this function for the common case of adding actions in the correct order

* Apply formatting changes

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
2022-09-22 20:03:16 +08:00
Justin Halsall
08ab7ab452 re-use live mode config - and improve docs on how to start liveMode (#1003)
* Use config.liveMode to turn on liveMode in the timer

* Discussion of `startLive(1500)` was incorrect as startLive is based on timestamps, not playback offsets.  Also reorder to introduce `addEvent` earlier

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2022-09-17 14:40:15 +08:00
何遇
bac1d7b048 feat: add dataURLOptions parameter control canvas image format and quality (#967)
* feat: record add dataURLOptions parameter control canvas image format and quality

* 解决 build failed

* Update docs/recipes/canvas.md

* Apply formatting changes

* Update canvas-manager.ts

Fix the error caused when I resolved the merge conflict

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
2022-09-17 12:43:43 +08:00
Yun Feng
96b7466465 fix duplicate shadow doms in the recorder (#1002)
* fix: some shadow doms are observed multiple times and cause duplicate elements in the replayer

* fix: in the live mode, the page https://bugs.chromium.org/p/chromium/issues/detail?id=1352333 has duplicate shadow doms in the replayer
2022-09-17 12:41:44 +08:00
fukang wang
60072666d7 fix: reset fns when when stopping record (#962)
Co-authored-by: wangfukang <wangfukang@kuaishou.com>
2022-09-17 12:40:32 +08:00
fukang wang
ce6019d274 feat: support media playbackRate (#1000)
Co-authored-by: wangfukang <wangfukang@kuaishou.com>
2022-09-15 23:05:10 +08:00
fukang wang
a9a255931f fix: add mutation lost in slimDOMOptions (#994)
* fix: add mutation lost in slimDOMOptions

* fix: slimDOMOptions-mutation-lost

Co-authored-by: wangfukang <wangfukang@kuaishou.com>
2022-09-15 23:02:10 +08:00
Justin Halsall
a8478f1da4 [Plugin] Live stream canvas via webrtc (#976)
* inline stylesheets when loaded

* set empty link elements to loaded by default

* Clean up stylesheet manager

* Remove attribute mutation code

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/scripts/repl.js

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/src/record/index.ts

* Add todo

* Move require out of time sensitive assert

* Add waitForRAF, its more reliable than waitForTimeout

* Remove flaky tests

* Add recording stylesheets in iframes

* Remove variability from flaky test

* Make test more robust

* Fix naming

* Add test cases for inlineImages

* Add test cases for inlineImages

* Record iframe mutations cross page

* Test: should record images inside iframe with blob url after iframe was reloaded

* Handle negative ids in rrdom correctly

When iframes get inserted they create untracked elements, both on the dom and rrdom side.
Because they are untracked they generate negative numbers when fetching the id from mirror.
This creates a problem when comparing and fetching ids across mirrors.
This commit tries to get away from using negative ids as much as possible in rrdom's comparisons

* Update packages/rrdom/src/diff.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Start unserialized nodes at -2

This way we don't accidentally think of them as mirror misses

* Set unserialized id starting number at -2

* Remove duplication

* Use turbo instead of lerna

* Skip benchmark as it is unreliable when executed in parallel

* Strip port number from serialization, it can vary

* Add settimeout to virtual dom test

* Remove console.log and refactor blob:url serialization

* Include references in tsconfig to indicate which monorepo packages are being used

* Add stream setup

* Migrate project to es module

* Add reference to rrweb from rrdom

* Move jest config to ESM

* Setup basic WebRTC canvas streaming

* Cleanup and refactor WebRTC streaming

* Remove ? which isn't propper javascript

* Yarn lock

* Remove webrtc code from rrweb

* Add plugin hooks

Record/Replay plugins
`.getMirror` exposes the mirror to plugins

Replay plugins
`.onBuild` called whenever a node was added to the dom

* Expose plugins with server

* Use unminified version for tests

* Don't include simple-peer in rrweb main project

* Add canvas webrtc plugin

Streams contents of canvas via webrtc

* ignore tsconfig.tsbuildinfo

* Cleanup unused code

* type definition files are no longer committed

* Devtools off by default

* Extract .css into its own file

* Refactor plugin apis and fix multi canvas streaming support

* Add readme to rrweb canvas webrtc plugin

* Reference canvas-webrtc plugin in documentation

* Forbidden non-null assertion

* Remove linting of each project, yarn lint:report will do this

* Remove test code

* Cut down line length

* fix CI failure and improve the zh_CN doc

* Update packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Cleaner styling of replay

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Clean up stream.js based on @Mark-Fenng's feedback

* Remove duplicate send

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
2022-09-15 11:24:05 +08:00
dbseel
49d143f777 Ensure positions has length before referencing (#998) 2022-09-15 11:23:38 +08:00
luocongqiu
7be26b07eb fix: iframe input hook (#991)
* fix: iframe input hook (#990)

* Update observer.ts

* format code with prettier

* format all code with prettier

Co-authored-by: luocq3 <luocq3@asiainfo.com>
Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
2022-09-09 11:25:21 +08:00
Yun Feng
31890f0021 fix error for prettier action (#992)
* create a bait error for prettier

* refactor github action config

* Apply formatting changes

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
2022-09-09 00:42:34 +08:00
luocongqiu
6eaec0424d fix: Iframe replay fails after the second full snapshot #983 (#984) 2022-09-08 21:51:39 +08:00
Yun Feng
e7fdf53366 fix: can't record shadow root's children except the last one (#956)
* fix: can't record shadow root's children except the last one

* remove unnecessary type cast
2022-09-07 13:35:55 +08:00
Yun Feng
f1b5cb2738 CI: add a prettier GitHub action to format code automatically (#988)
* CI: add a prettier GitHub action to format code automatically

* improve GitHub Action config and format some files

* Apply formatting changes

* CI: make the prettier action a standalone action

* Apply formatting changes

* CI: add push as new trigger event

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
2022-09-06 09:38:43 +08:00
dbseel
5ba933cce3 isBlocked factors in the selector (#894)
* isBlocked factors in the selector

* Ensure contains parameter is a node

* Fix blockSelector blocking for closest nodes

* Fix integration test

* adding ignoreCSSAttributes to ignore the addition of certain css attributes

* tested ignoreCSSAttributes

* Update test snapshot

* swapped the wrapping of htmlelement to be element

* Fix linter errors

* Address MR feedback

* Rebase

Co-authored-by: Filip <filipslatinac@gmail.com>
2022-08-30 13:27:24 +08:00
何遇
ac7935e378 fix: record canvas by fps when blockClass is RegExp (#966)
* fix: Fixed a bug where FPSObserver cannot record Canvas when blockClass is a regular expression

* Update packages/rrweb/src/record/observers/canvas/canvas-manager.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-08-27 09:04:26 +08:00
Justin Halsall
e0ca9158f8 Create CONTRIBUTING.md (#969) 2022-08-22 20:36:31 +08:00
Justin Halsall
5f3e027604 Create CODE_OF_CONDUCT.md (#968) 2022-08-22 20:35:51 +08:00
Yun Feng
1fb1102eba add more questions for issue template (#965) 2022-08-21 16:36:06 +08:00