Changelog 51: Instant Replay 🚀
Today, we’re excited to release Instant Replay. Instant Replay is one of those updates that changes everything and is the reason we’ve been heads down the past six weeks.
What exactly is time travel? How do we ensure we can reliably record and deterministically replay any website?
This post walks through the fundamental concepts needed to make a performant time-machine.
Our plans to reach seven second start times by June. The new React Timeline and suspense architecture.
Changelog 48: Multiplayer 🎮
Today we’re excited to release shared print statements. When you open a replay, you’ll now see print statements added by others.
We’re excited to be shipping the React Events Timeline today! The next time you select a Click event in the Events Panel, you’ll seek to the component’s onClick handler!
Changelog 46: Chrome-palooza 🚀
We’re excited to share three big Chrome updates today: Chromium 108, Elements Panel, and React DevTools!
A deep dive into using time-travel debugging superpowers to analyze recordings and extract React DevTools data
Changelog 45: Butter Score Report 🧈
We’re excited to share that over the past six months we’ve increased our P50 Butter Score from a 30 to a 90. 43% of replays now start in 15 seconds and resolve requests in under 2 seconds.
The best way to setup an octokit instance so that it can interact with the API on your behalf.
How to set up a GitHub App that can listen for pull requests and create checks.
Changelog 44: Cypress Panel 🚀
Released the Cypress panel, our third framework integration, to bring local debugging into CI - join our beta. We had some fun with ChatGPT and print debugging. We released a new comments editor, stepping machine and updated source search.
Changelog 43: Execution Cache FTW
Released execution cache compressing thousands of GBs in execution indices so that recordings are tens of MBs. We also said goodbye to Code Mirror and published a case study with Midnite.
Case Study: Midnite uses Replay to fix issues between frontend and backend, adopts in Support workflows, design and code reviews, fix network issues with live betting, and in CI to debug test failures before shipping to production.
We shipped the Network Monitor, a big step for recording e2e tests. We kicked off a “runtime as a db” project to store in-memory execution which will give us a performance boost. We also shipped a new source viewer.
Changelog 40: Thank you ❤️ 🛹
Thank for the reaction to our new landing page, reply to get some swag. We also made some performance improvements, added new UX for print statements discoverability and published a video with Basement Studio on how we built the site.
Announcing BugSlayer 🛹 🚀
We launched a new landing page with a nod to Bret Victor and a quote from Pantheon’s CEO, “if a picture is worth a thousand words, a replay is worth a thousand pictures.” We also talk about where we going with Test Suites and an offer for some swag.
Changelog 39: Chromium + Cypress 🚀
We announced two big Test Suite updates - switching our default CI browser to Chromium and an update to Cypress and opening the beta to more partners. We also featured one of our beloved users, Mateusz using Replay to debug a Typsescript error.
Changelog 38: Broken Glass 🧹
We shared updates to Replay’s reliability and our strategy to remove broken glass from the UX. We went deeper on Backend performance, a new Console in Devtools, an update Frontend architecture and another Mateusz feature to fix an issue in Redux with Mark.
TableCheck transforms QA <> Dev communication to support thousands of restaurants and hotel chains
Case Study: Tablecheck uses Replay to manage issues across multiple markets, frontends and tech stacks and in communication between QA and Dev teams, in code reviews, and particularly to do so asynchronously. Up next is bringing replay to CI/CD.
Replay achieves SOC2 🔒
Replay achieved SOC2 Type 1 & Type 2. We’re never done working on our security program and we’re committed to sharing information about our security improvements going forward.
Changelog 37: Test Suite Dashboard 🚀
We shipped Test Suites Dashboard for Playwright - helps you see your test runs and debug them after the fact, especially useful when you see when a test started failed and compare to passing runs. We also shared updates to Test Suite Comments, Chromium, Console Search, some bug fixes around Source Maps with photos from our Summer Offsite.
Changelog 36: Test Suite Comments 👋
Test Suites Comments entered into closed beta for Playwright. We published case study with Glide. We shared updates like 4X faster scope mapping, frontend architecture changes, docs for installing certificates, source maps for Node, and other bug fixes with source maps and data fetching. Also, a fun React bug fix with Brian Vaughn.
Case Study: Glide Apps uses Replay to get out of “repro” purgatory improving developer velocity and revolutionizing QA + Support workflows and to document PRs. Glide looks forward to using replay for Node issues and in CI.
Changelog 35: Case Studies 🚀
We published our first case study with Pantheon. We shared updates to performance with faster page loads, start times and frontend architecture updates and some other bugs fixes and uses of Replay to highlight how we use Suspense Caches with Brian Vaughn.
Changelog 34: Heat Maps V1 🔥
We shipped Heat Maps, rewrote our Object Inspector, started working on better replaying performance and made some changes to Network monitor, Focus Window and Autocomplete.
Case Study: Pantheon uses replay to debug performance issues, improve developer velocity in addressing bugs spotted from CEO and largest customers, and in ongoing dev-dev communication.
Changelog 33: Promoting the 🦄
We updated Print Statement fixes so you can add a 🦄 with a single click. We also highlighted how to debug issues in Hydrogen, Shopify’s new react-based framework for building custom storefronts.
Changelog 32: Focus Mode V2 🔍
We released Focus Mode V2, which significantly more polished, faster and accurate! We alos added support for Source Maps in Node, drafted a proposal for a brand new frontend architecture, fixed some bugs and spent highlighting common pit falls of a lot of React apps at scale can hit by looking at a replay of Pinterest.com.
Changelog 31: Turbo Replay 🚀
We launched Turbo Replay allowing replays to start and print statements to be evaluated faster. We reference our Rereplayability roadmap and share updates like our rebase of our Node recorder, Protocol Viewer + Timeline and some bug fixes.
Changelog 30: Redux DevTools V0.5 🚀
We released Redux DevTools 0.5 (Redux DevTools was the OG time travel debugger). We made updates to our Focus Mode editor, Global Loader, Library Fileters and fixed some bugs. We also dove into Walmart.com to look at its NextJS and GraphQL stack, all inspectable in the replay!
Changelog 29: 🦄 Console
We shared the early versions of the Unicorn Console. We released the Replay Launcher, a Chrome extension which helps launch the Replay browser and highlighted PDF.js using Replay.
Changelog 28: Enterprise Security 🔒
We shared some enterprise security update; SOC 2 Type 1 audit completion, Self-Storage, URL Allowlist, Network Monitoring. We made some other product updates, published a blog post on how we diagnose crashes, announced our weekly Office Hours and launched replayable.dev to publish OSS bugs folks found and fixed using replay.
Changelog 27: Search 🔍
We shipped Console Search and Global Search. We added some updates to the Network Monitor, Billing and our Library. We also highlighted a debugging journey with React Hooks.
Changelog 26: Loading 1, 2, 3
We shared some loading improvements, other product updates like command shortcuts and longer replays and linked to post “Building the Impossible” and highlighted Cleevio.com, one of our earliest users.
Building the impossible
Blog post about how we built Replay and early lessons that cemented our cultural values.
We welcome Mark Erikson from Redux and Brian Vaughn from React to the team and share our plans for framework debugging! We also highlight other blog posts, link to our feature on Pod Rocket and highlight Open Sauced, one of our friends and early users.
Blog post describing Replay mechanics and how that translates to bringing time travel to React DevTools and how to bring time travel to other DevTools like Vue, Cypress, Apollo and many more.
Changelog 24: CoffeeScript ☕
We shipped Coffescript ☕ allowing you to record CoffeeScript web apps and node scripts and then debug them in Replay DevTools.
Kannan goes deep on how to debug Replay.
Changelog 23: Heat Maps 🔥
We shipped Heat Maps, when you open DevTools, select a source, and see the function call counts in the outline view; this makes debugging faster. We made some other product updates and highlighted how we used replay to fix several issues with Comments.
CI Improvements — March 2022
Ryan highlights some CI improvements, mainly our GitHub Actions for our Playwright integration.
Changelog 22: Autocomplete V2 🚀
We shipped Autocomplete V2. We made some updates to Network Monitor Comments and made longer replays a lot faster. We also did a deep dive into Vercel’s Next.JS Live playground to show it’s like to edit a file and see the UI update immediately.
Changelog 21: Playwright Tests 🎭
We released Playwright support! We made some updates to command shortcuts, additional layouts if you want a more visual debugging experience and shared a fun case study of Mateusz from Stately debugging XState using replay.
Changelog 20: Dark Mode 🚀
We launched Dark Mode. We published two comparison blog posts to Chrome’s Recorder and Session Replay, and we highlighted one of early customers, Dynaboard.
Changelog 19: Focus Mode 🚀
We shipped Focus Mode! Our designer, Jon Bell walks through the design process and we share some other updates as well as a case study on our Jest proof of concept.
We shipped Source Map Visualizations (thanks Evan Wallace). We shared a case study of using replay to fix an issue in Excalidraw.
Changelog 17: Eager Evaluation ✨
We shipped Eager Evaluation. Mark Erikson joined the team! And Vercel’s Guillermo Rauch uses replay to see NYTimes’ seamless redirect on Wordle’s original homepage.
Changelog 16: Autocomplete ✨
We shipped Autocomplete! And we found a bug in seamless.com and made a replay to show where wonton soup could not be added
Changelog 15: Bug Report 🐞
We hit a milestone with bug reports since our public launch! Our Community Lead, Cecelia Martinez, uses replay to fix her first bug and we shared Geoffrey Litt’s debugging session.
Changelog 14: Elements Panel 🚀
We launched the Elements Panel! We shared some updates on autocomplete and start times then highlighted a case study with Steve Ruiz who used replay to debug tldraw and its packages
Changelog 12: Network Monitor V1 🚀
We shipped Network Monitor Request and Response bodies and shared some fun culture updates like our Smile File 😃
Changelog 13: Rebased Replay Browser
We released a new version of the Replay browser based off of Firefox 91. We shared updates to our elements panel, and a case study with Paul Shen who sued replay to debug natto.dev
Changelog 11: Print Statements 💃
We shipped Print Statements - a new in-line action reimagining print statement debugging.
Changelog 10: Function Search 🔍
We shipped Function Search, added a new Command Palette and shared a bug fix example from Jason at Glide in their canvas spreadsheet editor.
Changelog 9: Network Monitor V0.5
We shipped an early version of the Network Monitor 🚀. And we shared a story of how the new Outline View nearly didn’t ship because we were having a lot of issues with React hooks and memoization.
Changelog 8: On-Demand Paints
We announced On Demand Paints, a big breakthrough! We also shared a bug fix with GitHub’s Project Iteration Field Settings.
Changelog 7: Full Text Search
We revamped Full Text Search. And we sent a big thank you to our early adopters, design partners and highlight our discord, design journal and GitHub discussions.
Changelog 4: Collaboration
We shared our collaboration roadmap, some updates like our Windows beta and a case study of us testing top sites in Playwright e.g. Facebook and found 4 bugs in the process!
Changelog 3: Privacy Panel
We shipped the Privacy Panel. Replays are private by default and we follow industry standard for security practices since day one.
Changelog 6: Windows beta 🎉
We launched an early version of our Windows browser and shared some other improvements.
Changelog 5: UI Refresh
We refreshed Replay’s UI making it easier to leave comments in the code and follow conversations in the sidebar, and also added a whimsical coat of paint. We also highlighted a case study with Databricks’ Notebook team.
Our first changelog summarizing our focus on the onboarding experience.
Replay: November Issue
We summarized user feedback and shared an early look at how much time you’ll save not having to reproduce issues locally. We shipped a new recorder and breakpoints panel.
Week 6: Scientific method 🔬
We talk about the scientific method as an analogy to successful debugging.
Week 5: Instant Replay ⏺️
We compare time travel debugging to Instant Replay and share some product updates.
While working on our new landing page, I noticed that the title would initially have a serif font and then be replaced with the correct header font
Week 3: Thinking Tools
We talk about our beliefs and assertions that led to the creation of Replay.
Week 2: Early Reflections
When we started Replay, we had a hunch that the best way to understand software was to record it and explore it after the fact. It's been super gratifying to hear that Replay has already helped folks