Helen
Now
Absolutely!
Colors
export function handleSubmit(event) { event.preventDefault() const form = event.currentTarget const data = new FormData(form) const formData = Object.fromEntries(data.entries()) const body = JSON.stringify(formData) const response = await fetch(form.action, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: body, })Click to add a print statement
1 hit if (!response.ok) {"response", response
Helen
Now
Tina
Now
Woohoo, thanks for fixing that so quickly! 🙌🏼
const errorMessage = await response.text() throw new Error(errorMessage) }}- ▴App
- Hoverboard
- ▴PurchaseForm
- PurchaseButton
Async Collaboration
Record and share replays with your team.
Replay.io gives your team the ability to time travel. When you share a replay with your team, they can inspect the replay as if they were sitting next to you when you recorded it. This is because when they’re viewing the replay, we’re replaying a browser in our backend that thinks it’s interacting with you, your computer, and the internet.
Time Travel Debugging
Debug replays with developer tools.
Replay.io lets you travel back in time and debug the application as it initially ran with familiar developer tools. You can inspect a React component at any point in time or add a print statement and see the logs in the Console. Anything is possible when you can replay!
Developer Tools
Time travel debugging lets you replay the browser as it ran before, so that you can start debugging immediately and get into the flow state quickly. How Replay works.
Paused Timeline
You can interact with windows now. Try changing the log marker style.
export function HoverBoard() { const [pos, setPos] = useState({left: 0, right: 0})Click to add a print statement
1 hit const [angle, setAngle] = useState(0)"rotation", angle
}Paused Timeline
You can interact with windows now. Try time traveling to each log.
Colors
Paused Timeline
You can interact with windows now. Try inspecting any component.
- ▴App
- Hoverboard
- ▴PurchaseForm
- ▴Colors
- Colorkey="red"
- Colorkey="green"
- Colorkey="blue"
Colors
Paused Timeline
You can interact with windows now. Try inspecting any element.
- ▴<body>
- ▴<main>
- ▴<div class="hoverboard-container">
- <svg class="hoverboard" />
</div>
- ▴<form class="purchase-form">
- <input type="radio" />
- <input type="radio" />
- <input type="radio" />
</form>
</main>
</body>
Colors
Paused Timeline
You can interact with windows now. Try inspecting any request.
Colors
Paused Timeline
You can interact with windows now. Try navigating the callstack.
- angle: "23deg"
- board: {"pos":{"left":12,"top":23},"angle":23}
export function calculateBoardAngle(board) { const { angle } = board; return `${angle}deg`}export function Board({ board }) { const angle = calcuateBoardAngle(board) return <Svg type=”board” angle={angle} />}Async Collaboration
As easy to record as a video. Sharing replays with your team lets you avoid needless back-and-forths and collaborate in new ways.
Bug Reports
Add replays to bug reports so that anyone on the team can debug the issue with a single click.
“Add to cart” fails when user submits.
Hoverboard flickers when flipping.
Hoverboard should change color mid flip.
Color picker doesn't affect the hoverboard
Text is not selectable
End-to-End Tests Beta
Record your tests in CI and debug them after the fact. You’ll love how easy it is to see whether you broke the test or if it was simply flaky.
Pull requests
Include replays of the problem and the fix in the PR so that reviewers can see what was wrong and how it was fixed.
Hoverboard flickers when flipping.
Recorded by Daniel Miller
Hoverboard flips smoothly.
Recorded by Elaine Baylor
Feedback
Share replays in Slack when you want to get others feedback. In context comments make it easy to discuss function calls and ui elements.
Why is update Cart called without a user id?
api/cart.ts
Should the cart show quantity field be disabled?
Qty 2“It's a well known fact that engineers want high quality bug reports, with extensive details...”
“It's a well known fact that engineers want high quality bug reports, with extensive details...”
“Replay.io is galaxy brain tooling. Real gamechanger.”
“I first saw Replay at ReactConf in 2019 and came away thinking "this is way cooler than anything I saw...”
Guillermo Rauch
CEO, 
Vercel
Guillermo Rauch
CEO, Vercel
Dan Abramov
Mantainer, 
React
Kevin Ghadyani
Engineer, 
JavaScript
Trusted by top teams
Glide.com
Glide's mission is to put the power, beauty, and magic of software development into the hands of a billion new creators.
Glide.com
Glide's mission is to put the power, beauty, and magic of software development into the hands of a billion new creators.
Universal & Secure
We’ve spent the past 7 years researching how to record and deterministically replay runtimes securely, performantly, and reliably. The result is a recorder that is enterprise ready and stress tested on the most ambitious applications.
Firefox
Today
Chrome
Beta
Safari
BetaFirefox
TodayChrome
BetaSafari
Beta
Tina
Now