Quickstart guide

Record your first replay with the Replay browser in under a minute.

Recording your application with the Replay browser lets you capture a bug once and inspect it after the fact without having to reproduce it again. This makes it possible to:

The ability to record and deterministically replay runtimes like Chrome is referred to as "time travel".

Let's use the Replay CLI to record our first replay so you too can start time traveling:

1

Install the Replay CLI

Run the following command to download and install the Replay CLI:

Terminal
npm i -g replayio
2

Start recording

Run the following command to open the Replay browser and start recording.

Terminal
replayio record

This command will:

  • Prompt you to login to your Replay account (if not already logged in)
  • Install the Replay browser (if not already installed)
  • Open the Replay browser for you to record an interaction to dive deeper into
3

Upload your replays

When you close the browser, you'll be prompted to upload your recordings.

Terminal
New recordings found. Would you like to upload them? (Y/n)
4

View your replay

Once the upload is completed, the CLI will give you the replay url.

Terminal
Uploading recordings...

a616009e.. overboard.dev Now 7.5s (uploaded)



View recording at:

https://app.replay.io/recording/a616009e-b825-4c54-83b4-e20bd8c0cb25

This URL is a real recording. Press the link to inspect the site!

When you open the "View recording" link in a browser, you'll be greeted with a dialog asking if you want to upload the recording to a specific team.

An upload preview of www.overboard.dev that says "only you can view this" with an option to add other people to see the upload

If you don't have a team yet, you can create a team in the Replay Library.

5

Inspect your replay

Once your recording is uploaded, you're able to inspect it through the Replay DevTools.

A preview of the website that was recorded; Overboard. It includes a sidebar of events the user took. The site itself is an "Add to cart" button underneath a checkout for fictional hoverboards

By default, you're set to "Viewer" mode. You can change the view to "DevTools" mode either by pressing the toggle in the top-right corner or by selecting an "Event" and pressing "Jump to code"

Let's jump to the last "Click" before the recording hit an error and see the code related to it:

It looks like we're making a "POST" to an endpoint of "/api/purchase". Let's open our network panel and see what the request looks like:

The network tab in the DevTools panel which shows a 400 error on the purchase

Selecting the 400 error in the network panel allows us to look at the request and reply. Here, the request is indicating that "Color is not found, recieved: undefined" was the response from our backend:

A response subtab on the network request panel showing the error message

But looking at the request body, it looks like we're sending the color along just fine:

The request subtab on the network request panel showing the request body with "{color: blue}" With this information, we can go to our backend team more informed with how to report a ticket to solve this.

We can even integrate Replay into our CI/CD pipeline to help debug flakey tests much more efficiently.

FAQ

Read more

Manage your recordings

Learn how to upload, remove and view your recordings using CLI

Replay DevTools

Learn how to use Replay DevTools to debug your tests.

Setting up a team

Learn how to create a team in the Replay App

Test Suites

Stay on top of your test suite's health with Replay for Test Suites.