Try export with XHR retry

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

@@ -2,7 +2,7 @@ import { BatchSpanProcessor, WebTracerProvider } from '@opentelemetry/sdk-trace-
 import { SERVICE_NAME, ensureErrorIsTraced, tracer } from '.'
 
 import {APP_VERSION} from '$lib/util/verstion';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
+import { OTLPTraceExporterBrowserWithXhrRetry } from './trace-exporter-browser-with-xhr-retry';
 import { Resource } from '@opentelemetry/resources'
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
 import { ZoneContextManager } from '@opentelemetry/context-zone'
@@ -47,15 +47,15 @@ const resource = Resource.default().merge(
 )
 const provider = new WebTracerProvider({
   resource: resource,
-})
-const exporter = new OTLPTraceExporter({
+});
+const exporter = new OTLPTraceExporterBrowserWithXhrRetry({
   url: '/v1/traces'
 });
 provider.addSpanProcessor(
   new BatchSpanProcessor(exporter, {
     // max number of spans pulled from the qeuue and exported in a single batch
     // this can't be much higher or the export will be too big for the sendBeacon() API
-    maxExportBatchSize: 15,
+    maxExportBatchSize: 30,
     // minimum time between exports
     scheduledDelayMillis: 1000,
     maxQueueSize: 5000, // default: 2048

frontend/src/lib/otel/trace-exporter-browser-with-xhr-retry.ts

@@ -0,0 +1,40 @@
+// We explicitly reference the browser version so that we have proper types
+
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http/build/src/platform/browser';
+import type { ReadableSpan } from '@opentelemetry/sdk-trace-web';
+
+// these save us a dependency
+type SendOnErrorCallback = Parameters<OTLPTraceExporter['send']>[2];
+type ExporterConfig = ConstructorParameters<typeof OTLPTraceExporter>[0];
+
+export class OTLPTraceExporterBrowserWithXhrRetry extends OTLPTraceExporter {
+
+  private readonly xhrTraceExporter: OTLPTraceExporter;
+
+  constructor(config?: ExporterConfig) {
+    super(config);
+    this.xhrTraceExporter = new OTLPTraceExporter({
+      ...(config ?? {}),
+      headers: {}, // passing a truthy value here causes XHR to be used
+    });
+  }
+
+  send(items: ReadableSpan[], onSuccess: () => void, onError: SendOnErrorCallback): void {
+    super.send(items, onSuccess, (error) => {
+      if (error.message.toLocaleLowerCase().includes('beacon')) {
+        this.xhrTraceExporter.send(items, onSuccess, (xhrError) => {
+          onError({
+            ...error,
+            message: `${error.message} --- [XHR retry message: ${xhrError.message}; code: ${xhrError.code}].`,
+            code: error.code,
+            data: `${error.data} --- [XHR retry data: ${xhrError.data}].`,
+          });
+        });
+      } else {
+        onError(error);
+      }
+    });
+
+    this._sendingPromises
+  }
+}