Added scripts for saving and viewing snapshots #863
Conversation
| args: [ | ||
| '--disable-breakpad', | ||
| '--disable-default-apps', | ||
| '--disable-features=IsolateOrigins,site-per-process', |
There was a problem hiding this comment.
These flags are pretty important to allow loading of CORS resouces like images and CSS. A lot of capturing of styles and inline images depends on these args.
| } | ||
|
|
||
| // hack all images with img.crossOrigin="anonymous" before calling snapshot | ||
| // this is MANDATORY to capture images from websites that host images on CDNs |
There was a problem hiding this comment.
If we don't hack all the images with crossOrigin = 'anonymous', a LOT of websites with images won't work, the images will not be saved inline.
| await page.evaluate(`(function(){ | ||
| console.log('Restoring the snaphot...'); | ||
| ${rrCode}; | ||
| rrwebSnapshot.rebuild(${snap}, {doc: document}); |
There was a problem hiding this comment.
Alternatively I'm thinking it makes sense to process the snapshot and generate HTML in a local /tmp folder and point Pupeteer at the local file.
The advantage is you can click on some links in the temp page and then return back to the snapshot. Currently the page is restored in a blank tab, so if you click on anything, you just can't go back to the snapshot, it's just a blank page.
|
Hi @croqaz, thanks for sharing your scripts, very interesting to see how you are using rrweb-snapshots. And I agree that it might help people use rrweb-snapshots themselves. For consistency with The last thing missing to really makes it consistent with rrweb/packages/rrweb/package.json Line 11 in 072b81b |
|
Thank you for the comment @Juice10 , it sounds great and I implemented everything. |
|
@croqaz Thanks for the PR! Do you mind updating the script usage from If so, I can help with this change. |
I don't think I mind if that helps, but from I could look at the rest of the repl commands, they are located in packages/rrweb. |
|
@croqaz IMO, I think npm scripts are a set of scripts to maintain the package, like dev/test/build/etc. And in this use case, I think the snapshot/rebuild commands are good for doing some quick tests with the code, so I propose to move these kinds of commands to the category of If we create a tool called |
|
FYI: #1033 will get merged soon which will change the build command to |
|
Hi folks! I don't use rrweb for a very long time and I won't be working on this PR anymore. |
Hi. I wanted to share these 2 useful scripts that I actually use.
They can showcase how to use rrWeb, and the script for viewing snapshots is really useful in debug.
The scripts are kind of rough. I didn't want to use any special CLI flag parsing libraries, but maybe they are useful? Any suggestions are welcome.