logo

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.
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)
Related posts
We show our prototype integration with OpenHands for reliable AI development
We share our plans on helping AIs resolve issues fully automatically
Over the past couple of years, JS frameworks like Next.js and Remix have gone full stack. We believe it’s time for DevTools to join the party!
Powered by Notaku