Mark Erikson

"Steal second base, Amelia Bedelia! Run home!" :)

Great discussions again this month! We looked at the release of Vinext and what that means, and has a pretty long sidebar on how AI tooling is affecting the industry

so i think a basic answer is it’s a built-in way to do async state machines with side effects. if this doesn’t ring a bell, i’m not sure what else to say! i’ve definitely run into these cases in the past. the pages has demo sandboxes (scroll down!) which give an idea.

honestly i think a significant part of this is because it was actually kind of impossible to figure out how to use them because the official documentation was barely there.

very thankful @ricky.fm is on a streak rewriting it, e.g. with react.dev/reference/re...

btw, worth noting:

this _ought_ to give real perf info _from production apps_!

React DevTools is normally dev-only. Helpful for relative ("Comp A is 3x as slow as B"), bad for absolute.

Replay can inspect _prod React_ (with sourcemaps). So I can get timings for recordings of prod apps! :)

A week-ish later - it's working! Rebuilt my React+Redux dispatch+render perf POC on top of Replay's current infra. Currently extracting dispatch+render timings and selector calls . Just raw data atm, but now I can build meaningful visualizations / perf analysis with this!

time travel's awesome!

Welcome | Schema Benchmarks Welcome to Schema Benchmarks!

Check out our welcome post over at schemabenchmarks.dev/blog/welcome!

We measure different aspects of runtime performance for schemas:
⏱️ Initialisation
✅ Validation
🔄 Parsing

We also translate 📦 bundle size directly into 🌩️download speed 😎

Incredibly hyped to announce Schema Benchmarks, a project I've been steadily working on in collaboration with @fabianhiller.com!

It aims to provide a central and transparent resource for many of the metrics that matter for schemas, including bundle size and runtime performance 😄

⚠️ State of React survey results are live! I just went through the results, and there’s *a ton* of interesting stuff in here.

Sharing my highlights in this thread. 🧵

see, this is the part I really want to talk about how we did this :)

then once we have the tens of thousands of timestamps and location details, we can correlate that into an "async dependency graph", like:

- useEffect callback
- component rendered
- render pass started
- setState called
- promise resolved
- network request
- from an earlier useEffect

fun fact: since we need to track _every_ hit to ~40 key lines of code in React, we actually:

- Find key snippets in React itself (`renderWithHooks`, etc)
- AST-insert our own callbacks
- Then apply that to the _minified bundle_
- and re-run the entire recording with the instrumented bundle!

Replay - Browser DevTools from the future. Investigate bugs and flaky tests with perfect reproducibility.

The overall recording/analysis process does require very expensive processing in the cloud - we're replaying the entire browser and its OS syscalls!

docs.replay.io/basics/time-...

The React analysis layer is an extra step we built on top of the time-travel processing core - modest extra cost.

🏖️⛈️!

Formatted console log messages showing output from a proof of concept script that extracts Redux dispatch timings from a Replay recording, as a first step towards performance timing analysis data

update: already have the first POC of the React+Redux dispatch+render perf timing working! lot more data wrangling to do, but just pulling out these values proves the pipeline works!

on top of that, the new Replay MCP is actually helping me investigate behavior! genuinely incredible results!

Yeah, that's a great series! and honestly probably a lot deeper and more informed on React's internals than _I_ am :)

We've had multiple people ask the Redux team for better ways to measure perf from Redux dispatches, and there still isn't a good way to get a full picture of where the time was spent other than tracing call graphs and flame charts.

I wanted to build that with Replay, and now I think I can!

A screenshot of a JS object expanded in Chrome DevTools. It contains timing data for a Redux dispatch, React render, and Redux selector calls, extracted from a Replay time-travel recording in 2023 as part of a prototype research effort.

So I'm going to pick that up tomorrow and see if I can reimplement the perf timing and processing logic to extract the same data.

Should then be able to expose that via the new Replay MCP, too!

Here's my old prototype PR:

github.com/replayio/dev...

and example dispatch + selector perf data

Related to this:

In 2023 I put together a POC "React + Redux perf analysis" tool in Replay DevTools. Could extract render + dispatch timings, selector calls + timings. Worked! but slow and expensive.

Today I realized our analysis layer does 80% of that, and I could build the rest, efficiently!

I was actually thinking more about the React instrumentation and analysis layer itself :) ie the part that we built and that I'm more familiar with.

but yeah, looks inside React could be interesting too!

mostly me musing into the void :) but if folks feel like this is something you'd be interested in me writing / talking about, say so and I could try to make time to come up with something! :)

A blog post at least I could put up, and it'd be there if anyone wants to read it. Conf talks, though... would have to come up with the right concept and actually get accepted.

I did do one a couple years ago on our React DevTools + time travel integration. But beyond that, not sure it'd work out.

My first year at Replay was modernizing our own DevTools FE codebase. Since then, I've spent all my time building out our sophisticated React analysis backend and digging into React's internals.

I'd love to do conf talks and blog posts about this, but I feel like it's so niche there's no audience.

We technically have a fork of Node that's Replay-enabled... but it's an ancient Node 16 build that we never got past alpha.

It _works_, and @andarist.bsky.social has used it a lot to debug TSC. But obviously not anything you could use to record a modern server process.

so, no special domain knowledge at this point - current intent is to give a coding agent in _your_ codebase access to detailed knowledge about what actually did happen in an app recording at runtime.

The MCP currently provides tools that use Replay's tech to answer questions about the recording at a point in time (React comp tree, DOM tree, etc), as well as sources. Working on expanding it.

Internally we've built the analysis to help solve things like "why was this useEffect stale?"

I think @filiphric.com is working on putting together some demos of the MCP - maybe he can provide some numbers / examples of token usage.

Don't have any metrics on that atm. honestly _I_ haven't had a chance to play with it yet :) we just put the MCP itself together in the last week. But, we've used the underlying analysis layer in Replay Builder for the last year+, and seen that help the AI fix bugs in apps it's building.

I personally have spent months building out our React analysis layers to deeply understand React's internals. This allows us to know the React component tree at any point in time in a recording.

Now it's possible to inspect the component or DOM trees, JS execution, and more, _automatically_!

I'm _very_ excited about this!

Time-travel debugging is already magic. But it does still take a lot of work to do the debugging yourself.

We've built a lot of _very_ sophisticated analysis for React and async events... and now we can expose that to _your_ preferred tool to help solve bugs!