OpenTelemetry in the Frontend

What is being tracked

All that is tracked is defined in frontend/src/otel.ts. How to explore this data is described in Signoz

1. Network Requests (Distributed Tracing)

The OpenTelemetrySDK integrated monitoring how your frontend talks to backends. This is crucial for creating and collecting telemetry data allowing you to see a request's journey from the browser to the server.

  • Fetch & XHR: Every time the app uses fetch() or XMLHttpRequest (AJAX) to call an API, a span is created.
  • Trace Propagation: The propagateTraceHeaderCorsUrls setting ensures that specialized headers (traceparent) are attached to requests sent to your specific domains (e.g., permaplant.net). This "links" the frontend trace to the backend trace.
  • Automatic Context: It captures request URLs, HTTP methods, status codes, and timing.

This is archived by the W3CTraceContextPropagator and W3CTraceContextPropagator.

2. Page Performance (Document Load)

The DocumentLoadInstrumentation tracks the "life cycle" of the web page. From requesting the first bytes, while it is used until it gets closed. It captures:

  • Resource Timing: How long CSS, JS, and images take to load.
  • Navigation Timing: Time to first byte (TTFB), DOM content loaded, and the final window.load event.
  • Document Fetch: How long the initial HTML document took to arrive.

3. User Behavior (Interactions)

The UserInteractionInstrumentation captures physical actions taken by the user. It specifically listens for:

  • click: When a user clicks buttons, links, or other elements.
  • input: When a user types into form fields.
  • submit: When a user submits a form.

Note: These interactions are automatically wrapped in "Spans," allowing you to see exactly which network requests were triggered by a specific button click.

4. Technical Infrastructure & Metadata

Beyond specific events, the SDK tracks the context of the data:

  • Service Name: All data is tagged with service.name: 'frontend', making it easy to filter in your observability backend (Signoz in our case).
  • Async Context: The ZoneContextManager ensures that even if an operation involves promises or timeouts, the "trace ID" isn't lost across asynchronous boundaries.
  • Metrics: A MeterProvider is active, meaning the system is prepared to track numerical data (like memory usage or custom counters) and export them every 45 seconds.

What can be adjusted/refined?

The metrics are exported every 45 seconds. This means also that there is network traffic every 45s which might impact future e2e tests that expect no network traffic for a longer duration.