Session Replay Viewer
The Session Replay viewer lets you watch replays with full context alongside an event timeline and developer tools. Product managers and analysts use the viewer to understand user behavior and identify UX friction. Developers use the viewer to correlate user actions with network activity and console errors during debugging.
Resizable panels
The expanded viewer opens when you select the expand icon on any replay. The expanded viewer contains three panels you can resize to fit your workflow:
- The video player
- The events timeline
- The side panel
To resize a panel, drag the divider between any two panels. The panels adjust to the position you set.
Amplitude saves your panel sizes to your browser's local storage. The next time you open the viewer, the panels reopen at the widths you set. To return panels to their default sizes, select Reset panel sizes in the toolbar.
DevTools Network tab
The DevTools section of the Session Replay viewer includes a Network tab. The Network tab displays network requests captured during the replay, showing what the user's browser requested and how those requests resolved.
Each network request entry shows:
- URL
- HTTP method
- Status code
- Response time
Select a row to open a detail panel with four tabs:
| Tab | Contents |
|---|---|
| Headers | The request URL, HTTP method, status code, and any captured request and response headers. |
| Payload | The captured request body. This tab appears only when you configure a requestBody capture rule in your SDK settings. |
| Response | The captured response body. This tab appears only when you configure a responseBody capture rule in your SDK settings. |
| Timing | When the request started relative to the replay and how long the request took, with a waterfall visualization. |
To capture request and response bodies, configure requestBody and responseBody capture rules in your networkTracking SDK configuration. For setup instructions, refer to Track network requests.
Use the Network tab to correlate user actions with API calls or identify failed requests that contributed to a broken experience. For example, if a user encountered an error during checkout, check the Network tab to see whether a payment API call returned a non-200 status code at that moment in the replay.
Network tab and the Console tab
The Network tab works alongside the Console tab, which shows JavaScript console logs captured during the replay. Together, these tabs give you a complete picture of client-side behavior during a replay.
To capture console logs, go to Session Replay settings and enable console tracking.
Was this helpful?