7 ms·

Show HN: Open source JavaScript library to record and replay the web

353 points by yz-yu 8y ago

randex 8y ago
This is not working on replaying opening select elements.
welder 8y ago
This is similar to Heap's Identify [1]. Main difference is Heap focuses on metrics while this looks to be for debugging and UX. Any plans for a heatmap feature built-in or third party? [1]: https://docs.heapanalytics.com/docs/using-identify https://docs.heapanalytics.com/docs/using-identify
sjroot 8y ago
I played with the examples and I am extremely impressed. I couldn't tell at all that I was being recorded; I figured the examples would just be videos of people interacting with those pages. The speed-up feature is very neat too. Very good work. I am actually a little surprised something like this is open source.
js4ever 8y ago
Interesting, seems like the core tech of smartlook / hotjar
- ilrwbwrkhv 8y ago
  ya ill stop my hotjar subscription next month and use this. ill save over 500 dollar every month
  - terrycody 8y ago
    wait, call me dumb or whatever, but what this tool use for? I can't think of any usage, any examples?
yotapan 8y ago
Cool, I'll put that on my website!
yz-yu 8y ago
Hi, hackers, the author here. Since I've seen some people are talking about the open source idea and comparing rrweb to some commercial products, I'd like to share a blog post about the vision of rrweb. http://www.myriptide.com/rrweb-introduction/ http://www.myriptide.com/rrweb-introduction/ Also, you will know about how rrweb works in this post.
- js4ever 8y ago
  Amazing, I planned to work on something similar in 2019 for our SaaS, you just saved me few days / weeks of work :) Thanks
- no1youknowz 8y ago
  Thanks for open sourcing your work. I had already built something similar to this and other commercial products, but in jQuery. Really interested to see how this compares. I did see the IE11 issue. Are there any thoughts on what can be implemented for a fallback?
  - yz-yu 8y ago
    I know there is some MuationObserver(which rrweb used to observe DOM update) API's shim library, but not sure the impact on performance. BTW, rrweb is also a project to explore the power of modern browser, so IE issues may not be considered in a high priority.
- sauravt 8y ago
  May I know what open source license is the project under?
  - yz-yu 8y ago
    MIT https://github.com/rrweb-io/rrweb/blob/master/package.json#L30 https://github.com/rrweb-io/rrweb/blob/master/package.json#L...
    - insomniacity 8y ago
skilled 8y ago
This looks awesome! Does anyone have recommendations for a tool that can do this but also let me save the video? Preferably, below 100MB per 5sec recording... I mean, come on, how smooth is this library?
hero76 8y ago
neat. include that blog link in the readme
marksomnian 8y ago
Looks really cool, but I find myself thinking about the privacy implications of using this, especially by default. Even if the user gives consent, it still implies recording every single mouse movement and keystroke on the site. Has this been normalised? Is this the new default? Food for thought.
- hardwaresofton 8y ago
  From what I understand rrweb is not introducing or hijacking any browser functionality -- it's just using what's there. Whatever boundaries are being crossed should be considered already crossed, because firms that want this data don't have to work that hard to get it (or they can just buy some off the shelf tool). If the privacy implications make us uncomfortable we might want to start not sharing this kind of information from browsers by default (this seems unlikely) or at least introducing some sort of browser-level controls. Unfortunately, this represents a lot of work and worries about breaking backwards compatibility contrasted with very little gain for browsers that don't pride themselves on being good for privacy(Chrome).
- deleted 8y ago
  [deleted]
- hjek 8y ago
  RMS has been writing about the issue of non-free session recording scripts in The JavaScript Trap[0]: > In addition to being nonfree, many of these programs are malware because they snoop on the user. Even nastier, some sites use services which record all the user's actions while looking at the page.[1] The services supposedly “redact” the recordings to exclude some sensitive data that the web site shouldn't get. But even if that works reliably, the whole purpose of these services is to give the web site other personal data that it shouldn't get. [0]: https://www.gnu.org/philosophy/javascript-trap.html https://www.gnu.org/philosophy/javascript-trap.html [1]: https://freedom-to-tinker.com/2017/11/15/no-boundaries-exfiltration-of-personal-data-by-session-replay-scripts/ https://freedom-to-tinker.com/2017/11/15/no-boundaries-exfil...
  - SquareWheel 8y ago
