End User Tracing in a SkyWalking-Observed Browser
summary
SkyWalking’s browser agent extends APM into the client by building five components that capture exceptions, map them to original code with source-map-based stack traces, collect timing via the Navigation Timing API plus a MutationObserver for first meaningful paint, and create distributed-tracing segments by instrumenting XHR and fetch interceptors. It reports data via beacon/image/XHR, handles single-page apps (hash-based auto or manual page updates), and produces error counts, rates and per-request spans that are usable by the SkyWalking backend.
AI-written summary · about
chapters (8)
- 0:00Start
- 4:37Error Tabs
- 6:46Range Error
- 17:10Dashboard for Browser Agent
- 19:03Performance Matrix Collection and Calculation
- 26:44Manual Reporting
- 29:55Intercept Exception Functions
- 32:17Three Ways To Send Data
related talks
10mLightning Talk: Use SkyWalking Satellite to Process Tracing, Logging and Metrics in Serv...
20mThe (Full)stack Trace: Understand Your App with Distributed Tracing
30m"Observability for the Front End"
22mTracing is for Everyone, Not Just Backend Engineers. (How Tracing Could Help Front-e...
40mObservability for All!
25mFollow The (Full)stack Trace: Understand Your App with Distributed Tracing
53mObservable Web Applications
33mObservability in Service Mesh Powered by Envoy and Apache SkyWalking