9 ms·

Show HN: Time travel debugger for web development

681 points by jasonlaster11 5y ago

loganfsmyth 5y ago
Very excited to see what folks here think. Replay has been a wonderful project to work on so far.
theryanjduffy 5y ago
Engineer @ Replay here - If you're a console.log kind of developer (isn't everyone at least some of the time?), you should check this out. Imagine being able to add console.log() statements to code that already ran and seeing the results immediately! It's a bit mind blowing the first time you use it.
- _bohm 5y ago
  lol, now this is the kind of marketing that speaks to me
- mritchie712 5y ago
  Do you have a demo video of doing exactly this? I downloaded the app, it's unclear how to edit code that's already run.
  - kannanvijayan 5y ago
    The video next to "Print statements from the future" on the webpage shows a bit of it. You can click on the line-number next to a line of code to add a print at that location. If you hover over the line-number, it'll show you a count (exact and correct) of how many times that line of code hit during execution. Clicking on it adds a print log at that line with a default string. At that point, the console log in the left should change immediately to include a bunch of new entries with "Loading.." text that resolves to the text of each print statement. Clicking on the string allows you to replace it with an expression to be evaluated. The expression can include references to local scope variables, etc. If you edit the expression, the console entries for the prints go back to "Loading.." and the new values are resolved. The prints in the console are ordered in time sequence along with all the other events that can be shown there (regular console logs, mouse and keyboard and other events, etc.)
jasonlaster11 5y ago
Co-founder here. It feels incredible to be sharing Replay with all of you. It's been a labor of love the past five years! Replay started off as a simple experiment in what would happen if we added a step back button and rewind button to the Debugger. We quickly realized two things. First, nobody uses breakpoints. Second, being able to share is so much more powerful than being able to rewind. Here’s how Replay works today. Somebody on the team records a bug with the Replay Browser and shares the replay url with the team. From there, developers jump in and add print statements. The logs appear in the Console immediately so you don’t need to refresh and reproduce a thing. Over the past year we’ve talked to hundreds of users, recorded 2.5 million replays, and worked incredibly hard to ensure Replay would be fast, secure, and robust from the get go. Want to check it out? You can download Replay today. Can’t wait to hear what you think! Interested in learning more, here is our announcement blog post https://medium.com/replay-io/launching-replay-the-time-travel-debugger-for-the-web-f886f0897d38 https://medium.com/replay-io/launching-replay-the-time-trave...
- swyx 5y ago
  are there any public replays you can share so pple can get a feel of the product without downloading?
  - jasonlaster11 5y ago
    Yep! Tons on the site. Here's a Replay with an algolia search bug. Try adding a print statement in Hits.js! https://app.replay.io/recording/cf2da81f-3a74-45ba-9241-f6d4361a52f5 https://app.replay.io/recording/cf2da81f-3a74-45ba-9241-f6d4...
- maxmcd 5y ago
  How does it work? Are you making memory snapshots? Something higher level?
  - jasonlaster11 5y ago
    Long story short, we forked the major browsers so that when you record we can capture the browser input (OS Library calls). Brian walks through our approach here https://medium.com/replay-io/how-replay-works-5c9c29580c58 https://medium.com/replay-io/how-replay-works-5c9c29580c58
swyx 5y ago
That landing page looks right out of Bret Victor's time travel demos (https://www.youtube.com/watch?v=EGqwXt90ZqA https://www.youtube.com/watch?v=EGqwXt90ZqA, or http://worrydream.com/LearnableProgramming/ http://worrydream.com/LearnableProgramming/). Communicates the value instantly. Incredibly well done! IMO the most time consuming issue in triaging bug reports is reproducing them. Replay definitively solves the "can't repro this" problem.
- jasonlaster11 5y ago
  Thanks! Bret Victor has been my inspiration. Ever since I watch inventing on principle ten years ago, I knew this was what I wanted to build. In fact many folks on the team have a similar story. That's the crazy part about IoP for me. It's created a movement!
- jonbell 5y ago
  Replay’s designer here. Bingo! We’ve been iterating on our story for a year, and the “let’s refer to Learnable Programming” angle felt like a huge breakthrough. So glad it resonated with you, thanks for letting us know!
gavinray 5y ago
Through $DAYJOB, I happened to have a meeting with one of the founders of this company some time ago -- not about Replay, but about a "How do you do this" sort of question. After prying for technical details, Replay came up, and I asked to see it out of curiosity. Really blew my mind. Every once in a while a piece of technology comes around that doesn't quite have an equivalent. I could immediately see where being able to have your users or coworkers record bug reproductions or features and submit them in issues or PR's would save monumental amounts of time. Wishing Replay team best of luck, I was thoroughly impressed.
- hunterb123 5y ago
  > Every once in a while a piece of technology comes around that doesn't quite have an equivalent. I dunno, https://www.rrweb.io/ https://www.rrweb.io/ comes close (closer?) and it's open source. There's also other paid solutions like FullStory and LogRocket.
  - zeeg 5y ago
    I agree there's a lot of session replay style equivilents (and rrweb is great!), though what Replay is doing unfortunately cannot be done in production in the same way. In the ideal world this level of data could be extracted from production incidents without an individual running specialized software, but with the state of technology I'd say they're both aiming to solve different problems.
    - deleted 5y ago
      [deleted]
  - gavinray 5y ago
    I asked about this (whether it could be done as a browser extension) and the answer I was given was that the browser was required because they do things like hook syscalls and other close-to-the-metal stuff From: https://www.notion.so/How-Replay-works-cc65abf5eb11443586abb4aa04345985 https://www.notion.so/How-Replay-works-cc65abf5eb11443586abb... So if you can’t capture API calls directly, what do you do? You drop down one level and record the browser system calls. This probably sounds like a terrible idea. We started off with a simple 3 line JS program with one API call and one clock and instead of just recording these two calls, we’re now recording a program with millions of lines of C++ and the complexity of an Operating System. Yep! It’s crazy, but works, and it’s pretty awesome. So the nice thing about system calls is there are not too many of them and they don’t change that often. This means that instead of recording an API call directly, we can record the network engine’s system calls to open socket and process packets from the server. And by recording at this level, it’s possible to replay the website exactly as it ran before, with the same performance characteristics and everything else. It’s a little bit like putting your browser into “the Matrix” and tricking it into believing everything is normal, when in fact it is just running in a simulation.
parksy 5y ago
In my line of work I've found the most difficult issues to debug are asynchronous dependencies on API actions. How nicely does replay work with POST data, if I scrub back and forth will I retrigger POSTs or is the request/response captured and emulated in the replays? If replay handles this nicely then I'm very very interested in adding it to our workflows.
- loganfsmyth 5y ago
  Once a recording is made, you can jump around in it as much as you like. The network requests will only be made during the initial recording process as they would normally, and when debugging it will all be pulling the request/response data from the recording itself rather than querying the network.
  - parksy 5y ago
    That's a big selling point for me, props to the engineering team for accommodating this, I work mainly on integrations and the trickier bug reports are weird edge cases that involve a lot of getting specific descriptions of what happened and replicating it manually on a sandbox so as not to impact API calls, getting on the phone to talk through exactly what they're doing, asking for screenshots via email, clarifying conflicting understanding of in-house terminology etc. You know the story. Being able to get them to record the exact process and scrub through it at my leisure without having to worry about hammering APIs would be a massive timesaver, replication is about 90% of the time taken to fix a bug, while the fixes themselves are usually trivial. Not having to worry about accidentally replaying a bugged-out API call is a huge plus. In my case the major hurdle I can foresee is the majority of my enterprise-level clients use Windows and a brief look at the website says currently there's only Mac / Linux support for the replay browser. What's the timeline on Windows support? The only other thing I can think may be an issue is that the recordings are cloud-based and a lot of the clients I deal with are finnicky about exfiltration and governance, and would be a lot more comfortable self-hosting where possible. Is that possible or on the roadmap? This looks like a super useful tool to add to the toolbelt for sure, I would love to have all my clients using something like this to report issues. Nice work all!
bichiliad 5y ago
Having played with Replay already, I have to say it feels nothing short of magic. I can't tell you how much something like it would have made debugging weird issues in the depths of something like Webpack a whole lot easier.
CompuIves 5y ago
Replay has been amazing for me to debug hard to reproduce issues like live collaboration issues. You just record the bug, share it with others, place some console.logs (after the fact!) and scrub through the recording to see where things went wrong. Also nice side-effect is that it's amazing to explore other code-bases, just being able to put a console.log somewhere to see how often it's run when using an application is a lot of fun.
ShaneMcGowan 5y ago
How well does this play with something like Angular or React? I know there is a lot of internal logic going on in those apps
- jasonlaster11 5y ago
  Replay has native support for React DevTools so you can easily inspect the component tree, props, state, etc... High level, because Replay replays the browser session everything just works. Even I can understand Angular apps and i've never built one ;)
