Changelog 32: Focus Mode V2 🔍

profile photo
Jason Laster
Image without caption
We’re excited to release Focus Mode V2 which is significantly more polished, faster, and accurate.
Why is it important?
Focus mode lets you set the execution window that you care about. If you’re looking at a two minute replay, but only care about the first 30 seconds, you can use Focus Mode to focus in on the first 30 seconds of execution.
What has improved?
  1. The Focus Editor now behaves similarly to other timeline tools
  1. The Video Timeline now plays the full replay regardless of whether the focus window is set.
  1. The Replay Protocol Analysis APIs now accept a range.
  1. The Console now shows a summary of the messages that occurred outside the focus window

Design Deep Dive

Windowing is one of those fun problems that leads to interesting design decisions. We published our second Focus Mode design deep-dive yesterday and hope to be able to share a couple more soon.

Additional Updates

Node Source Maps
We added support for Source Maps to our Node recorder (in beta). If you’d like play with replay-node you can get started here and join us in our #Node Discord channel.
Image without caption
Architectural Proposal
This week we shared a proposal for a new frontend architecture (VideoPRDemo) that takes advantage of React's new APIs. As part of the effort, we’re also extracting Replay’s Protocol package so that others can use it as well.
Image without caption

Bug Fixes

  • Commenting is significantly faster
  • Sources are now processed in parallel
  • You can now comment in an unfocused section.
  • We fixed an issue that prevented some users from unsubscribing to emails.

Replay Story

We thought it would be fun to share this replay of Pinterest today which shows many of the common pit falls that a lot of React apps at scale can hit (layout jumps, aggressive re-renders, etc.) (Video)
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