Observability for React applications
summary
Practical guide that shows a concrete implementation: an OpenTelemetry collector + ingress pipeline, a vendor-specific web SDK (Splunk example) and an abstract class with noop and vendor implementations used via runWithTrace to record spans. Examples measure page load across components and a heavy crypto function, compare head vs head sampling (5% suggested) to avoid huge bills, and demonstrate an ingress fix that lets tracing work without redeploy — instrumentation yields actionable traces and faster root-cause.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 2:14Observability concepts
- 7:38Reliability role
- 9:21Distributed tracing overview
- 12:58OpenTelemetry components
- 15:28Frontend and backend tracing
- 17:56OpenTelemetry vendors
- 19:00Observability impact
- 21:48React observability examples
- 27:02Page load times tracking
- 29:31Heavy operations measuring
- 30:35Improving observability
- 32:24Q&A
related talks
17mObservability in frontend: React Open Telemetry
17mUnlocking Observability with React & Node.js
40mObservability for All!
19mUnlocking Observability with React & Node.js
30m"Observability for the Front End"
43mPractical Introduction to OpenTelemetry Tracing
56mFull-stack observability and application monitoring with
55mCloud-Native Observability with OpenTelemetry