Commit Graph

157 Commits

Author SHA1 Message Date
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
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
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
Yun Feng
5f59f9171e feat: add a destroy function to destroy the whole player (#953)
* feat: add a destroy function to destroy the whole player

* doc: update guidance document

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

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

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-08-11 19:39:16 +08:00
Yun Feng
a0d53738f8 fix: errors when fast-forward selection events (#952) 2022-08-11 13:08:42 +08:00
Justin Halsall
fd85c79ea9 Handle negative ids in rrdom correctly + extra tests (#927)
* 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

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
2022-08-06 17:00:05 +08:00
Jinxing Lin
b2d56898a8 rrweb: add selection observer (#936)
* rrweb: add selection observer

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

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>

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

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>

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

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>

* remove: repeat updateSelection

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

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>

* remove: utils sample events

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
2022-08-06 16:59:42 +08:00
Yanzhen Yu
abc035fd00 chore(release): publish new version
- rrdom-nodejs@0.1.4
 - rrdom@0.1.4
 - rrweb-player@1.0.0-alpha.1
 - rrweb-snapshot@2.0.0-alpha.1
 - rrweb@2.0.0-alpha.1
2022-07-31 11:48:29 +08:00
Yun Feng
cb24aaf6aa add benchmark for replayer's fast-forward mode (#947)
* add benchmark for replayer's fast-forward mode

* add comments

* change the title

* build: make benchmark a seperate command
2022-07-31 11:45:57 +08:00
Yun Feng
f1b23ddccc fix: canvas data in iframe wasn't applied in the fast-forward mode (#944)
* fix: canvas data in iframe wasn't applied in the fastforward mode

* add more comments

* Update packages/rrdom/src/diff.ts

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

* apply Juice10's suggestion

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-07-31 09:01:04 +08:00
Yun Feng
aecaefbf45 chore: remove all typings, add them all to .gitignore file and update turbo.json (#949) 2022-07-31 08:38:22 +08:00
Eoghan Murray
b618f095df Remove typings files as these can be regenerated with npm run typings from their src/types.ts masters, and are an extra source of conflicts if they remain in git (#946) 2022-07-26 22:54:27 +08:00
Eoghan Murray
ba4bcbea8d Bump jsdom to latest version as was getting error TS2305: Module '"parse5"' has no exported member 'ElementLocation'. (#945) 2022-07-25 23:44:55 +08:00
Yun Feng
f03504a731 fix issue #933 (#942)
* fix: style not applied to polyfillled shadow dom

* test: add integration test for shadydom and @lwc/synthetic-shadow

* improve the implementation of function isNativeShadowDom

* apply lele0108's review suggestion
2022-07-22 20:36:43 +08:00
Yun Feng
999f1a5242 style: remove all tslint related comments (#934) 2022-07-22 20:33:41 +08:00
Yun Feng
8ad43254ff add special handling for undefined console content (#935) 2022-07-22 19:02:08 +08:00
Jimmy Liu
f3064c1f2d Fix href in <use> to not use absolute url (#938) 2022-07-16 14:51:56 +08:00
Yanzhen Yu
2d4dd22966 chore(release): publish new version
- rrdom-nodejs@0.1.3
 - rrdom@0.1.3
 - rrweb-player@1.0.0-alpha.0
 - rrweb-snapshot@2.0.0-alpha.0
 - rrweb@2.0.0-alpha.0
2022-07-10 15:51:45 +08:00
Yun Feng
83394c3db4 refactor: eliminate eslint errors (#920)
* refactor: eliminate eslint errors as many as I can

* refactor: fix more eslint errors in the record module

* LINT: fix @typescript-eslint/unbound-method

* LINT: fix all eslint errors in source code

* LINT: fix as many eslint warnings as possible

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2022-07-10 15:49:20 +08:00
Yun Feng
01612b7a75 update cssom package to rrweb self-owned package 'rrweb-cssom' (#925)
* test: update cssom package to rrweb self-owned package 'rrweb-cssom'

* style: remove outdated comments
2022-07-02 13:55:45 +08:00
Justin Halsall
d5d877e380 Inline stylesheets on load (#909)
* 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
2022-07-01 13:29:09 +08:00
Justin Halsall
a31e272bf2 Remove children of Document even if doc not in mirror (#923)
* Remove children of Document even if doc not in mirror

* fix flaky test

* Update packages/rrdom/test/diff.test.ts

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

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
2022-07-01 12:26:24 +08:00
Justin Halsall
c81e609d7b Lock yarn to 1.23.0 (#922)
* Lock yarn to 1.23.0

* fix flaky test

* Fix flaky tests
2022-06-30 23:20:26 +08:00
yz-yu
af8ed5513c unify typescript version and rollup plugins (#921) 2022-06-25 21:08:06 +08:00
yz-yu
74f553afc3 move browser-only rrdom features to the new rrdom package (#913) 2022-06-20 22:02:21 +08:00
Justin Halsall
058c4579b4 Speed up snapshotting of many new dom nodes (#903)
* Speed up snapshotting of many new dom nodes

By avoiding reflow we shave about 15-25% off our snapshotting time

* Improve newlyAddedElement docs

* Optimize needMaskingText by using el.closest and less recursion

* Serve all rrweb dist files

* Split serializeNode into smaller functions

Makes it easier to profile

* Slow down cpu enhance tracing on fast machines

* Increase timeout

* Perf: only loop through ancestors when they have something to compare to

* Perf: `hasNode` is cheaper than `getMeta`

* Perf: If parents where already checked, no need to do it again

* Perf: reverse for loops are faster

Because they only do the .lenght check once. In this case I don't think we'll see much performance gains if any

* Clean up code

* Perf: check ancestors once with isBlocked

* guessing this might fixes canvas test

* Update packages/rrweb/src/record/observers/canvas/webgl.ts

Co-authored-by: yz-yu <yanzhen@smartx.com>

* Fix #904 (#906)

Properly remove crossorigin attribute

* Bump minimist from 1.2.5 to 1.2.6 (#902)

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Co-authored-by: yz-yu <yanzhen@smartx.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2022-06-06 22:55:15 +08:00