Inspect your replay

Once your replay is uploaded, you can inspect it with Replay DevTools.

Inspect your replay
1

View the timeline

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"

2

Jump to an event

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

3

Inspect network calls

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 response. Here, the response from our backend was "Color is not found, received: undefined":

The request subtab on the network request panel showing the request body with "{color: blue}"

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 send our backend team a more detailed bug report.