jassmith87 5y ago
We've been using Replay heavily here for the past 6-7 months and it's rapidly become the preferred way to do any form of debugging. Training our support staff to capture replays and submit them in tickets has made turn around time on bugs significantly faster.
throwaway59553 5y ago
You guys have a download button for Mac OS X (apple logo), and you have a button with the Windows logo. But there isn't a windows version yet as the pop-up tells me. And why isn't there a linux button, if you actually have a linux version?
- jasonlaster11 5y ago
  The button is platform specific. So if you're on linux, it should show the linux icon. Windows support is on the way. It just entered alpha two weeks ago and we're targeting Beta early october. We record low level windows os calls and replay them on linux in a virtualized environment. Frankly thrilled it works at all :)
  - throwaway59553 5y ago
    Ok thanks for clarifying that. Best of luck for your team.
  - moxplod 5y ago
    Hi Jason, This looks great. Recommend you add an email waitlist for windows version. My team only uses windows. So we cannot try it out till that is released.
  - _0ffh 5y ago
    I'm on Linux and I only get the Apple download button (on FF, and I have not messed with the browser ID string).
billti 5y ago
Looks very cool. When I've been working on native code on Windows, the WinDbg time-travel feature has been a magical experience that's saved countless hours (https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/time-travel-debugging-overview https://docs.microsoft.com/en-us/windows-hardware/drivers/de...). I expect and hope this will do the same for web development. p.s. On some pages (e.g. https://www.replay.io/pricing https://www.replay.io/pricing), I only see the Mac download button, even though I'm running Edge on Windows.
- criddell 5y ago
  I use WinDbg for analyzing crash dumps and there's so much I don't understand about the process (I basically follow a step-by-step sequence I made a few years ago). Any advice for leveling up WinDbg skills, especially as they relate to post mortem analysis? I suspect I also need to develop better assembly (or is it machine?) language skills. I'd like to learn a lot more about this stuff but resources (free or paid) are hard to find.
junon 5y ago
I just get "Replay has been updated - please refresh" in an endless loop.
- klyrs 5y ago
  Your browser has time-traveled to the future, but your internet connection is stuck in the present. I imagine that the engineers are working on this.
- theryanjduffy 5y ago
  Hey! Sorry to hear you're having an issue. That message occurs when we try to asynchronously load a JavaScript bundle for the app and it fails. Typically, that's because we've updated the app and that bundle has been replaced with another file. That shouldn't be the case for you though so perhaps there's a network issue? Clearing your cache and trying again might resolve it. Feel free to jump on our discord (https://replay.io/discord https://replay.io/discord) and we can help troubleshoot more together.
  - junon 5y ago
    I'm using just a slightly outdated browser, which is probably the cause. I'm on Ungoogled Chromium 81 (by choice) which doesn't automatically update, and the ||= (boolean OR assignment) operator wasn't added until 85. Your payload appears to compile down for older browsers (as is evident by the use of `var`, unless.. you actually write code using `var`) but it misses the ||= operator transformation it seems. Thus, the browser throws a syntax error, which your app interprets as "new version" for some reason. By the way, please don't disable right clicking. It doesn't actually solve any problems and only annoys users.
    - theryanjduffy 5y ago
      Great diagnostics! We'll have to adjust our compilation settings to target a broader browser set. I've filed an issue regarding the right click issue. That's a fair comment: https://github.com/RecordReplay/devtools/issues/3615 https://github.com/RecordReplay/devtools/issues/3615
jack_riminton 5y ago
Perhaps a stupid question but is this only really useful if you console.log everything?
- jazzdan 5y ago
  (Replay engineer): We support all the debugger features (breakpoints, step in to, step over) and more (step back). We emphasize console.log because we found that time traveling console.logs makes for a good demo, and engineers immediately grok what is it capable of, rather than think that they need to adopt a whole new debugging workflow to use Replay.
  - jack_riminton 5y ago
    Understood, thanks
ryansolid 5y ago
I am a JavaScript framework author, and was one of those fortunate to get early access and honestly it is the most useful tool I've ever used in the debugging space. Sometimes things are complicated. Often there is a need to do digging to uncover the issue. Being able to move forward and backwards and even jumping between seemingly disjoint parts of the timeline are all at your disposal with Replay. Replay has saved me hours of time. And that isn't hyperbolee. On a couple occasions due to laziness and familiarity I'd do stuff the traditional way and be stuck still after hours (sometimes days) on the same bug. With Replay I was able to shorten that time to about an hour on even the trickiest of bugs. So stoked to now have Replay available to others to help record reproductions of their bugs.
- jalopy 5y ago
  Now I'm even more excited. Replay Team - please consider charging a reasonable amount ($10/mo) for individuals/small teams. I want this to be viable as a business.
  - Alekhine 5y ago
    What, no! I'm a broke college student, I don't want to pay for this, at least not yet.
    - mekster 5y ago
      Having a sound business model to have it keep improved or support broke students with no income and let it rot? Perfect if they can support both with free plans.
    - cambaceres 5y ago
      I don’t want to pay for anything.
- Vinnl 5y ago
  I've also been so lucky as to have been able to play with it for a while now, and can corroborate that it's super useful. It's not just a better alternative to something else; it's a whole new category of debugging tools, in the sense that there were problems that were pretty hard to debug and are much easier now that Replay is available.
georgewsinger 5y ago
If you're interested in non-Javascript time travel debugging: pernos.co (which is layered over Mozilla's rr time-tracking debugger) is an absolutely amazing tool which will save you days and days of wasted development time. Pernosco's tool is described pretty well on their website, but basically it allows you to view a program inside and out, forwards /and/ backwards, with zero replay lag. Everything from stack traces to variable displays (at any point in time in your code execution) is extremely easy to view and understand. The best part is the lightning fast search functionality (again: zero lag). On top of this: extraordinary customer service if anything breaks (in my experience, they fix bugs within 24 hours and are highly communicative).
seels 5y ago
Happy Replay user here. One of the most time consuming parts of bug triage and resolution is often just reproducing the bug in the first place. Replay helps us reproduce customer bugs and find their root cause much faster. I wish I had it in past roles.
exabrial 5y ago
Side note: There used to be a product called "Chronon" back 10-12 years ago... The blog spammed Dzone and a lot of other websites and refused to pay for advertising. Their CEO encouraged people to stop writing log statements out and just run their debugger all the time. Looks like it's defunct now: http://www.chrononsystems.com http://www.chrononsystems.com
- jasonlaster11 5y ago
  haha i didnt know about the advertising annecdote, but yeah we get a lot of references to Chronon from those that remember :) We knew early on that a cool debugger wasn't going to cut it. Replay had to be super easy to adopt, fast, secure, and stable. That's our goal!
ggerganov 5y ago
What are the limits for the recordings in terms of time and input data size? Edit: on Ubuntu 18.04 I get the following error: $ ./replay ./replay: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by ./replay)
- loganfsmyth 5y ago
  (Replay engineer here): > What are the limits for the recordings in terms of time and input data size? The best answer right now is that it varies a lot depending on overall CPU usage, the amount of memory used, and the length, so it's somewhat difficult to nail down. Right now we recommend less than 2 minutes long as an attempt to keep things reasonable, but if it's 2 minutes at full CPU usage it may still not load. > on Ubuntu 18.04 I get the following error: For the Glibc error, I'll ask around but not sure off the top of my head.
LeonidBugaev 5y ago
For those who are looking to similar tooling in back end space, check - https://undo.io/ https://undo.io/ (It can also support Golang https://docs.undo.io/GoDelve.html https://docs.undo.io/GoDelve.html) - Mozilla RR https://rr-project.org/ https://rr-project.org/ - GDB https://www.gnu.org/software/gdb/news/reversible.html https://www.gnu.org/software/gdb/news/reversible.html Unfortunately, works only in Linux. https://en.wikipedia.org/wiki/Time_travel_debugging https://en.wikipedia.org/wiki/Time_travel_debugging
- jazzdan 5y ago
  (Replay engineer): We're big fans of RR and pernosco, I love to see those tools get their due. Replay is also designed to support backend programs. We [support Node](https://github.com/RecordReplay/node https://github.com/RecordReplay/node) today with more runtimes coming soon.
  - LeonidBugaev 5y ago
    Do you support it only for dynamic languages, where possible to monkey patch code? All the debuggers mentioned above for the backend work only under Linux, because from what I understand, they use `ptrace` syscall, and on Mac have completely different format, and different capabilities. Do you plan support Golang, especially on Mac, maybe with custom fork, or similar? Thank you!
    - kannanvijayan 5y ago
      I'm not Dan but I also work at Replay.io. The runtime infrastructure can support all of those. The current recorded browser runs on mac, and the mac image is replayed in a linux backend (with the system calls being handled by the replay engine). Our initial launch is with a modified Firefox browser on Mac, but the infrastructure itself is generalizable to other runtimes and other operating systems. However, we do need to "paravirtualize" the runtimes that are recorded on our system (modify the underlying runtime to make it aware that it's being recorded, and do some integration work for each runtime). The design of our system allows for new runtimes to plug in and use all the same infrastructure for replaying. So the long answer is that we can support them, but support for each runtime will arrive as we prioritize and complete the implementation for them. Currently we have the mac Firefox-forked browser. In the works we have a chrome browser, nodejs backend, and a firefox fork for windows. But realistically we should be able to support `(any runtime x any os)` within reasonable bounds. Record and replay all the things :)
