Individual Debugging
Replay is a time-travel debugger. Record your app, and get a deterministic capture of everything that happened — every function call, every state change, every network request. Then let your coding agent analyze it, or investigate it yourself.
Free to start — no credit card required
Your coding agent can read your code, run your tests, and suggest fixes. But when the bug is subtle — a race condition, a state update that fires twice, a redirect that silently fails — it's stuck guessing from error messages and source code alone.
It doesn't know what actually happened at runtime. It can't see which component re-rendered, what the network response actually contained, or which event handler fired first. So it suggests a fix, you try it, it doesn't work, and the cycle repeats.
Replay gives your agent — and you — the runtime data that turns guessing into knowing.
How it works
Reproduce the issue while Replay captures everything. Use the CLI (`npx replayio record-suite`), the Chrome extension, or let your coding agent trigger the recording. You get a deterministic replay—not a video, the actual program execution.
Add Replay MCP to your coding agent (Claude Code, Codeium, Cursor, etc.) and point it at the recording. Your agent can now inspect the actual runtime—set logpoints, trace function calls, examine state changes, follow call chains. Or dig in yourself with Replay DevTools.
Whether your agent found it or you did, you now know exactly what happened. The root cause is clear because you saw it in the actual execution—not inferred from logs or guessed from the stack trace.
Without a Replay recording, your coding agent can only read source code and error messages. With one, it can see:
The exact sequence of function calls, not what you think ran. Every function on every frame, with arguments and return values.
React component state, Redux / Zustand / TanStack Query stores, local variables — all inspectable at any moment in the recording.
Every request and response with full payloads and timing. Not what the code intended to send — what actually went over the wire.
The actual DOM at any moment in time, not a reconstruction. See exactly what the user saw and when.
Which components re-rendered, what triggered them, and whether it was necessary. Follow the full component tree at any point.
Every event handler that fired, in order, with the state before and after. No more guessing about race conditions.
This is the difference between debugging with evidence and debugging with intuition.
Replay MCP in action
Your coding agent uses Replay MCP to time-travel through the recording and deliver the root cause — while you do something else.
Creating a new task does nothing
The form to add a new task isn't doing anything
I'll investigate why the form to add a new task isn't working. Let me start by exploring the recording to understand what's happening.
Let me look at the CreateTaskModal component more closely to understand its implementation, especially the form submission logic.
I can see the form submission logic. Line 53-54 shows handleSubmit was called once, but let me check where the onSave callback leads to. Let me look at TasksListPage to see how the modal's onSave is handled.
I found the issue! Looking at handleCreateTask (lines 73-93):
setCreateModalOpen(false) (hit count: 1)fetch call to actually save the task!The function closes the modal at the end, but it never makes a network request to persist the new task. The payload is built but never sent to the server.
The handleCreateTask function in TasksListPage.tsx is missing the API call to create the task. It:
fetch to POST the task to the backend ✗Compare this to line 65-70 where fetch is used to load deals - a similar pattern should exist after building the payload on line 92, but it's missing. The function just closes the modal without actually saving anything.
Time travelogue
These aren't toy demos. Real bugs, real codebases, full evidence trails.
7 min
Dan Abramov fixed a race condition in React 18. With Replay recordings, four parallel agents identified the root cause in under 30 minutes — the best run took 7 minutes.
Read the story →— via @dan_abramov
4–9 min
Nadia Makarevich tested AI debugging against three Next.js app bugs. Without Replay, the agent fixed 1 of 3. With Replay MCP, it found all three.
Read the story →— via @nadia
Deeper insights for React.
React, Vue, Angular, Svelte, Next.js, Remix, jQuery, vanilla JS — if it runs in the browser, Replay records it.
Replay MCP works with Claude Code, Goose, Cursor, Windsurf, or any MCP-compatible tool.
Built-in React DevTools, component render chain analysis, Redux / Zustand / TanStack Query state tracking, and framework-aware diagnostics.
Three ways to record — pick the one that fits your workflow.
npx replayio record https://your-app.localhost:3000npm install -g replayioreplayio record <url>Also from Replay
Replay CI Agent records every E2E test run automatically and posts root cause + fix as a PR comment — no manual recording needed. Free plan available, $299/mo for Growth.
Record your first bug and let Replay show you what actually happened.
Free to start. No credit card required.