Inspect your replay

Once your recording 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 recording 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 is indicating that "Color is not found, recieved: undefined" was the reply from our backend:

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 approach our backend team with a more informed report to solve this issue.