Skip to content

CONCEPT Cited by 1 source

Cherry-picked instrumentation payload

Definition

Cherry-picked instrumentation payload is the discipline of selecting only the observability packages that have to run in the critical page-load path and deferring everything else — often via dynamic import after first paint — to minimise the bundle-size cost of instrumenting a web application.

The numbers

Zalando's browser observability team disclosed two data points (Source: sources/2024-07-28-zalando-opentelemetry-for-javascript-observability-at-zalando):

Attempt Page weight added Verdict
First-try telemetry package ~400 KB Rejected
Cherry-picked OTel packages ~30 KB Shipped

A >13× reduction by picking only the packages needed up- front.

What stays in the critical path

For Zalando's browser SDK, the irreducible minimum is whatever must be loaded before the first interactive moment:

  • Tracing primitives (span creation, trace context generation) — required because propagation context must be generated synchronously at the start of a trace in order to pass it to outgoing API requests.
  • Page-load tracing — required because the page-load spans need to fire on initial load.

What is deferred

  • Non-critical exporter plumbing can load async after first paint.
  • Instrumentations for interactions that don't happen during load (e.g. later user clicks) can lazy-load the first time they're used.
  • The metric exporter and any Web Vitals handlers can run after DOMContentLoaded.

Why this matters beyond bundle size

  • SSR compatibility — isomorphic apps need instrumentation that tree-shakes to zero on the browser side when not needed; OTel's @opentelemetry/sdk-node must not leak into the web bundle.
  • sendBeacon() affinity — network calls for telemetry should run at lowest priority; this pairs with cherry-picked payload to keep telemetry off the critical path entirely (concepts/send-beacon-telemetry-transport).

Contrast

Grafana Faro is a purpose-built frontend observability SDK that has bundle-size budget as a first-class design concern from day one — Zalando flagged it as a greenfield alternative. Cherry-picking from upstream OTel is what you do if you need tight integration with your own framework (Zalando's Rendering Engine) and aren't starting fresh.

Seen in

Last updated · 501 distilled / 1,218 read