CONCEPT Cited by 1 source
Client-side observability¶
Definition¶
Client-side observability is the practice of emitting tracing and metrics data from the browser — not only from the server path — so that engineers can diagnose user experience from the point of user interaction forward, and correlate server-side health signals with the asynchronous work happening in customer browsers.
Contrast with server-side observability, which begins tracing at the first request hitting the edge proxy. Server-side observability is blind to:
- User interactions that never produce a server request (e.g. a button click where the WAF dropped the request as bot-like, per the Zalando web-checkout example: sources/2024-07-28-zalando-opentelemetry-for-javascript-observability-at-zalando).
- Asynchronous client-side rendering (partial hydration, late-binding fetches, Suspense boundaries).
- Core Web Vitals and other user-experience metrics that only the browser can measure (LCP, INP, CLS).
Why it is harder than server-side¶
Three structural differences (Source: sources/2024-07-28-zalando-opentelemetry-for-javascript-observability-at-zalando):
1. Performance cost is on the critical path¶
Every byte of the observability SDK adds to page payload and delays first contentful paint. Zalando's first SDK trial added ~400 KB; they cherry-picked upstream OTel packages down to ~30 KB (concepts/cherry-picked-instrumentation-payload).
2. Telemetry transport is over the public internet¶
The collector must have a publicly addressable endpoint; Zalando
uses Skipper with rate-limits
configured as endpoint protection. Telemetry network calls
use sendBeacon() to deprioritise them below user-facing
requests (concepts/send-beacon-telemetry-transport).
3. User consent is legally required¶
Under GDPR, no data can leave a customer's browser without explicit consent; the SDK must gate every export on that signal (concepts/gdpr-consent-gated-telemetry).
What it unlocks¶
Per the Zalando rollout:
- User-interaction → server-request lineage — client spans connect a button click to the server trace that answers it, closing the WAF-false-positive diagnostic gap.
- Core Web Vitals with arbitrary attribute tagging — the "designer-experience" LCP comparison (concepts/core-web-vitals).
- Client-side CBOs (concepts/critical-business-operation) for user-facing operations (catalog filter apply) whose health isn't fully inferable from server-side HTTP status.
Tools evaluated in the corpus¶
- systems/zalando-observability-sdk-browser — Zalando's own SDK.
- systems/grafana-faro — called out as a greenfield alternative.
- systems/sentry — pre-2023 the only tool Zalando had, insufficient on its own.