jalopy 5y ago
This looks fantastic. Can't wait to try it out. I want this to succeed, so I want the company to succeed. On that note I think you guys should change up your pricing. Seems like there's too big a gap b/w the free forever (individual) and $20/mo/user for team. I'd love to pay for this as an individual at a smaller amount - like $10/mo - for a few extra features. Or maybe reduce the functionality of free forever.
- theryanjduffy 5y ago
  (Replay employee): Thanks for the feedback and so glad to hear you're excited about Replay! Our focus right now is getting Replay into more people's workflows so we can learn and improve the product. The great thing about the individual plan is that you have access to the complete feature set of recording and replaying and can invite collaborators to work with others. I'd encourage you to jump in, start using the product and sharing feedback with us and that'll help Replay immensely.
mrVentures 5y ago
What are the differences from perforce's time-lapse view? Or is it incomparable?
jahewson 5y ago
If this works in CI with Cypress then it’s a game changer. No more chasing down flaky tests that pass locally. Genuinely excited!
- jasonlaster11 5y ago
  Cypress support is coming soon. We've got playwright and puppeteer and have done the hard things with cypress. just have to get the dx polished. https://github.com/RecordReplay/devtools/issues/3225 https://github.com/RecordReplay/devtools/issues/3225
jaril 5y ago
Replay employee here. Personally, I'm excited to see maintainers slowly phase out "Please include steps to reproduce" in issues, and replace it with "Can you make a replay"? Partly because I want to see the product do well, but also selfishly as an engineer, because we've been dogfooding replay and it's made squashing bugs 10x easier. Having somebody attach a replay to an issue makes that issue immediately better than an expertly-written one, which as an engineer, I can start debugging in seconds with minimal back-and-forth.
z3j4e 5y ago
I would like to try it but sadly the only way to register an account is by using google. Thanks no.
- jasonlaster11 5y ago
  Apologies for that. That was what was easiest. How would you like to sign up?
  - z3j4e 5y ago
    Not with a 3rd-party provider.
  - yreg 5y ago
    I prefer email. Why do I need to sign up anyway?
hibbelig 5y ago
At my job, we do Java, and it would be wonderful to have something like this. I litter System.err.println around the code then run it so I can better understand the behavior, so the idea of doing the equivalent in a recording would be awesome! I don't know how my colleagues manage with a regular debugger, it's like looking through a pinhole, you only see a tiny part of reality.
- peheje 5y ago
  Try to use the debugger, learn breakpoints and watches. Unsure what IDE you use, but if you use Intellij, this will get you started very quickly. https://www.youtube.com/watch?v=lAWnIP1S6UA https://www.youtube.com/watch?v=lAWnIP1S6UA
  - hibbelig 5y ago
    Very interesting. I can change a breakpoint to not break, but log, instead. This should be quite interesting. Also the option to "go back in time" by dropping a frame from the callstack is very useful. This way, it's possible to go over some part of the execution again without having to restart the whole application.
- greglaw99 5y ago
  Here you go - https://undo.io/java https://undo.io/java Please excuse shameless plug :-)
slugiscool99 5y ago
This is brilliant!
otrahuevada 5y ago
While I both love it and need exactly what it provides, I have to say I felt very disappointed when I clicked the CTA with a windows icon only to be greeted by a notice that it just isn't there yet. Would it be possible to communicate this by disabling the button and adding some kind of "coming soon" messaging straight to its right?
rubyn00bie 5y ago
Isn’t this what was in Firefox for a while before it was ripped out and I guess made into a private company? I’m pretty damn bummed by this thing.
- tempodox 5y ago
  It does look like it has Mozilla's XUL as a component. However, I've got no idea about the history of how it got there.
- jasonlaster11 5y ago
  We've come a long way from the web replay days. We re-wrote the recorder to support additional runtimes like Node.js and Chrome. Replay is also cloud-based, so recordings are shareable and super fast. We're really grateful for the support we had within Mozilla in the early days, but what we've come to learn is that projects like Replay really benefit from being able to be nimble and solely focused on a great experience which is difficult when you're a small feature in a larger product. Also you can find our runtime forks and entire frontend on github. http://github.com/RecordReplay/ http://github.com/RecordReplay/ Happy to answer any additional questions.
  - jasonlaster11 5y ago
    We've come a long way from the web replay days. We re-wrote the recorder to support additional runtimes like Node.js and Chrome. Replay is also cloud-based, so recordings are shareable and super fast. We're really grateful for the support we had within Mozilla in the early days, but what we've come to learn is that projects like Replay really benefit from being able to be nimble and solely focused on a great experience which is difficult when you're a small feature in a larger product. Also you can find our runtime forks and entire frontend on github. http://github.com/RecordReplay/ http://github.com/RecordReplay/ Happy to answer any additional questions.
- _hilro 5y ago
  If Firefox does anything to make itself more attractive to developers, then Mitchells puppet masters will stop giving her the vast sums of money needed to enrich herself and her social activist friends. Better to spin out desirable features (like this) and buy in undesirable features(e.g. Pocket)
varroa_ 5y ago
Can the creators describe this product's advantage over FullStory and LogRocket? Also, it seems challenging to get this to work in production, since users wouldn't consent to this level of monitoring.
- jaril 5y ago
  In its current state, Replay's not meant to replace either of those products as it's not meant for 24/7 user session monitoring. Instead, it's something that we see teams reaching for in their debugging workflow. The usual bug workflow is for one person to file an issue with steps to reproduce, which the engineer will use to reproduce the bug and try to debug the problem. Replay replaces that workflow by allowing a person to record a replay, and send that link (which is immediately debuggable) to the engineer.
w1nter 5y ago
I'm an engineer at replit and I've been using this to find and fix a bunch of nasty bugs. I love the sense of confidence this gives me. When I have the recording captured — I know for sure I can get to the root cause of the problem. Replay also makes it easier to jump into a new codebase, I can see how things work.
Rapzid 5y ago
It's a shame Chakra was abandoned with old-Edge. Time travel debugging was baked in, and I believe VS Code had UI support for it.
dcdc123 5y ago
Hmm it seems I am required to sign up for an account before I can try it out. Either that or for some other reason I am missing the Record button.
- jaril 5y ago
  You can try out any of the replay demos on our website without signing up for an account. I suggest starting out with this one in case you haven't yet: https://app.replay.io/recording/aae188fb-57d2-46af-a23a-0adba3ed0687 https://app.replay.io/recording/aae188fb-57d2-46af-a23a-0adb... However, we do need you to sign up for an account to record a replay.
slaymaker1907 5y ago
One thing I've thought would be useful to have is a combined debugger/logging system. I work on SQL Server and we rely heavily on dumps to figure out what happened when something goes wrong. However, that only tells you what happened at a given point of time. Obviously recording all the system state over time would be too expensive and logs can be difficult to decipher due to their volume and lack of (explicit) connection with source code. What I'd love to see is a logging framework which records the values of program specified variables while running as well as the current stack trace plus a monotonic time so you can piece together what happens through a thread of execution over time. However, unlike traditional logging, it would be connected to the source code like how a debugger works so you could mouse over a variable to see its state over time. Honestly it'd be really cool with a tracing system like this to be configurable without modifying source as well. Maybe trace specific functions by noting the stack trace and arguments when invoked as well as the return value.
freediver 5y ago
Congrats on launching! The good: I checked out the tool and seems to work as advertised. Also nice to see Replay browser based on a Firefox fork. The bad (and this is more your marketing/PR/branding, not product): - You require an account signup, OK. It's a Google only signup, OK step over that. But it did not clearly mention that you this put me on a mailing list and surely 5 minutes after I signup, I get a random email to support a launch on product hunt. - With the amount of engineering that went into it, I would expect you to be proud of the craftsmanship and your team. Instead the top of your website states you are proud of getting money from investors. This is more a vote against this trend, than your particular behavior. - I was able to find the post "How Replay works" [1] which is the actual content addressing your target market. The post conveys 2000 characters of information and uses 4.3MB of data to do that for a signal/noise ratio of 0.04%. It is the type of web obesity [2] that we are used to nowadays, so nothing new. Mentioning this only because you are a web engineering-centric company. Promoting the right values of web performance and engineering attention to detail is IMO important for a product talking to web engineers. I realize this may come as unpopular/beyond conventional wisdom but getting a different perspective is what HN is good for. Use the feedback at your discretion. Props for making an innovative product and good luck! [1] https://medium.com/replay-io/how-replay-works-5c9c29580c58 https://medium.com/replay-io/how-replay-works-5c9c29580c58 [2] https://idlewords.com/talks/website_obesity.htm https://idlewords.com/talks/website_obesity.htm
- skinnymuch 5y ago
  Your comment isn’t off putting for the reasons you gave. Your post feels smugly opinionated. If that wasn’t your intention, I don’t know what to say. Just look at your first two bullets. Passive aggressive and more.
  - freediver 5y ago
    Thanks, edited a bit for clarity. What is a better way to say it?
    - skinnymuch 5y ago
