Most software is pretty simple, there is a function that takes some inputs and returns some output. This is basically React in a nutshell.
In the simplest case, Replay will just record the inputs because everything can be replayed later. If you want to see how many times a function was called, Replay can re-run the program and count the number of function calls. If you are paused on line 10 and want to rewind to line 7, Replay can just re-run the program to line 7. No problem!
In a slightly more interesting program that has one API call and uses the clock, Replay can record these calls and use them when replaying. This is actually not too bad, basically do it already when we write unit tests.
const name = await fetch("/user-name")
const now = Date.now();
console.log(`Hello ${name}, the current time is ${now}`)
So what do we need to capture in order to record a website and replay it later. We definitely need API calls, user events like mouse clicks, JS stuff and a whole lot of graphics stuff. Unfortunately, when you add it all up the list is really long, like thousands of things, and browsers are super complicated, so even if you did record everything you needed, it would break as soon as the browser changed.
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.