deforciant 8y ago
Even though I do agree that the total recording of sessions is not nice, such tools can be extremely important during early stage testing with your web app's UX. Especially for solo founders who don't have colleagues to tell them that they can't figure out how to use your app :) Nice way would be to do some recording for a week or so. Get any sessions that obviously were quite long and the user didn't achieve anything. Go through them and try improving UX so the user won't get stuck there the next time.
pklee 8y ago
Very cool. So much better than loading youtube videos. Would be great if there is a way to annotate parts of it. Apologies if it is a feature creep :(
- yz-yu 8y ago
  Great idea! As I said on the landing page, demonstrate is an interesting use case for rrweb and the annotation feature will make it even better.
unao 8y ago
really nice! Few years ago, I created something very similar when working for validately.com - user testing company. The solution was tailored for our needs and was quite unique and rather sophisticated. Below few main points: - automatic injection of recording script by proxing original site / app via our domain (optionally user's could have inject the script by themselves) - using iframe to serve the recorded page in order to preserve context and allow to display content on top of the page - audio recording - broadcasting in real-time - storing all assets from a recording (images / stylesheets) to make playing back independent from original urls Not everything was perfect and there were always something to improve. Some sites did not work at all due to technical limitations. But the technology was good enough so the company could grow and transit to webrtc based solution. I am very grateful for this rare opportunity as the project taught me insane amount of useful stuff. Would love to work on something similar again.
deleted 8y ago
[deleted]
niffy 8y ago
How does this compare against something like Full Story?
- junetic 8y ago
  you can basically build fullstory with this library!
yuchi 8y ago
Very nice project. May I suggest to add "Chinese version" (in english) to the link Chinese in the Readme?
jagracey 8y ago
Great work yz-yu. Hope you've learned a lot- I've personally found the session replay space to be incredibly rewarding. However, as a session replay industry competitor and a former security researcher for most industry players, I caution anyone thinking of using a side-project like this on production applications to proceed slowly with care. Security and Privacy are extremely hard to get right here. The tricky thing about session replay analytics is that attackers have a huge attack vector, and compromise means gaining a treasure trove of all user data. The nature of replay is in a way a form of XSS. Modern security features help (like CSPs, iframe Sandbox attribute) but browser changes can cause issues. Some of the challenges: - CSPs can often be bypassed using Google API libraries, <Object/>, <SVG> - Blacklisting <SCRIPT/> tags can often be bypassed with an XML namespace - CSS based data or password exfiltration. - Clickjacking, "data:" urls etc. - Could you imagine a web request proxy server deploying Service Workers? - postMsg() from further nested frames Substantial work goes into sandboxing replay environments and limiting PII. Defense in depth is particularly important here. Enterprise level research, auditing, monitoring and care should be taken seriously.
- yz-yu 8y ago
  Definitely learned a lot and enjoy the process and thanks for your really important suggestions. Quote from my introduction blog post: === Today we already have some commercial session replay products like Logrocket, Fullstory, etc. If you are just looking for a ready-to-use tool and would like to pay for its service, I would recommend you to use the above products, because they have well-tested backend services that can store the data for you and perform some higher order features. === So I don't think rrweb is a competitor of these commercial products. Actually, I would like to see rrweb grows into a base of many commercial products in the future, which means it handles most of the privacy and security issues, so the other developers can build many fancy projects base on it without spending time on the hard part again and again.
  - dang 8y ago
    (Sorry your account was rate-limited! New accounts are subject to that restriction but it's definitely not intended for cases like this. I've marked your account legit so it won't happen again.)
junetic 8y ago
This is so awesome that you made this open source. There's a bunch of companies that basically use this tech and making lots of $$. We're actually working on a user testing service and currently using a chrome extension to record video: https://www.userlook.co https://www.userlook.co May consider switching and using your library! Thanks for sharing this :)
deleted 8y ago
[deleted]
grezql 8y ago
will this work with MVC frameworks like Angularjs, Vue and ReactJS? I checked the DOM of a angularjs app and when I enter something in the input field, its not appearing in the DOM at all.
Walkman 8y ago
This is NOT Open Source in a way you think it is yet, because the repo doesn't have a LICENSE attached to it, so the owner own every right and you are not allowed to sell it or do whatever you want with it.
- insomniacity 8y ago
  Correct - does fair use cover even running software without a license? This wouldn't pass the first hurdle at my dayjob...
echelon 8y ago
You should offer a commercial and open source version. The commercial service could provide a few extra features at a modest price point, but support development of the open source platform. Perhaps it could pay your bills and be a cheaper alternative to the existing expensive commercial offerings. I could see you taking a big bite out of their market if you keep it up.
sbr464 8y ago
Regarding security & privacy of products like these, I think it would be interesting to not capture any data not included within the app's codebase by default, instead of relying on any kind of redaction steps. For example, A table and interacting with a table, the cells would just be filler elements. Form field data just wouldn't be captured, contents unique to any record on a page would be filled with sample data. That way you get to see how someone interacts with a page, but not any context/personal information. I think relying on sensible defaults or redacting data is a lost cause and puts the trust/responsibility in the wrong hands. Some companies may care about redaction while others don't prioritize it.

353 points by yz-yu 8y ago

This is not working on replaying opening select elements.

This is similar to Heap's Identify [1]. Main difference is Heap focuses on metrics while this looks to be for debugging and UX. Any plans for a heatmap feature built-in or third party? [1]: https://docs.heapanalytics.com/docs/using-identify https://docs.heapanalytics.com/docs/using-identify

sjroot 8y ago

I played with the examples and I am extremely impressed. I couldn't tell at all that I was being recorded; I figured the examples would just be videos of people interacting with those pages. The speed-up feature is very neat too. Very good work. I am actually a little surprised something like this is open source.

js4ever 8y ago

Interesting, seems like the core tech of smartlook / hotjar

ilrwbwrkhv 8y ago
ya ill stop my hotjar subscription next month and use this. ill save over 500 dollar every month
- terrycody 8y ago
  wait, call me dumb or whatever, but what this tool use for? I can't think of any usage, any examples?

yotapan 8y ago

Cool, I'll put that on my website!

yz-yu 8y ago

Hi, hackers, the author here. Since I've seen some people are talking about the open source idea and comparing rrweb to some commercial products, I'd like to share a blog post about the vision of rrweb. http://www.myriptide.com/rrweb-introduction/ http://www.myriptide.com/rrweb-introduction/ Also, you will know about how rrweb works in this post.

js4ever 8y ago
Amazing, I planned to work on something similar in 2019 for our SaaS, you just saved me few days / weeks of work :) Thanks
no1youknowz 8y ago
Thanks for open sourcing your work. I had already built something similar to this and other commercial products, but in jQuery. Really interested to see how this compares. I did see the IE11 issue. Are there any thoughts on what can be implemented for a fallback?
- yz-yu 8y ago
  I know there is some MuationObserver(which rrweb used to observe DOM update) API's shim library, but not sure the impact on performance. BTW, rrweb is also a project to explore the power of modern browser, so IE issues may not be considered in a high priority.
sauravt 8y ago
May I know what open source license is the project under?
- yz-yu 8y ago
  MIT https://github.com/rrweb-io/rrweb/blob/master/package.json#L30 https://github.com/rrweb-io/rrweb/blob/master/package.json#L...
  - insomniacity 8y ago

skilled 8y ago

This looks awesome! Does anyone have recommendations for a tool that can do this but also let me save the video? Preferably, below 100MB per 5sec recording... I mean, come on, how smooth is this library?

hero76 8y ago

neat. include that blog link in the readme

marksomnian 8y ago

Looks really cool, but I find myself thinking about the privacy implications of using this, especially by default. Even if the user gives consent, it still implies recording every single mouse movement and keystroke on the site. Has this been normalised? Is this the new default? Food for thought.

hardwaresofton 8y ago
From what I understand rrweb is not introducing or hijacking any browser functionality -- it's just using what's there. Whatever boundaries are being crossed should be considered already crossed, because firms that want this data don't have to work that hard to get it (or they can just buy some off the shelf tool). If the privacy implications make us uncomfortable we might want to start not sharing this kind of information from browsers by default (this seems unlikely) or at least introducing some sort of browser-level controls. Unfortunately, this represents a lot of work and worries about breaking backwards compatibility contrasted with very little gain for browsers that don't pride themselves on being good for privacy(Chrome).
deleted 8y ago
[deleted]
hjek 8y ago
RMS has been writing about the issue of non-free session recording scripts in The JavaScript Trap[0]: > In addition to being nonfree, many of these programs are malware because they snoop on the user. Even nastier, some sites use services which record all the user's actions while looking at the page.[1] The services supposedly “redact” the recordings to exclude some sensitive data that the web site shouldn't get. But even if that works reliably, the whole purpose of these services is to give the web site other personal data that it shouldn't get. [0]: https://www.gnu.org/philosophy/javascript-trap.html https://www.gnu.org/philosophy/javascript-trap.html [1]: https://freedom-to-tinker.com/2017/11/15/no-boundaries-exfiltration-of-personal-data-by-session-replay-scripts/ https://freedom-to-tinker.com/2017/11/15/no-boundaries-exfil...
- SquareWheel 8y ago

deforciant 8y ago

Even though I do agree that the total recording of sessions is not nice, such tools can be extremely important during early stage testing with your web app's UX. Especially for solo founders who don't have colleagues to tell them that they can't figure out how to use your app :) Nice way would be to do some recording for a week or so. Get any sessions that obviously were quite long and the user didn't achieve anything. Go through them and try improving UX so the user won't get stuck there the next time.

pklee 8y ago

Very cool. So much better than loading youtube videos. Would be great if there is a way to annotate parts of it. Apologies if it is a feature creep :(

yz-yu 8y ago
Great idea! As I said on the landing page, demonstrate is an interesting use case for rrweb and the annotation feature will make it even better.

unao 8y ago

really nice! Few years ago, I created something very similar when working for validately.com - user testing company. The solution was tailored for our needs and was quite unique and rather sophisticated. Below few main points: - automatic injection of recording script by proxing original site / app via our domain (optionally user's could have inject the script by themselves) - using iframe to serve the recorded page in order to preserve context and allow to display content on top of the page - audio recording - broadcasting in real-time - storing all assets from a recording (images / stylesheets) to make playing back independent from original urls Not everything was perfect and there were always something to improve. Some sites did not work at all due to technical limitations. But the technology was good enough so the company could grow and transit to webrtc based solution. I am very grateful for this rare opportunity as the project taught me insane amount of useful stuff. Would love to work on something similar again.

deleted 8y ago

[deleted]

niffy 8y ago

How does this compare against something like Full Story?

junetic 8y ago
you can basically build fullstory with this library!

yuchi 8y ago

Very nice project. May I suggest to add "Chinese version" (in english) to the link Chinese in the Readme?

jagracey 8y ago

Great work yz-yu. Hope you've learned a lot- I've personally found the session replay space to be incredibly rewarding. However, as a session replay industry competitor and a former security researcher for most industry players, I caution anyone thinking of using a side-project like this on production applications to proceed slowly with care. Security and Privacy are extremely hard to get right here. The tricky thing about session replay analytics is that attackers have a huge attack vector, and compromise means gaining a treasure trove of all user data. The nature of replay is in a way a form of XSS. Modern security features help (like CSPs, iframe Sandbox attribute) but browser changes can cause issues. Some of the challenges: - CSPs can often be bypassed using Google API libraries, <Object/>, <SVG> - Blacklisting <SCRIPT/> tags can often be bypassed with an XML namespace - CSS based data or password exfiltration. - Clickjacking, "data:" urls etc. - Could you imagine a web request proxy server deploying Service Workers? - postMsg() from further nested frames Substantial work goes into sandboxing replay environments and limiting PII. Defense in depth is particularly important here. Enterprise level research, auditing, monitoring and care should be taken seriously.

yz-yu 8y ago
Definitely learned a lot and enjoy the process and thanks for your really important suggestions. Quote from my introduction blog post: === Today we already have some commercial session replay products like Logrocket, Fullstory, etc. If you are just looking for a ready-to-use tool and would like to pay for its service, I would recommend you to use the above products, because they have well-tested backend services that can store the data for you and perform some higher order features. === So I don't think rrweb is a competitor of these commercial products. Actually, I would like to see rrweb grows into a base of many commercial products in the future, which means it handles most of the privacy and security issues, so the other developers can build many fancy projects base on it without spending time on the hard part again and again.
- dang 8y ago
  (Sorry your account was rate-limited! New accounts are subject to that restriction but it's definitely not intended for cases like this. I've marked your account legit so it won't happen again.)

junetic 8y ago

This is so awesome that you made this open source. There's a bunch of companies that basically use this tech and making lots of $$. We're actually working on a user testing service and currently using a chrome extension to record video: https://www.userlook.co https://www.userlook.co May consider switching and using your library! Thanks for sharing this :)

deleted 8y ago

[deleted]

grezql 8y ago

will this work with MVC frameworks like Angularjs, Vue and ReactJS? I checked the DOM of a angularjs app and when I enter something in the input field, its not appearing in the DOM at all.

Walkman 8y ago

This is NOT Open Source in a way you think it is yet, because the repo doesn't have a LICENSE attached to it, so the owner own every right and you are not allowed to sell it or do whatever you want with it.

insomniacity 8y ago
Correct - does fair use cover even running software without a license? This wouldn't pass the first hurdle at my dayjob...

echelon 8y ago

You should offer a commercial and open source version. The commercial service could provide a few extra features at a modest price point, but support development of the open source platform. Perhaps it could pay your bills and be a cheaper alternative to the existing expensive commercial offerings. I could see you taking a big bite out of their market if you keep it up.

sbr464 8y ago

Regarding security & privacy of products like these, I think it would be interesting to not capture any data not included within the app's codebase by default, instead of relying on any kind of redaction steps. For example, A table and interacting with a table, the cells would just be filler elements. Form field data just wouldn't be captured, contents unique to any record on a page would be filled with sample data. That way you get to see how someone interacts with a page, but not any context/personal information. I think relying on sensible defaults or redacting data is a lost cause and puts the trust/responsibility in the wrong hands. Some companies may care about redaction while others don't prioritize it.