desi_ninja 5y ago
Windows has this for time travel debugging : https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/time-travel-debugging-overview https://docs.microsoft.com/en-us/windows-hardware/drivers/de.... Visual studio also supports TTD https://devblogs.microsoft.com/visualstudio/introducing-time-travel-debugging-for-visual-studio-enterprise-2019/ https://devblogs.microsoft.com/visualstudio/introducing-time...
- vasama 5y ago
  Only the enterprise edition though.
  - glandium 5y ago
    Windbg-preview supports TTD too.
ronyeh 5y ago
Wonderful product! I do use debugger; statements a lot, but I'm also somewhat ashamed to admit that I love console.log()! :-) Replay debugging is a huge step forward, and gives console.log() much more power. Thank you!
yaklyak 5y ago
VERY impressive. I downloaded it this morning and took it for a spin on my current project. I love how much you pack into this tool and make everything work seamlessly together. If those source files in the DevTools view are editable, I won't need my IDE anymore! Thank you for bringing us this tool.
dorianmariefr 5y ago
I logged in then I couldn't load my website, then it couldn't show me a recording (not sure if it saved it), then it crashed. IMHO having Firefox as a base is not a great idea, Chrome would be better and closer to what users use.
- dorianmariefr 5y ago
  seems like it worked but now I'm stuck at "Uploading replay" https://app.replay.io/recording/8731334f-4731-4c10-beee-7e4aaeae06c5 https://app.replay.io/recording/8731334f-4731-4c10-beee-7e4a...
  - kannanvijayan 5y ago
    Thanks for reporting I'll take a look at what went wrong there. I just visited the recording and the upload seems to have completed - I can view the recording from your link and debug it. I assume you shared it publicly?
    - dorianmariefr 5y ago
      thanks, yes I shared it publicly but then back to private as there are my cookies there
alin23 5y ago
Man, I wish I could use something like this for my Swift macOS app [1] I’ve got tons of crash reports in Sentry that I have no idea what to do about. On things like: CFRelease() called with NULL replay could help me find where the heck that NULL came from as I don’t have any CFRelease call in my code Or the more annoying BUG IN CLIENT OF LIBDISPATCH: Assertion failed: Block was expected to execute on queue [com.apple.main-thread] Like, how does that specific line run perfectly fine thousands of times and then every once in a while it decides it needs the main thread. I wish I could replay that traceback to see why the main thread is suddenly needed. [1] https://lunar.fyi https://lunar.fyi
tiborsaas 5y ago
Today I spent maybe more than an hour tracing a bug that a screen I created turned inaccessible after a merge, tests died suddenly. It turned out to be multiple cases, one was that a colleague changed a default export to a named one which excluded my screen. Another was an in an unrelated test which missed a React context wrapper so I needed to refactor her tests. I don't know what kind of magic debugging tool would help with these kinds of things.
- deleted 5y ago
  [deleted]
glass_of_water 5y ago
I read the medium post (https://medium.com/replay-io/how-replay-works-5c9c29580c58 https://medium.com/replay-io/how-replay-works-5c9c29580c58), which gives an overview of how Replay works, but there are a few things I still don't understand. 1) How does the step backward functionality work? Do you take snapshots every so often of the Javascript environment? How do you handle destructive assignments? 2) Does Replay record actual syscalls made by the browser, or is it recording calls to the browser APIs by the javascript code (which I guess are effectively syscalls from the javascript code's perspective)? 3) The ordered lock technique described in https://medium.com/replay-io/recording-and-replaying-d6102afee273 https://medium.com/replay-io/recording-and-replaying-d6102af... makes sure that threads access a given resource in the same order, but what about threads accessing different resources in the same order? e.g. when recording, thread 1 accesses resource A before thread 2 accesses resource B. It seems like the ordered lock technique doesn't help you maintain that ordering in the replay. Is maintaining that kind of ordering across resources not actually necessary most of the time?
- IshKebab 5y ago
  Thanks for the links to the blogs. I was wondering how it worked and the "How it works" bit on that page said nothing. Nice that they've explained it. It looks like the blog does answer your questions though: > The interface which Replay uses for the recording boundary is the API between an executable and the system libraries it is dynamically linked to. I assume the ordered locks use a global order.
  - deleted 5y ago
    [deleted]
  - glass_of_water 5y ago
    As bhackett confirmed, you're right about recording at the system library call level. I wasn't sure if it was more of an analogy or only referred to a version of Replay targeting backend servers written in other languages like Go, especially since the author mentioned hooking into the JS runtime in https://medium.com/replay-io/effective-determinism-54cc91f5693c https://medium.com/replay-io/effective-determinism-54cc91f56.... But it looks like I misunderstood, and their browser product is their generic record/replay library integrated into Firefox, rather than a reimplementation of the same concepts.
mellosouls 5y ago
I love this, and apart from its intended purpose it seems like a potentially valuable learning tool for devs new to a language. Years ago I used Adobe LiveCycle, a horrible "low code" enterprise framework foisted on us from far above. One thing I always did like about it though was its replay tool which this reminds me of. I was always surprised it wasn't more of a thing in the dev space, it seems very useful.
gregsadetsky 5y ago
I just learned about it here and tried it out on a small to medium-sized TypeScript React app. It worked right out of the gate! The original TypeScript files appeared in the Source browser. Time travel works. And the video replay too of course. Really impressive. Will keep it around for sure to try debugging a real issue next time. Congrats on the launch and the great app!
NiceWayToDoIT 5y ago
Dan Abramov 2015 https://www.youtube.com/watch?v=xsSnOQynTHs https://www.youtube.com/watch?v=xsSnOQynTHs But there was one earlier presentation I cannot find it, guy was showing live debugging of the video game. Not sure is it TED or one of conferences ... Edit: This is it: Bred Victor: https://youtu.be/EGqwXt90ZqA?t=1006 https://youtu.be/EGqwXt90ZqA?t=1006 2013 Future of programming https://www.youtube.com/watch?v=8pTEmbeENF4 https://www.youtube.com/watch?v=8pTEmbeENF4
- mkl 5y ago
  *Bret Victor: http://worrydream.com/ http://worrydream.com/ Many past threads on HN: https://hn.algolia.com/?q=worrydream https://hn.algolia.com/?q=worrydream
elwell 5y ago
Surely not as fully featured, but the general idea has been possible for ClojureScript Re-frame with: https://github.com/day8/re-frame-10x https://github.com/day8/re-frame-10x
akomtu 5y ago
Sorry to be blunt. That's a cool toy for nerds who have too much spare time at work. Real projects don't care that much about quality, they care about adding features as fast as they can while keeping the quality bar slightly above "completely broken". Nobody's going to look at these replayable traces because by the time such a bug gets seen by a dev, the project would've been half rewritten. This level of quality is just unnecessary in web.
Waterluvian 5y ago
This looks exciting and I’m going to give it a try. For what it’s worth, if it helps with marketing: I am immediately skeptical that it’s going to be some mix of tedious to get working with my specific webpack dev server setup, be slow or unreliable, or never actually keep the state I need. I’m hoping to be wrong on all of that. But when I scrolled the (beautiful) website, I would have loved to see some really nasty example in addition to the very elegant introductory “show don’t tell” example. I want to see the first and think “okay I get it” and then be shown something really complicated to illustrate just how durable the tool is.
ospider 5y ago
It's disgusting that I saw a captcha instead of video on the front page. Please consider not to use vimeo
username3 5y ago
Can this show code coverage like WebStorm’s spy-js to show which code was executed?
- jazzdan 5y ago
  (Replay engineer): Kind of! In the code viewer's left hand side gutter, the one that shows line numbers, if a line of code was never executed it is greyed out. Otherwise if you hover over it we show you how many times that code was executed, and from there you can set a logpoint/breakpoint.
yreg 5y ago
Is it correct that to use this I need to download their app and then enter my Google password inside it? How do I know it's safe? Is there any other way to try it out?
edelhans 5y ago
This looks very cool! How well does this play together with browser APIs, specifically anything that uses the media source extension?

681 points by jasonlaster11 5y ago

Very excited to see what folks here think. Replay has been a wonderful project to work on so far.

Engineer @ Replay here - If you're a console.log kind of developer (isn't everyone at least some of the time?), you should check this out. Imagine being able to add console.log() statements to code that already ran and seeing the results immediately! It's a bit mind blowing the first time you use it.

