Start using OTEL tracing on the client for network requests

[ccschmitz]

Ensure we use the W3C spec on the client so we can pick it up on the back end.

[linear]

HIG-4615 Start using OTEL tracing on the client for network requests

[greptile-apps]

To integrate W3C-compliant OTEL tracing for network requests on the client side, follow these steps:

1. Modify Network Request Headers:
   Update the XHRListener and fetch request functions to include OTEL trace context headers (traceparent and optionally tracestate). These headers are part of the W3C Trace Context specification.

2. Generate Trace IDs and Span IDs:
   Use a library or custom code to generate traceId and spanId values according to the W3C Trace Context specification. These values should be unique per request and span, respectively.

3. Set Trace Context Headers:
   For each outgoing HTTP request (XMLHttpRequest or Fetch API), set the traceparent header with the generated traceId and spanId. Optionally, include the tracestate header for additional trace context.

4. Backend Reception:
   Ensure the backend is configured to parse and use these headers for continued tracing. This might involve configuring your backend tracing or observability tool to recognize and utilize the W3C Trace Context headers.

Example Code Snippet for XMLHttpRequest:

XHR.setRequestHeader = function (this: BrowserXHR, header: string, value: string) {
  if (header.toLowerCase() === 'traceparent') {
    // Generate or use existing traceId and spanId
    const traceValue = `00-${traceId}-${spanId}-01`;
    this._requestHeaders['traceparent'] = traceValue;
  }
  return originalSetRequestHeader.apply(this, arguments);
}

This approach ensures that the client-side network requests are traced in a manner that's compatible with the backend's observability tools, adhering to the W3C Trace Context specification.

References

highlight/highlight/sdk/client/src/listeners/network-listener/utils/utils.ts
highlight/highlight/sdk/client/src/listeners/network-listener/utils/xhr-listener.ts
highlight/highlight/docs-content/getting-started/2_frontend-backend-mapping.md
highlight/highlight/docs-content/getting-started/7_native-opentelemetry/1_overview.md
highlight/highlight/docs-content/getting-started/7_native-opentelemetry/4_tracing.md

Ask Greptile