feat(performance-monitor-plugin): add startup insights tab#283
Open
burczu wants to merge 4 commits into
Open
Conversation
Computes a StartupSummary from raw React Native marks: the three known phases (nativeLaunch, runJSBundle, initialMount) plus any unknown Start/End pairs, each with a status of complete/in-progress/missing, and a total duration anchored on nativeLaunchStart.
New first-position Startup tab shows Total startup time plus Native Launch, JS Bundle, and Initial Mount phases with proportional bars. Missing phases render as "—", in-progress phases as "In progress…". Empty state shown when no session has been started.
0b7ca3e to
fff834c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #250 — Add startup insights to the performance monitor plugin.
Summary
derive-startup-summary.ts— new UI-side derivation function that takesSerializedPerformanceReactNativeMark[]and returns a typedStartupSummary: the three known phases (nativeLaunch,runJSBundle,initialMount) plus any unknown*Start/*Endpairs, each with astatusofcomplete | in-progress | missing, astartTime, and aduration. Thetotalentry is anchored onnativeLaunchStartand uses the last complete phase's end time as its upper bound, so it degrades gracefully when e.g.initialMountis absent. Lives alongside the existingderive-startup-phases.tswhich continues to feed the Measures tab unchanged.StartupTab.tsx— scorecard layout component. Renders a Total startup row at the top (no bar — it is the 100% reference) followed by a row per phase with a proportional bar whose width isphase.duration / total.duration * 100%. Missing phases render "—" in muted gray; in-progress phases render "In progress…" in italic gray with no bar. Empty state ("Start a session to see startup data") shown when the session has not been started and no marks have arrived. No TanStack/Virtuoso — there are only 4–N rows, so a simpleBoxwithmapis appropriate.App.tsx— importsStartupTaband inserts it as the first tab (defaultValue="startup"). All existing tabs are unchanged.Startup data comes from React Native's buffered native marks (
nativeLaunchStart/End,runJSBundleStart/End,initialMountStart/End). The PerformanceObserver is already subscribed withbuffered: true, so marks emitted before "Start Session" is clicked are replayed on subscribe and the Startup tab populates immediately without any extra instrumentation in the app.Computation is UI-side (consistent with the existing
derive-startup-phases.tspattern). No new wire events or RN-side changes.Test plan
pnpm --filter @rozenite/performance-monitor-plugin test run— 40/40 passpnpm --filter @rozenite/performance-monitor-plugin typecheck— cleanpnpm --filter @rozenite/performance-monitor-plugin lint— cleanpnpm --filter playground iosor:android) → Performance Monitor in DevTools:New test surface
src/ui/__tests__/derive-startup-summary.test.ts(14 tests) — all three phases complete (correct durations + total), incomplete pair (Start without End →in-progress,startTimerecorded), missing phases (missingstatus, totalmissingwhennativeLaunchStartabsent), unknown*Start/*Endpairs appended after known phases, total uses last complete phase end wheninitialMountabsent, out-of-order mark stream still pairs correctly.