logo

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.
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
Related posts
post image
This week we’re excited to share Elements Panel V3, which brings one second element loads.
post image
Today we’re excited to share an entirely new version of React DevTools which Brian Vaughn wrote from scratch.
post image
Today we’re excited to share the new time travel aware Full Text Search. The next time you search, you’ll notice that we’ve dimmed out the results which were not executed.
Powered by Notaku