Reference Guide
Events

Events

Because we actually replay the browser session as it ran before, Replay collects all of the event handlers that ran while recording. This means that all the mouse events, worker messages, or even uncaught promises are available for inspecting and debugging.

Viewing events

Events are shown in the Events pane in the left sidebar and can be output to the Console.

The Events pane is within the Replay Info panel. Click on an event to jump to that time in the replay. The video and console will update to reflect the application at that point in time.

💡

Sometimes one event is handled multiple times. This can be surprising at first, but it's pretty common for one mouse click to have a lot of handlers.

Screenshot 2023-04-07 at 8.47.24 AM.png

Jump to code

Time travel from click and keystroke events into their React onClick and onKeyPress handlers. Jump to code takes you to the relevant code where you can begin debugging with print statements.

Untitled

⚛️

Often libraries like React will install their own global handler and then pass the event to a component event handler like onClick. We do our best to map these, but if you see an issue please let us know by submitting a bug report (opens in a new tab).

Logging events to the console

Select which events are logged to the console in the Console Settings pane. Click the left arrow icon next to ‘Filter Output’ in the console to access the settings.

Filter by event type and sort based on common and other events. We also show the number of times an event type occurs.

Types of events

Mouse Events

By default, mouse events will include click, dblclick, mousedown, mouseup. You can find mouse move events such as mouseover, mouseenter, and mouseout under advanced.

Screen Shot 2022-01-27 at 10.42.11 AM.png

Keyboard Events

Keyboard events include input, keydown, keyup, and keypress.

Screen Shot 2022-01-27 at 10.43.22 AM.png

XHR Events

XHR events include load, loadstart, loadend, abort, error, progress, timeout, and readystatechange.

Screen Shot 2022-01-27 at 10.44.16 AM.png

Other Events

Other events captured could include Animation, Control events like focus and blur, DOM Mutation, and Timer events like setTimeout fired. If you find an event that is not captured, let us know with a bug report (opens in a new tab).