⚡ Perf - Defer Application Insights init out of the critical window - #4917
Draft
isaaclombardssw wants to merge 2 commits into
Draft
⚡ Perf - Defer Application Insights init out of the critical window#4917isaaclombardssw wants to merge 2 commits into
isaaclombardssw wants to merge 2 commits into
Conversation
Construct and load the @microsoft/applicationinsights-web SDK during idle time (requestIdleCallback with a timeout, setTimeout fallback for Safari) instead of synchronously in the mount effect, and dynamically import() it so it is no longer in the route's initial chunk graph. This keeps its work out of the hydration window (TBT / long tasks). Web-vitals metrics reported before the SDK is ready are buffered and replayed on load via a small shared buffer, so telemetry measured before init (LCP, FCP, TTFB) is not lost. Adds a jest unit test for the buffer/flush ordering. Server-side telemetry (serverExternalPackages) is untouched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P
Contributor
Coverage report
Test suite run success15 tests passing in 2 suites. Report generated by 🧪jest coverage report action from 2c398c8 |
Add a case exercising flush -> resetWebVitalsSink -> re-buffer -> flush to a fresh sink, verifying the StrictMode/remount safety property: only post-reset metrics replay, once, and the old sink is never re-fired. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P
Member
Author
|
/deploy |
Contributor
|
Deployed changes to https://app-sswwebsite-9eb3-pr-4917.azurewebsites.net ℹ️ Staging slots are no longer created automatically - comment |
Contributor
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
1 participant
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.
Closes #4903
What
context/app-insight-client.tsxbuilt the full@microsoft/applicationinsights-webSDK and calledloadAppInsights()synchronously in a mount effect on every page, landing in the hydration window (contributes to TBT / long tasks), and the SDK shipped in the route's initial chunk.requestIdleCallbackwith a 5stimeout, falling back tosetTimeoutfor Safari (< 17) that lacks it. Effect cleanup cancels the scheduled callback and unloads the SDK.import("@microsoft/applicationinsights-web")inside the deferred callback, so the SDK is no longer in the route's initial JS entry.The
ReactPlugin(from the lightweightapplicationinsights-react-js, already in the graph via the error handlers) is still created eagerly and provided via context, soerror-boundary/global-error-handlerkeep working; only the heavy-webSDK is deferred. Server-side telemetry (serverExternalPackages: ["applicationinsights"]) is untouched.Files
context/app-insight-client.tsx— defer + dynamic import + flush on load.context/app-insights-web-vitals-buffer.ts— small shared buffer (trackWebVital/flushWebVitals/resetWebVitalsSink).app/components/web-vitals.tsx— route metrics through the buffer instead of the context plugin directly.context/app-insights-web-vitals-buffer.test.ts— jest test asserting buffered metrics replay in order once, then pass straight through.Verified
npx jeston the buffer test — passes.npx tsc --noEmit -p tsconfig.json— no new type errors (Tina client generated locally viatinacms dev).npx prettier --checkandnpx eslinton the changed files — clean.pnpm devserves the homepage 200. Note:NEXT_PUBLIC_APP_INSIGHT_CONNECTION_STRINGis unset locally, so client telemetry no-ops here — the actual arrival of page views / exceptions / web vitals in App Insights needs confirming against a deployed environment with the connection string set, and TBT improvement confirmed with a fresh Lighthouse run.🤖 Generated with Claude Code
https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P