_bohm 5y ago
lol, now this is the kind of marketing that speaks to me
mritchie712 5y ago
Do you have a demo video of doing exactly this? I downloaded the app, it's unclear how to edit code that's already run.
- kannanvijayan 5y ago
  The video next to "Print statements from the future" on the webpage shows a bit of it. You can click on the line-number next to a line of code to add a print at that location. If you hover over the line-number, it'll show you a count (exact and correct) of how many times that line of code hit during execution. Clicking on it adds a print log at that line with a default string. At that point, the console log in the left should change immediately to include a bunch of new entries with "Loading.." text that resolves to the text of each print statement. Clicking on the string allows you to replace it with an expression to be evaluated. The expression can include references to local scope variables, etc. If you edit the expression, the console entries for the prints go back to "Loading.." and the new values are resolved. The prints in the console are ordered in time sequence along with all the other events that can be shown there (regular console logs, mouse and keyboard and other events, etc.)

jasonlaster11 5y ago

Co-founder here. It feels incredible to be sharing Replay with all of you. It's been a labor of love the past five years! Replay started off as a simple experiment in what would happen if we added a step back button and rewind button to the Debugger. We quickly realized two things. First, nobody uses breakpoints. Second, being able to share is so much more powerful than being able to rewind. Here’s how Replay works today. Somebody on the team records a bug with the Replay Browser and shares the replay url with the team. From there, developers jump in and add print statements. The logs appear in the Console immediately so you don’t need to refresh and reproduce a thing. Over the past year we’ve talked to hundreds of users, recorded 2.5 million replays, and worked incredibly hard to ensure Replay would be fast, secure, and robust from the get go. Want to check it out? You can download Replay today. Can’t wait to hear what you think! Interested in learning more, here is our announcement blog post https://medium.com/replay-io/launching-replay-the-time-travel-debugger-for-the-web-f886f0897d38 https://medium.com/replay-io/launching-replay-the-time-trave...

swyx 5y ago
are there any public replays you can share so pple can get a feel of the product without downloading?
- jasonlaster11 5y ago
  Yep! Tons on the site. Here's a Replay with an algolia search bug. Try adding a print statement in Hits.js! https://app.replay.io/recording/cf2da81f-3a74-45ba-9241-f6d4361a52f5 https://app.replay.io/recording/cf2da81f-3a74-45ba-9241-f6d4...
maxmcd 5y ago
How does it work? Are you making memory snapshots? Something higher level?
- jasonlaster11 5y ago
  Long story short, we forked the major browsers so that when you record we can capture the browser input (OS Library calls). Brian walks through our approach here https://medium.com/replay-io/how-replay-works-5c9c29580c58 https://medium.com/replay-io/how-replay-works-5c9c29580c58

swyx 5y ago

That landing page looks right out of Bret Victor's time travel demos (https://www.youtube.com/watch?v=EGqwXt90ZqA https://www.youtube.com/watch?v=EGqwXt90ZqA, or http://worrydream.com/LearnableProgramming/ http://worrydream.com/LearnableProgramming/). Communicates the value instantly. Incredibly well done! IMO the most time consuming issue in triaging bug reports is reproducing them. Replay definitively solves the "can't repro this" problem.

jasonlaster11 5y ago
Thanks! Bret Victor has been my inspiration. Ever since I watch inventing on principle ten years ago, I knew this was what I wanted to build. In fact many folks on the team have a similar story. That's the crazy part about IoP for me. It's created a movement!
jonbell 5y ago
Replay’s designer here. Bingo! We’ve been iterating on our story for a year, and the “let’s refer to Learnable Programming” angle felt like a huge breakthrough. So glad it resonated with you, thanks for letting us know!

gavinray 5y ago

Through $DAYJOB, I happened to have a meeting with one of the founders of this company some time ago -- not about Replay, but about a "How do you do this" sort of question. After prying for technical details, Replay came up, and I asked to see it out of curiosity. Really blew my mind. Every once in a while a piece of technology comes around that doesn't quite have an equivalent. I could immediately see where being able to have your users or coworkers record bug reproductions or features and submit them in issues or PR's would save monumental amounts of time. Wishing Replay team best of luck, I was thoroughly impressed.

hunterb123 5y ago
> Every once in a while a piece of technology comes around that doesn't quite have an equivalent. I dunno, https://www.rrweb.io/ https://www.rrweb.io/ comes close (closer?) and it's open source. There's also other paid solutions like FullStory and LogRocket.
- zeeg 5y ago
  I agree there's a lot of session replay style equivilents (and rrweb is great!), though what Replay is doing unfortunately cannot be done in production in the same way. In the ideal world this level of data could be extracted from production incidents without an individual running specialized software, but with the state of technology I'd say they're both aiming to solve different problems.
  - deleted 5y ago
    [deleted]
- gavinray 5y ago
  I asked about this (whether it could be done as a browser extension) and the answer I was given was that the browser was required because they do things like hook syscalls and other close-to-the-metal stuff From: https://www.notion.so/How-Replay-works-cc65abf5eb11443586abb4aa04345985 https://www.notion.so/How-Replay-works-cc65abf5eb11443586abb... So if you can’t capture API calls directly, what do you do? You drop down one level and record the browser system calls. This probably sounds like a terrible idea. We started off with a simple 3 line JS program with one API call and one clock and instead of just recording these two calls, we’re now recording a program with millions of lines of C++ and the complexity of an Operating System. Yep! It’s crazy, but works, and it’s pretty awesome. So the nice thing about system calls is there are not too many of them and they don’t change that often. This means that instead of recording an API call directly, we can record the network engine’s system calls to open socket and process packets from the server. And by recording at this level, it’s possible to replay the website exactly as it ran before, with the same performance characteristics and everything else. It’s a little bit like putting your browser into “the Matrix” and tricking it into believing everything is normal, when in fact it is just running in a simulation.

parksy 5y ago

In my line of work I've found the most difficult issues to debug are asynchronous dependencies on API actions. How nicely does replay work with POST data, if I scrub back and forth will I retrigger POSTs or is the request/response captured and emulated in the replays? If replay handles this nicely then I'm very very interested in adding it to our workflows.

loganfsmyth 5y ago
Once a recording is made, you can jump around in it as much as you like. The network requests will only be made during the initial recording process as they would normally, and when debugging it will all be pulling the request/response data from the recording itself rather than querying the network.
- parksy 5y ago
  That's a big selling point for me, props to the engineering team for accommodating this, I work mainly on integrations and the trickier bug reports are weird edge cases that involve a lot of getting specific descriptions of what happened and replicating it manually on a sandbox so as not to impact API calls, getting on the phone to talk through exactly what they're doing, asking for screenshots via email, clarifying conflicting understanding of in-house terminology etc. You know the story. Being able to get them to record the exact process and scrub through it at my leisure without having to worry about hammering APIs would be a massive timesaver, replication is about 90% of the time taken to fix a bug, while the fixes themselves are usually trivial. Not having to worry about accidentally replaying a bugged-out API call is a huge plus. In my case the major hurdle I can foresee is the majority of my enterprise-level clients use Windows and a brief look at the website says currently there's only Mac / Linux support for the replay browser. What's the timeline on Windows support? The only other thing I can think may be an issue is that the recordings are cloud-based and a lot of the clients I deal with are finnicky about exfiltration and governance, and would be a lot more comfortable self-hosting where possible. Is that possible or on the roadmap? This looks like a super useful tool to add to the toolbelt for sure, I would love to have all my clients using something like this to report issues. Nice work all!

bichiliad 5y ago

Having played with Replay already, I have to say it feels nothing short of magic. I can't tell you how much something like it would have made debugging weird issues in the depths of something like Webpack a whole lot easier.

CompuIves 5y ago

Replay has been amazing for me to debug hard to reproduce issues like live collaboration issues. You just record the bug, share it with others, place some console.logs (after the fact!) and scrub through the recording to see where things went wrong. Also nice side-effect is that it's amazing to explore other code-bases, just being able to put a console.log somewhere to see how often it's run when using an application is a lot of fun.

ShaneMcGowan 5y ago

How well does this play with something like Angular or React? I know there is a lot of internal logic going on in those apps

jasonlaster11 5y ago
Replay has native support for React DevTools so you can easily inspect the component tree, props, state, etc... High level, because Replay replays the browser session everything just works. Even I can understand Angular apps and i've never built one ;)

