CONCEPT Cited by 1 source

User-interaction tracing¶

Definition¶

User-interaction tracing is the creation of tracing spans that begin at the user interaction in the browser (button click, tap, form submission, filter change) and capture the asynchronous work that follows — rather than relying on the server-side trace, which only begins when the resulting HTTP request reaches the edge proxy.

Why it matters¶

For many user-facing operations, the server-side proxy span is a lagging indicator:

The user clicks a button, an async work unit starts.
A fetch is issued; before it reaches the server it may be blocked at the WAF, silently dropped, debounced, or cancelled by subsequent navigation.
Even if the server processes it, the response must travel back and rehydrate the UI before the user perceives completion.

Server-side tracing misses the click itself, the pre-network work, and the post-response client rendering. User-interaction tracing closes this loop.

Zalando's example¶

From the catalog-page filter operation (Source: sources/2024-07-28-zalando-opentelemetry-for-javascript-observability-at-zalando):

const span = traceAs("fetch_filtered_products");
span.addTags({ href: window.href });
serviceClient.get(`/search?q=${filter}`)
  .then(res => { /* process response */ })
  .catch(err => { span.addTags({ error: true }); })
  .finally(() => { span.finish(); });

The span starts at the button click (traceAs(...) call), captures the filter value and current URL, wraps the outgoing AJAX call, records error state on failure, and closes when the async work finishes.

The server-side trace would only see the /search?q=shoes request — with no way to know it came from a filter click vs a direct URL access vs a retry vs a misbehaving script.

Tie to Critical Business Operations¶

The post's next-step roadmap is to move Critical Business Operations (CBOs) to the client side. The catalog filter is a CBO: a filter failure means a lost conversion funnel step. Before client-side tracing, the CBO's health was inferred from server-side HTTP status of the filter endpoint — "an indirect, 'pseudo' way of determining service health". User-interaction tracing makes the CBO's health measurable where the user actually experiences the operation.

Framework support¶

For adoption to scale, the tracing API must be exposed via the frontend framework's native interfaces — not as a raw OTel API for every developer to wire up. Zalando's Rendering Engine exposes props.tools.observability.traceAs("op_name") inside every renderer; this is the framework-exposed tracing API pattern.