logo

Changelog 35: Case Studies 🚀

profile photo
Jason Laster
Image without caption
We’re excited to launch our first Case Study today. You can now go to replay.io/case-studies and see how Pantheon.io uses Replay.
We’ll be rolling out several Case Studies soon, but wanted to start with Pantheon because it has been exciting to see how Replay has helped them grow their engineering team from 60 to 200.
It’s easy to focus on how Replay helps you fix a bug faster and forget how Replay also enables new ways for teams to collaborate.
We’d love to hear what you find valuable. Expect more stories in the near future!

Performance

  • 5X Faster Page Loads We designed Replay’s recorder so that one day it could run for days. In theory it’s fast, but in practice bottlenecks creep in. We found one of those cases last week where our source map uploading logic was hashing source and source map content. In the extreme case, this could take 3.5 seconds. We optimized our hashing strategy (here) and brought it down to 0.6 seconds. We hope to drive it to zero in the short term as well.
  • Faster start times Starting today, replays will now start in under a second compared to 23 seconds. The wild thing is how far we’ve come from February, when we were 43 seconds. This speed up is the result of three months of work improving our loading experience. We are also investing in backend caching so that opening replays will be significantly faster the second time.

Frontend Architecture

  • New Console The new Console is getting closer to shipping. This week has been about integrating it into the existing DevTools. (1, 2, 3)
  • Visual Regressions We’re now using Playwright screenshots in Docker to test visual changes from prior runs (PR).
  • Suspense Cache We are doubling down on Suspense Cache (1, 2, 3). When you see how great the new Console is, you’ll see why.
  • Yarn + Next 12.2 We migrated from NPM to Yarn, upgraded Next and our Vercel config, and saw our preview and production build times drop from 6 to 3 minutes.
Image without caption

Additional Updates

  • Code Cov The code cov script now generates reports for replays. We often get questions about what is possible with the protocol. This is a great example!
  • Library Routing We overhauled the Library’s routing so that the URL always includes the selected team and additional filters. This PR is a good example for how you can teach Next to handle nested routes.

Bug Fixes

  • Scope Mapping We fixed a couple of edge cases in our Source Map scope mapping logic this week to better handle naming collisions.

Replay Stories

We’re excited to highlight the new Console this week. Checkout Brian’s Loom to see it in action and the replay to see how the Suspense Caches work in action.
Image without caption
post image
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!
post image
We’re excited to share three big Chrome updates today: Chromium 108, Elements Panel, and React DevTools!
post image
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.
Powered by Notaku