Debugging with Replay: Overview

Replay QA records every test run in Replay Browser and analyzes the recording to explain a failure. You can use that same recording and analysis engine yourself, without a QA project: record your app, then inspect the recording with a coding agent through Replay MCP or by hand in Replay DevTools.

What is a recording?

A recording is a capture of everything the browser's JavaScript engine took as input while your app ran: network responses, user events, timers, random numbers, and the rest. It is not a video and not a series of DOM snapshots. Replaying it feeds the same inputs to the same code, so the app runs again exactly as it did, and can be paused at any point. Anything you could have inspected while the bug was happening can be inspected afterwards: console output, variables at any moment, network requests, DOM state, React renders. You can add console logs to code that already ran and see what they would have printed.

Every recording has a URL of the form https://app.replay.io/recording/<recording-id>. That URL is what you open in Replay DevTools, what you hand to an agent connected to Replay MCP, and what a Replay QA bug report links to as its evidence. How does time travel work? covers the mechanism in more depth.

The workflow

Record

Use the replayio CLI to launch Replay Browser against any URL, reproduce the problem, and upload the recording. A coding agent can do this for you with the replay-cli skill, and Playwright suites can record every test through the @replayio/playwright reporter. See How to record.

Investigate with your agent

Connect your agent to the Replay MCP server and hand it the recording. It can read the code that ran, evaluate expressions at any moment, list exceptions and network requests, and analyze React render behavior across the whole recording. See Replay MCP and the MCP tools reference.

Or open it in Replay DevTools

Open the recording URL to load Replay DevTools: a timeline of the session with console, network, elements, and sources panels, plus React and Redux panels for apps that use them. Console logs you add there appear as if they had always been in the code.

How this relates to Replay QA

Replay QA does all three steps automatically for each journey it runs and writes the result up as a bug report. Use the tools on this page when you want to record something QA is not testing, such as a bug you can reproduce locally, or when a QA bug report includes a recording and you want your agent or your own eyes on the raw evidence. Replay MCP and the Replay QA MCP server are different servers with different credentials; see API keys and tokens.

Source maps

Replay MCP and Replay QA read the source maps your app serves through sourceMappingURL comments. Replay DevTools can also use source maps you upload with replayio upload-source-maps. If your recording shows minified code, see Publishing with source maps and Uploading source maps.

Node.js

Replay Node records Node scripts the same way Replay Browser records web pages. It is built on Node 16 and is not under active development, but it works for scripts that run on that version.

Learn more

Debugging with Replay