Stop the browser tracing its own trace-export requests

frontend/src/lib/otel/otel.client.ts

@@ -1,6 +1,6 @@
 import {ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION} from '@opentelemetry/semantic-conventions';
 import {BatchSpanProcessor, WebTracerProvider} from '@opentelemetry/sdk-trace-web';
-import {SERVICE_NAME, traceUserAttributes} from '.';
+import {SERVICE_NAME, TRACE_EXPORT_URL_PATTERN, traceUserAttributes} from '.';
 import {defaultResource, resourceFromAttributes} from '@opentelemetry/resources';
 
 import {APP_VERSION} from '$lib/util/version';
@@ -22,6 +22,14 @@ instrumentGlobalFetch(() => {
       '@opentelemetry/instrumentation-user-interaction': {
         enabled: false,
       },
+      // Don't trace the exporter's own POSTs to the collector (see TRACE_EXPORT_URL_PATTERN).
+      // traceFetch skips them too; both span-creating layers must, or we loop.
+      '@opentelemetry/instrumentation-fetch': {
+        ignoreUrls: [TRACE_EXPORT_URL_PATTERN],
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        ignoreUrls: [TRACE_EXPORT_URL_PATTERN],
+      },
     })],
   });
 });

frontend/src/lib/otel/otel.shared.ts

@@ -21,6 +21,13 @@ import { parseUrl } from '@opentelemetry/sdk-trace-web/build/src/utils';
 
 export const SERVICE_NAME = browser ? 'LexBox-SvelteKit-Client' : 'LexBox-SvelteKit-Server';
 
+// The OTLP trace exporter POSTs batches to this path. Tracing that request produces a span
+// that gets exported, producing another request -- an endless loop. The exporter has a built-in
+// guard (globalThis.fetch.__original) but our fetch proxy chain -- and zone.js re-wrapping fetch
+// via ZoneContextManager -- hides it, so we instead make our own tracing skip this URL. The
+// instrumentation-fetch/-xml-http-request layers get the same URL via ignoreUrls (see otel.client).
+export const TRACE_EXPORT_URL_PATTERN = /\/v1\/traces(?:$|\?)/;
+
 export function tracer(): Tracer {
   return trace.getTracer(SERVICE_NAME);
 }
@@ -135,10 +142,14 @@ function traceErrorEvent(
  * we just want to make sure that our trace-ID gets used and that we stamp errors with it.
  */
 export function traceFetch([input]: Parameters<Fetch>, fetch: () => ReturnType<Fetch>, event?: RequestEvent | NavigationEvent | Event): ReturnType<Fetch> {
+  // Matches: https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L314-L316
+  const url = parseUrl(isRequest(input) ? input.url : input.toString()).href;
+  // Don't trace our own trace-export requests, or we loop (see TRACE_EXPORT_URL_PATTERN).
+  if (TRACE_EXPORT_URL_PATTERN.test(url)) {
+    return fetch();
+  }
   return tracer().startActiveSpan('fetch', async (span) => {
     try {
-      // Matches: https://github.com/open-telemetry/opentelemetry-js/blob/main/experimental/packages/opentelemetry-instrumentation-fetch/src/fetch.ts#L314-L316
-      const url = parseUrl(isRequest(input) ? input.url : input.toString()).href;
       span.setAttribute(SemanticAttributes.HTTP_URL, url);
       traceUserAttributes(span, event);
       if (browser)

otel/collector-config.yaml

@@ -21,6 +21,16 @@ processors:
     metrics:
       metric:
         - HasAttrKeyOnDatapoint("http.route") or HasAttrKeyOnDatapoint("http.connection.state")
+  # Drops the self-referential spans the browser produces when it POSTs trace batches
+  # to the collector. The web fetch/XHR auto-instrumentation traces the export request
+  # itself, which then gets exported, creating a feedback loop. error_mode: ignore makes
+  # a nil attribute (IsMatch on a missing key) a no-op rather than dropping the span.
+  filter/drop-trace-export:
+    error_mode: ignore
+    traces:
+      span:
+        - 'IsMatch(attributes["http.url"], ".*/v1/traces$")'
+        - 'IsMatch(attributes["url.full"], ".*/v1/traces$")'
   batch:
     timeout: 1s
   memory_limiter:
@@ -60,7 +70,7 @@ service:
   pipelines:
     traces:
       receivers: [otlp]
-      processors: [memory_limiter, transform/squash_cookie_array, redaction, batch]
+      processors: [memory_limiter, filter/drop-trace-export, transform/squash_cookie_array, redaction, batch]
       exporters: [otlp]
     metrics:
       receivers: [otlp]