jassmith87 5y ago

We've been using Replay heavily here for the past 6-7 months and it's rapidly become the preferred way to do any form of debugging. Training our support staff to capture replays and submit them in tickets has made turn around time on bugs significantly faster.

throwaway59553 5y ago

You guys have a download button for Mac OS X (apple logo), and you have a button with the Windows logo. But there isn't a windows version yet as the pop-up tells me. And why isn't there a linux button, if you actually have a linux version?

jasonlaster11 5y ago
The button is platform specific. So if you're on linux, it should show the linux icon. Windows support is on the way. It just entered alpha two weeks ago and we're targeting Beta early october. We record low level windows os calls and replay them on linux in a virtualized environment. Frankly thrilled it works at all :)
- throwaway59553 5y ago
  Ok thanks for clarifying that. Best of luck for your team.
- moxplod 5y ago
  Hi Jason, This looks great. Recommend you add an email waitlist for windows version. My team only uses windows. So we cannot try it out till that is released.
- _0ffh 5y ago
  I'm on Linux and I only get the Apple download button (on FF, and I have not messed with the browser ID string).

billti 5y ago

Looks very cool. When I've been working on native code on Windows, the WinDbg time-travel feature has been a magical experience that's saved countless hours (https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/time-travel-debugging-overview https://docs.microsoft.com/en-us/windows-hardware/drivers/de...). I expect and hope this will do the same for web development. p.s. On some pages (e.g. https://www.replay.io/pricing https://www.replay.io/pricing), I only see the Mac download button, even though I'm running Edge on Windows.

criddell 5y ago
I use WinDbg for analyzing crash dumps and there's so much I don't understand about the process (I basically follow a step-by-step sequence I made a few years ago). Any advice for leveling up WinDbg skills, especially as they relate to post mortem analysis? I suspect I also need to develop better assembly (or is it machine?) language skills. I'd like to learn a lot more about this stuff but resources (free or paid) are hard to find.

junon 5y ago

I just get "Replay has been updated - please refresh" in an endless loop.

klyrs 5y ago
Your browser has time-traveled to the future, but your internet connection is stuck in the present. I imagine that the engineers are working on this.
theryanjduffy 5y ago
Hey! Sorry to hear you're having an issue. That message occurs when we try to asynchronously load a JavaScript bundle for the app and it fails. Typically, that's because we've updated the app and that bundle has been replaced with another file. That shouldn't be the case for you though so perhaps there's a network issue? Clearing your cache and trying again might resolve it. Feel free to jump on our discord (https://replay.io/discord https://replay.io/discord) and we can help troubleshoot more together.
- junon 5y ago
  I'm using just a slightly outdated browser, which is probably the cause. I'm on Ungoogled Chromium 81 (by choice) which doesn't automatically update, and the ||= (boolean OR assignment) operator wasn't added until 85. Your payload appears to compile down for older browsers (as is evident by the use of `var`, unless.. you actually write code using `var`) but it misses the ||= operator transformation it seems. Thus, the browser throws a syntax error, which your app interprets as "new version" for some reason. By the way, please don't disable right clicking. It doesn't actually solve any problems and only annoys users.
  - theryanjduffy 5y ago
    Great diagnostics! We'll have to adjust our compilation settings to target a broader browser set. I've filed an issue regarding the right click issue. That's a fair comment: https://github.com/RecordReplay/devtools/issues/3615 https://github.com/RecordReplay/devtools/issues/3615

jack_riminton 5y ago

Perhaps a stupid question but is this only really useful if you console.log everything?

jazzdan 5y ago
(Replay engineer): We support all the debugger features (breakpoints, step in to, step over) and more (step back). We emphasize console.log because we found that time traveling console.logs makes for a good demo, and engineers immediately grok what is it capable of, rather than think that they need to adopt a whole new debugging workflow to use Replay.
- jack_riminton 5y ago
  Understood, thanks

ryansolid 5y ago

I am a JavaScript framework author, and was one of those fortunate to get early access and honestly it is the most useful tool I've ever used in the debugging space. Sometimes things are complicated. Often there is a need to do digging to uncover the issue. Being able to move forward and backwards and even jumping between seemingly disjoint parts of the timeline are all at your disposal with Replay. Replay has saved me hours of time. And that isn't hyperbolee. On a couple occasions due to laziness and familiarity I'd do stuff the traditional way and be stuck still after hours (sometimes days) on the same bug. With Replay I was able to shorten that time to about an hour on even the trickiest of bugs. So stoked to now have Replay available to others to help record reproductions of their bugs.

jalopy 5y ago
Now I'm even more excited. Replay Team - please consider charging a reasonable amount ($10/mo) for individuals/small teams. I want this to be viable as a business.
- Alekhine 5y ago
  What, no! I'm a broke college student, I don't want to pay for this, at least not yet.
  - mekster 5y ago
    Having a sound business model to have it keep improved or support broke students with no income and let it rot? Perfect if they can support both with free plans.
  - cambaceres 5y ago
    I don’t want to pay for anything.
Vinnl 5y ago
I've also been so lucky as to have been able to play with it for a while now, and can corroborate that it's super useful. It's not just a better alternative to something else; it's a whole new category of debugging tools, in the sense that there were problems that were pretty hard to debug and are much easier now that Replay is available.

georgewsinger 5y ago

If you're interested in non-Javascript time travel debugging: pernos.co (which is layered over Mozilla's rr time-tracking debugger) is an absolutely amazing tool which will save you days and days of wasted development time. Pernosco's tool is described pretty well on their website, but basically it allows you to view a program inside and out, forwards /and/ backwards, with zero replay lag. Everything from stack traces to variable displays (at any point in time in your code execution) is extremely easy to view and understand. The best part is the lightning fast search functionality (again: zero lag). On top of this: extraordinary customer service if anything breaks (in my experience, they fix bugs within 24 hours and are highly communicative).

seels 5y ago

Happy Replay user here. One of the most time consuming parts of bug triage and resolution is often just reproducing the bug in the first place. Replay helps us reproduce customer bugs and find their root cause much faster. I wish I had it in past roles.

exabrial 5y ago

Side note: There used to be a product called "Chronon" back 10-12 years ago... The blog spammed Dzone and a lot of other websites and refused to pay for advertising. Their CEO encouraged people to stop writing log statements out and just run their debugger all the time. Looks like it's defunct now: http://www.chrononsystems.com http://www.chrononsystems.com

jasonlaster11 5y ago
haha i didnt know about the advertising annecdote, but yeah we get a lot of references to Chronon from those that remember :) We knew early on that a cool debugger wasn't going to cut it. Replay had to be super easy to adopt, fast, secure, and stable. That's our goal!

ggerganov 5y ago

What are the limits for the recordings in terms of time and input data size? Edit: on Ubuntu 18.04 I get the following error: $ ./replay ./replay: /lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by ./replay)

loganfsmyth 5y ago
(Replay engineer here): > What are the limits for the recordings in terms of time and input data size? The best answer right now is that it varies a lot depending on overall CPU usage, the amount of memory used, and the length, so it's somewhat difficult to nail down. Right now we recommend less than 2 minutes long as an attempt to keep things reasonable, but if it's 2 minutes at full CPU usage it may still not load. > on Ubuntu 18.04 I get the following error: For the Glibc error, I'll ask around but not sure off the top of my head.

LeonidBugaev 5y ago

For those who are looking to similar tooling in back end space, check - https://undo.io/ https://undo.io/ (It can also support Golang https://docs.undo.io/GoDelve.html https://docs.undo.io/GoDelve.html) - Mozilla RR https://rr-project.org/ https://rr-project.org/ - GDB https://www.gnu.org/software/gdb/news/reversible.html https://www.gnu.org/software/gdb/news/reversible.html Unfortunately, works only in Linux. https://en.wikipedia.org/wiki/Time_travel_debugging https://en.wikipedia.org/wiki/Time_travel_debugging

jazzdan 5y ago
(Replay engineer): We're big fans of RR and pernosco, I love to see those tools get their due. Replay is also designed to support backend programs. We [support Node](https://github.com/RecordReplay/node https://github.com/RecordReplay/node) today with more runtimes coming soon.
- LeonidBugaev 5y ago
  Do you support it only for dynamic languages, where possible to monkey patch code? All the debuggers mentioned above for the backend work only under Linux, because from what I understand, they use `ptrace` syscall, and on Mac have completely different format, and different capabilities. Do you plan support Golang, especially on Mac, maybe with custom fork, or similar? Thank you!
  - kannanvijayan 5y ago
    I'm not Dan but I also work at Replay.io. The runtime infrastructure can support all of those. The current recorded browser runs on mac, and the mac image is replayed in a linux backend (with the system calls being handled by the replay engine). Our initial launch is with a modified Firefox browser on Mac, but the infrastructure itself is generalizable to other runtimes and other operating systems. However, we do need to "paravirtualize" the runtimes that are recorded on our system (modify the underlying runtime to make it aware that it's being recorded, and do some integration work for each runtime). The design of our system allows for new runtimes to plug in and use all the same infrastructure for replaying. So the long answer is that we can support them, but support for each runtime will arrive as we prioritize and complete the implementation for them. Currently we have the mac Firefox-forked browser. In the works we have a chrome browser, nodejs backend, and a firefox fork for windows. But realistically we should be able to support `(any runtime x any os)` within reasonable bounds. Record and replay all the things :)

