Standard frontend debugging with `console.log` is insufficient because it fails to capture production issues or correlate user-facing problems with backend services.
OpenTelemetry provides standard signals like logs, metrics, and traces, which will be demonstrated using a Svelte app configured with a resource and CORS proxy.
Replace `console.log` with an OpenTelemetry logger, exporter, and processor to send structured logs from the browser to a backend system.
Core Web Vitals are a standard set of user-centric metrics from Google that help quantify website performance and its impact on user experience.
Implement custom OpenTelemetry instrumentation using the Web Vitals library to capture real user metrics and visualize them in dashboards.
Create custom counters in OpenTelemetry to track specific user interactions, such as newsletter subscriptions, to measure feature adoption and demand.
Configure a trace provider, span processor, and context manager with W3C propagators to enable distributed tracing for a web application.
Leverage auto-instrumentations for document load, fetch, and XML HTTP requests to automatically capture traces for resource loading and backend calls.
Instrument user interactions like clicks and inputs to create traces that correlate frontend actions directly with their corresponding backend service calls.
Instrumenting frontend applications is critical for gaining a holistic view of system performance and understanding the complete user flow to identify bottlenecks.
Jobs that call for the skills explored in this talk.