jalopy 5y ago

This looks fantastic. Can't wait to try it out. I want this to succeed, so I want the company to succeed. On that note I think you guys should change up your pricing. Seems like there's too big a gap b/w the free forever (individual) and $20/mo/user for team. I'd love to pay for this as an individual at a smaller amount - like $10/mo - for a few extra features. Or maybe reduce the functionality of free forever.

theryanjduffy 5y ago
(Replay employee): Thanks for the feedback and so glad to hear you're excited about Replay! Our focus right now is getting Replay into more people's workflows so we can learn and improve the product. The great thing about the individual plan is that you have access to the complete feature set of recording and replaying and can invite collaborators to work with others. I'd encourage you to jump in, start using the product and sharing feedback with us and that'll help Replay immensely.

mrVentures 5y ago

What are the differences from perforce's time-lapse view? Or is it incomparable?

jahewson 5y ago

If this works in CI with Cypress then it’s a game changer. No more chasing down flaky tests that pass locally. Genuinely excited!

jasonlaster11 5y ago
Cypress support is coming soon. We've got playwright and puppeteer and have done the hard things with cypress. just have to get the dx polished. https://github.com/RecordReplay/devtools/issues/3225 https://github.com/RecordReplay/devtools/issues/3225

jaril 5y ago

Replay employee here. Personally, I'm excited to see maintainers slowly phase out "Please include steps to reproduce" in issues, and replace it with "Can you make a replay"? Partly because I want to see the product do well, but also selfishly as an engineer, because we've been dogfooding replay and it's made squashing bugs 10x easier. Having somebody attach a replay to an issue makes that issue immediately better than an expertly-written one, which as an engineer, I can start debugging in seconds with minimal back-and-forth.

z3j4e 5y ago

I would like to try it but sadly the only way to register an account is by using google. Thanks no.

jasonlaster11 5y ago
Apologies for that. That was what was easiest. How would you like to sign up?
- z3j4e 5y ago
  Not with a 3rd-party provider.
- yreg 5y ago
  I prefer email. Why do I need to sign up anyway?

hibbelig 5y ago

At my job, we do Java, and it would be wonderful to have something like this. I litter System.err.println around the code then run it so I can better understand the behavior, so the idea of doing the equivalent in a recording would be awesome! I don't know how my colleagues manage with a regular debugger, it's like looking through a pinhole, you only see a tiny part of reality.

peheje 5y ago
Try to use the debugger, learn breakpoints and watches. Unsure what IDE you use, but if you use Intellij, this will get you started very quickly. https://www.youtube.com/watch?v=lAWnIP1S6UA https://www.youtube.com/watch?v=lAWnIP1S6UA
- hibbelig 5y ago
  Very interesting. I can change a breakpoint to not break, but log, instead. This should be quite interesting. Also the option to "go back in time" by dropping a frame from the callstack is very useful. This way, it's possible to go over some part of the execution again without having to restart the whole application.
greglaw99 5y ago
Here you go - https://undo.io/java https://undo.io/java Please excuse shameless plug :-)

slugiscool99 5y ago

This is brilliant!

otrahuevada 5y ago

While I both love it and need exactly what it provides, I have to say I felt very disappointed when I clicked the CTA with a windows icon only to be greeted by a notice that it just isn't there yet. Would it be possible to communicate this by disabling the button and adding some kind of "coming soon" messaging straight to its right?

rubyn00bie 5y ago

Isn’t this what was in Firefox for a while before it was ripped out and I guess made into a private company? I’m pretty damn bummed by this thing.

tempodox 5y ago
It does look like it has Mozilla's XUL as a component. However, I've got no idea about the history of how it got there.
jasonlaster11 5y ago
We've come a long way from the web replay days. We re-wrote the recorder to support additional runtimes like Node.js and Chrome. Replay is also cloud-based, so recordings are shareable and super fast. We're really grateful for the support we had within Mozilla in the early days, but what we've come to learn is that projects like Replay really benefit from being able to be nimble and solely focused on a great experience which is difficult when you're a small feature in a larger product. Also you can find our runtime forks and entire frontend on github. http://github.com/RecordReplay/ http://github.com/RecordReplay/ Happy to answer any additional questions.
- jasonlaster11 5y ago
  We've come a long way from the web replay days. We re-wrote the recorder to support additional runtimes like Node.js and Chrome. Replay is also cloud-based, so recordings are shareable and super fast. We're really grateful for the support we had within Mozilla in the early days, but what we've come to learn is that projects like Replay really benefit from being able to be nimble and solely focused on a great experience which is difficult when you're a small feature in a larger product. Also you can find our runtime forks and entire frontend on github. http://github.com/RecordReplay/ http://github.com/RecordReplay/ Happy to answer any additional questions.
_hilro 5y ago
If Firefox does anything to make itself more attractive to developers, then Mitchells puppet masters will stop giving her the vast sums of money needed to enrich herself and her social activist friends. Better to spin out desirable features (like this) and buy in undesirable features(e.g. Pocket)

varroa_ 5y ago

Can the creators describe this product's advantage over FullStory and LogRocket? Also, it seems challenging to get this to work in production, since users wouldn't consent to this level of monitoring.

jaril 5y ago
In its current state, Replay's not meant to replace either of those products as it's not meant for 24/7 user session monitoring. Instead, it's something that we see teams reaching for in their debugging workflow. The usual bug workflow is for one person to file an issue with steps to reproduce, which the engineer will use to reproduce the bug and try to debug the problem. Replay replaces that workflow by allowing a person to record a replay, and send that link (which is immediately debuggable) to the engineer.

w1nter 5y ago

I'm an engineer at replit and I've been using this to find and fix a bunch of nasty bugs. I love the sense of confidence this gives me. When I have the recording captured — I know for sure I can get to the root cause of the problem. Replay also makes it easier to jump into a new codebase, I can see how things work.

Rapzid 5y ago

It's a shame Chakra was abandoned with old-Edge. Time travel debugging was baked in, and I believe VS Code had UI support for it.

dcdc123 5y ago

Hmm it seems I am required to sign up for an account before I can try it out. Either that or for some other reason I am missing the Record button.

jaril 5y ago
You can try out any of the replay demos on our website without signing up for an account. I suggest starting out with this one in case you haven't yet: https://app.replay.io/recording/aae188fb-57d2-46af-a23a-0adba3ed0687 https://app.replay.io/recording/aae188fb-57d2-46af-a23a-0adb... However, we do need you to sign up for an account to record a replay.

slaymaker1907 5y ago

One thing I've thought would be useful to have is a combined debugger/logging system. I work on SQL Server and we rely heavily on dumps to figure out what happened when something goes wrong. However, that only tells you what happened at a given point of time. Obviously recording all the system state over time would be too expensive and logs can be difficult to decipher due to their volume and lack of (explicit) connection with source code. What I'd love to see is a logging framework which records the values of program specified variables while running as well as the current stack trace plus a monotonic time so you can piece together what happens through a thread of execution over time. However, unlike traditional logging, it would be connected to the source code like how a debugger works so you could mouse over a variable to see its state over time. Honestly it'd be really cool with a tracing system like this to be configurable without modifying source as well. Maybe trace specific functions by noting the stack trace and arguments when invoked as well as the return value.

freediver 5y ago

Congrats on launching! The good: I checked out the tool and seems to work as advertised. Also nice to see Replay browser based on a Firefox fork. The bad (and this is more your marketing/PR/branding, not product): - You require an account signup, OK. It's a Google only signup, OK step over that. But it did not clearly mention that you this put me on a mailing list and surely 5 minutes after I signup, I get a random email to support a launch on product hunt. - With the amount of engineering that went into it, I would expect you to be proud of the craftsmanship and your team. Instead the top of your website states you are proud of getting money from investors. This is more a vote against this trend, than your particular behavior. - I was able to find the post "How Replay works" [1] which is the actual content addressing your target market. The post conveys 2000 characters of information and uses 4.3MB of data to do that for a signal/noise ratio of 0.04%. It is the type of web obesity [2] that we are used to nowadays, so nothing new. Mentioning this only because you are a web engineering-centric company. Promoting the right values of web performance and engineering attention to detail is IMO important for a product talking to web engineers. I realize this may come as unpopular/beyond conventional wisdom but getting a different perspective is what HN is good for. Use the feedback at your discretion. Props for making an innovative product and good luck! [1] https://medium.com/replay-io/how-replay-works-5c9c29580c58 https://medium.com/replay-io/how-replay-works-5c9c29580c58 [2] https://idlewords.com/talks/website_obesity.htm https://idlewords.com/talks/website_obesity.htm

skinnymuch 5y ago
Your comment isn’t off putting for the reasons you gave. Your post feels smugly opinionated. If that wasn’t your intention, I don’t know what to say. Just look at your first two bullets. Passive aggressive and more.
- freediver 5y ago
  Thanks, edited a bit for clarity. What is a better way to say it?
  - skinnymuch 5y ago

desi_ninja 5y ago

Windows has this for time travel debugging : https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/time-travel-debugging-overview https://docs.microsoft.com/en-us/windows-hardware/drivers/de.... Visual studio also supports TTD https://devblogs.microsoft.com/visualstudio/introducing-time-travel-debugging-for-visual-studio-enterprise-2019/ https://devblogs.microsoft.com/visualstudio/introducing-time...

vasama 5y ago
Only the enterprise edition though.
- glandium 5y ago
  Windbg-preview supports TTD too.

ronyeh 5y ago

Wonderful product! I do use debugger; statements a lot, but I'm also somewhat ashamed to admit that I love console.log()! :-) Replay debugging is a huge step forward, and gives console.log() much more power. Thank you!

yaklyak 5y ago

VERY impressive. I downloaded it this morning and took it for a spin on my current project. I love how much you pack into this tool and make everything work seamlessly together. If those source files in the DevTools view are editable, I won't need my IDE anymore! Thank you for bringing us this tool.

dorianmariefr 5y ago

I logged in then I couldn't load my website, then it couldn't show me a recording (not sure if it saved it), then it crashed. IMHO having Firefox as a base is not a great idea, Chrome would be better and closer to what users use.

dorianmariefr 5y ago
seems like it worked but now I'm stuck at "Uploading replay" https://app.replay.io/recording/8731334f-4731-4c10-beee-7e4aaeae06c5 https://app.replay.io/recording/8731334f-4731-4c10-beee-7e4a...
- kannanvijayan 5y ago
  Thanks for reporting I'll take a look at what went wrong there. I just visited the recording and the upload seems to have completed - I can view the recording from your link and debug it. I assume you shared it publicly?
  - dorianmariefr 5y ago
    thanks, yes I shared it publicly but then back to private as there are my cookies there

alin23 5y ago

Man, I wish I could use something like this for my Swift macOS app [1] I’ve got tons of crash reports in Sentry that I have no idea what to do about. On things like: CFRelease() called with NULL replay could help me find where the heck that NULL came from as I don’t have any CFRelease call in my code Or the more annoying BUG IN CLIENT OF LIBDISPATCH: Assertion failed: Block was expected to execute on queue [com.apple.main-thread] Like, how does that specific line run perfectly fine thousands of times and then every once in a while it decides it needs the main thread. I wish I could replay that traceback to see why the main thread is suddenly needed. [1] https://lunar.fyi https://lunar.fyi

tiborsaas 5y ago

Today I spent maybe more than an hour tracing a bug that a screen I created turned inaccessible after a merge, tests died suddenly. It turned out to be multiple cases, one was that a colleague changed a default export to a named one which excluded my screen. Another was an in an unrelated test which missed a React context wrapper so I needed to refactor her tests. I don't know what kind of magic debugging tool would help with these kinds of things.

deleted 5y ago
[deleted]

glass_of_water 5y ago

I read the medium post (https://medium.com/replay-io/how-replay-works-5c9c29580c58 https://medium.com/replay-io/how-replay-works-5c9c29580c58), which gives an overview of how Replay works, but there are a few things I still don't understand. 1) How does the step backward functionality work? Do you take snapshots every so often of the Javascript environment? How do you handle destructive assignments? 2) Does Replay record actual syscalls made by the browser, or is it recording calls to the browser APIs by the javascript code (which I guess are effectively syscalls from the javascript code's perspective)? 3) The ordered lock technique described in https://medium.com/replay-io/recording-and-replaying-d6102afee273 https://medium.com/replay-io/recording-and-replaying-d6102af... makes sure that threads access a given resource in the same order, but what about threads accessing different resources in the same order? e.g. when recording, thread 1 accesses resource A before thread 2 accesses resource B. It seems like the ordered lock technique doesn't help you maintain that ordering in the replay. Is maintaining that kind of ordering across resources not actually necessary most of the time?

IshKebab 5y ago
Thanks for the links to the blogs. I was wondering how it worked and the "How it works" bit on that page said nothing. Nice that they've explained it. It looks like the blog does answer your questions though: > The interface which Replay uses for the recording boundary is the API between an executable and the system libraries it is dynamically linked to. I assume the ordered locks use a global order.
- deleted 5y ago
  [deleted]
- glass_of_water 5y ago
  As bhackett confirmed, you're right about recording at the system library call level. I wasn't sure if it was more of an analogy or only referred to a version of Replay targeting backend servers written in other languages like Go, especially since the author mentioned hooking into the JS runtime in https://medium.com/replay-io/effective-determinism-54cc91f5693c https://medium.com/replay-io/effective-determinism-54cc91f56.... But it looks like I misunderstood, and their browser product is their generic record/replay library integrated into Firefox, rather than a reimplementation of the same concepts.

mellosouls 5y ago

I love this, and apart from its intended purpose it seems like a potentially valuable learning tool for devs new to a language. Years ago I used Adobe LiveCycle, a horrible "low code" enterprise framework foisted on us from far above. One thing I always did like about it though was its replay tool which this reminds me of. I was always surprised it wasn't more of a thing in the dev space, it seems very useful.

gregsadetsky 5y ago

I just learned about it here and tried it out on a small to medium-sized TypeScript React app. It worked right out of the gate! The original TypeScript files appeared in the Source browser. Time travel works. And the video replay too of course. Really impressive. Will keep it around for sure to try debugging a real issue next time. Congrats on the launch and the great app!

NiceWayToDoIT 5y ago

Dan Abramov 2015 https://www.youtube.com/watch?v=xsSnOQynTHs https://www.youtube.com/watch?v=xsSnOQynTHs But there was one earlier presentation I cannot find it, guy was showing live debugging of the video game. Not sure is it TED or one of conferences ... Edit: This is it: Bred Victor: https://youtu.be/EGqwXt90ZqA?t=1006 https://youtu.be/EGqwXt90ZqA?t=1006 2013 Future of programming https://www.youtube.com/watch?v=8pTEmbeENF4 https://www.youtube.com/watch?v=8pTEmbeENF4

mkl 5y ago
*Bret Victor: http://worrydream.com/ http://worrydream.com/ Many past threads on HN: https://hn.algolia.com/?q=worrydream https://hn.algolia.com/?q=worrydream

elwell 5y ago

Surely not as fully featured, but the general idea has been possible for ClojureScript Re-frame with: https://github.com/day8/re-frame-10x https://github.com/day8/re-frame-10x

akomtu 5y ago

Sorry to be blunt. That's a cool toy for nerds who have too much spare time at work. Real projects don't care that much about quality, they care about adding features as fast as they can while keeping the quality bar slightly above "completely broken". Nobody's going to look at these replayable traces because by the time such a bug gets seen by a dev, the project would've been half rewritten. This level of quality is just unnecessary in web.

Waterluvian 5y ago

This looks exciting and I’m going to give it a try. For what it’s worth, if it helps with marketing: I am immediately skeptical that it’s going to be some mix of tedious to get working with my specific webpack dev server setup, be slow or unreliable, or never actually keep the state I need. I’m hoping to be wrong on all of that. But when I scrolled the (beautiful) website, I would have loved to see some really nasty example in addition to the very elegant introductory “show don’t tell” example. I want to see the first and think “okay I get it” and then be shown something really complicated to illustrate just how durable the tool is.

ospider 5y ago

It's disgusting that I saw a captcha instead of video on the front page. Please consider not to use vimeo

username3 5y ago

Can this show code coverage like WebStorm’s spy-js to show which code was executed?

jazzdan 5y ago
(Replay engineer): Kind of! In the code viewer's left hand side gutter, the one that shows line numbers, if a line of code was never executed it is greyed out. Otherwise if you hover over it we show you how many times that code was executed, and from there you can set a logpoint/breakpoint.

yreg 5y ago

Is it correct that to use this I need to download their app and then enter my Google password inside it? How do I know it's safe? Is there any other way to try it out?

edelhans 5y ago

This looks very cool! How well does this play together with browser APIs, specifically anything that uses the media source extension?