feat(browser otlp exporter): add fetch transport for fetch-only environments (#5807)

Co-authored-by: Marc Pichler <[email protected]>

Author: SacDeNoeuds

experimental/CHANGELOG.md

@@ -16,6 +16,8 @@ For notes on migrating to 2.x / 0.200.x see [the upgrade guide](doc/upgrade-to-2
 
 ### :rocket: Features
 
+* feat(otlp-exporter-base): Add fetch transport for fetch-only environments like service workers. [#5807](https://github.com/open-telemetry/opentelemetry-js/pull/5807)
+  * when using headers, the Browser exporter now prefers `fetch` over `XMLHttpRequest` if present. Sending via `XMLHttpRequest` will be removed in a future release.
 * feat(opentelemetry-configuration): creation of basic ConfigProvider [#5809](https://github.com/open-telemetry/opentelemetry-js/pull/5809) @maryliag
 * feat(opentelemetry-configuration): creation of basic FileConfigProvider [#5863](https://github.com/open-telemetry/opentelemetry-js/pull/5863) @maryliag
 * feat(sdk-node): Add support for multiple metric readers via the new `metricReaders` option in NodeSDK configuration. Users can now register multiple metric readers (e.g., Console, Prometheus) directly through the NodeSDK constructor. The old `metricReader` (singular) option is now deprecated and will show a warning if used, but remains supported for backward compatibility. Comprehensive tests and documentation have been added. [#5760](https://github.com/open-telemetry/opentelemetry-js/issues/5760)
@@ -37,6 +39,7 @@ For notes on migrating to 2.x / 0.200.x see [the upgrade guide](doc/upgrade-to-2
 ### :bug: Bug Fixes
 
 * fix(otlp-exporter-base): prioritize `esnext` export condition as it is more specific [#5458](https://github.com/open-telemetry/opentelemetry-js/pull/5458)
+* fix(otlp-exporter-base): consider relative urls as valid in browser environments [#5807](https://github.com/open-telemetry/opentelemetry-js/pull/5807)
 * fix(instrumentation-fetch): Use ESM version of semconv instead of CJS. Users expecting mixed ESM and CJS modules will now only get ESM modules. [#5878](https://github.com/open-telemetry/opentelemetry-js/pull/5878) @overbalance
 
 ### :books: Documentation

experimental/packages/exporter-logs-otlp-http/test/browser/OTLPLogExporter.test.ts

@@ -64,26 +64,22 @@ describe('OTLPLogExporter', function () {
         (window.navigator as any).sendBeacon = false;
       });
 
-      it('should successfully send data using XMLHttpRequest', async function () {
+      it('should successfully send data using fetch', async function () {
         // arrange
-        const server = sinon.fakeServer.create();
+        const stubFetch = sinon.stub(window, 'fetch');
         const loggerProvider = new LoggerProvider({
           processors: [new SimpleLogRecordProcessor(new OTLPLogExporter())],
         });
 
         // act
         loggerProvider.getLogger('test-logger').emit({ body: 'test-body' });
-        queueMicrotask(() => {
-          // simulate success response
-          server.requests[0].respond(200, {}, '');
-        });
         await loggerProvider.shutdown();
 
         // assert
-        const request = server.requests[0];
-        const body = request.requestBody as unknown as Uint8Array;
+        const request = new Request(...stubFetch.args[0]);
+        const body = await request.text();
         assert.doesNotThrow(
-          () => JSON.parse(new TextDecoder().decode(body)),
+          () => JSON.parse(body),
           'expected requestBody to be in JSON format, but parsing failed'
         );
       });

experimental/packages/exporter-logs-otlp-proto/test/browser/OTLPLogExporter.test.ts

@@ -64,26 +64,22 @@ describe('OTLPLogExporter', function () {
         (window.navigator as any).sendBeacon = false;
       });
 
-      it('should successfully send data using XMLHttpRequest', async function () {
+      it('should successfully send data using fetch', async function () {
         // arrange
-        const server = sinon.fakeServer.create();
+        const stubFetch = sinon.stub(window, 'fetch');
         const loggerProvider = new LoggerProvider({
           processors: [new SimpleLogRecordProcessor(new OTLPLogExporter())],
         });
 
         // act
         loggerProvider.getLogger('test-logger').emit({ body: 'test-body' });
-        queueMicrotask(() => {
-          // simulate success response
-          server.requests[0].respond(200, {}, '');
-        });
         await loggerProvider.shutdown();
 
         // assert
-        const request = server.requests[0];
-        const body = request.requestBody as unknown as Uint8Array;
+        const request = new Request(...stubFetch.args[0]);
+        const body = await request.text();
         assert.throws(
-          () => JSON.parse(new TextDecoder().decode(body)),
+          () => JSON.parse(body),
           'expected requestBody to be in protobuf format, but parsing as JSON succeeded'
         );
       });

experimental/packages/exporter-trace-otlp-http/test/browser/OTLPTraceExporter.test.ts

@@ -65,26 +65,22 @@ describe('OTLPTraceExporter', () => {
         (window.navigator as any).sendBeacon = false;
       });
 
-      it('should successfully send data using XMLHttpRequest', async function () {
+      it('should successfully send data using fetch', async function () {
         // arrange
-        const server = sinon.fakeServer.create();
+        const stubFetch = sinon.stub(window, 'fetch');
         const tracerProvider = new BasicTracerProvider({
           spanProcessors: [new SimpleSpanProcessor(new OTLPTraceExporter())],
         });
 
         // act
         tracerProvider.getTracer('test-tracer').startSpan('test-span').end();
-        queueMicrotask(() => {
-          // simulate success response
-          server.requests[0].respond(200, {}, '');
-        });
         await tracerProvider.shutdown();
 
         // assert
-        const request = server.requests[0];
-        const body = request.requestBody as unknown as Uint8Array;
+        const request = new Request(...stubFetch.args[0]);
+        const body = await request.text();
         assert.doesNotThrow(
-          () => JSON.parse(new TextDecoder().decode(body)),
+          () => JSON.parse(body),
           'expected requestBody to be in JSON format, but parsing failed'
         );
       });

experimental/packages/exporter-trace-otlp-proto/test/browser/OTLPTraceExporter.test.ts

@@ -65,27 +65,23 @@ describe('OTLPTraceExporter', () => {
         (window.navigator as any).sendBeacon = false;
       });
 
-      it('should successfully send data using XMLHttpRequest', async function () {
+      it('should successfully send data using fetch', async function () {
         // arrange
-        const server = sinon.fakeServer.create();
+        const stubFetch = sinon.stub(window, 'fetch');
         const tracerProvider = new BasicTracerProvider({
           spanProcessors: [new SimpleSpanProcessor(new OTLPTraceExporter())],
         });
 
         // act
         tracerProvider.getTracer('test-tracer').startSpan('test-span').end();
-        queueMicrotask(() => {
-          // simulate success response
-          server.requests[0].respond(200, {}, '');
-        });
         await tracerProvider.shutdown();
 
         // assert
-        const request = server.requests[0];
-        const body = request.requestBody as unknown as Uint8Array;
+        const request = new Request(...stubFetch.args[0]);
+        const body = await request.text();
         assert.throws(
-          () => JSON.parse(new TextDecoder().decode(body)),
-          'expected requestBody to be in protobuf format, but parsing as JSON succeeded'
+          () => JSON.parse(body),
+          'expected request body to be in protobuf format, but parsing as JSON succeeded'
         );
       });
     });

experimental/packages/opentelemetry-exporter-metrics-otlp-http/test/browser/OTLPMetricExporter.test.ts

@@ -76,12 +76,9 @@ describe('OTLPMetricExporter', function () {
         (window.navigator as any).sendBeacon = false;
       });
 
-      it('should successfully send data using XMLHttpRequest', async function () {
+      it('should successfully send data using fetch', async function () {
         // arrange
-        const server = sinon.fakeServer.create();
-        server.respondWith('OK');
-        server.respondImmediately = true;
-        server.autoRespond = true;
+        const stubFetch = sinon.stub(window, 'fetch');
         const meterProvider = new MeterProvider({
           readers: [
             new PeriodicExportingMetricReader({
@@ -95,15 +92,14 @@ describe('OTLPMetricExporter', function () {
           .getMeter('test-meter')
           .createCounter('test-counter')
           .add(1);
-
         await meterProvider.shutdown();
 
         // assert
-        const request = server.requests[0];
-        const body = request.requestBody as unknown as Uint8Array;
+        const request = new Request(...stubFetch.args[0]);
+        const body = await request.text();
         assert.doesNotThrow(
-          () => JSON.parse(new TextDecoder().decode(body)),
-          'expected requestBody to be in JSON format, but parsing failed'
+          () => JSON.parse(body),
+          'expected request body to be in JSON format, but parsing failed'
         );
       });
     });

experimental/packages/opentelemetry-exporter-metrics-otlp-proto/test/browser/OTLPMetricExporter.test.ts

@@ -72,12 +72,9 @@ describe('OTLPTraceExporter', () => {
         (window.navigator as any).sendBeacon = false;
       });
 
-      it('should successfully send data using XMLHttpRequest', async function () {
+      it('should successfully send data using fetch', async function () {
         // arrange
-        const server = sinon.fakeServer.create();
-        server.respondWith('OK');
-        server.respondImmediately = true;
-        server.autoRespond = true;
+        const stubFetch = sinon.stub(window, 'fetch');
         const meterProvider = new MeterProvider({
           readers: [
             new PeriodicExportingMetricReader({
@@ -95,10 +92,10 @@ describe('OTLPTraceExporter', () => {
         await meterProvider.shutdown();
 
         // assert
-        const request = server.requests[0];
-        const body = request.requestBody as unknown as Uint8Array;
+        const request = new Request(...stubFetch.args[0]);
+        const body = await request.text();
         assert.throws(
-          () => JSON.parse(new TextDecoder().decode(body)),
+          () => JSON.parse(body),
           'expected requestBody to be in protobuf format, but parsing as JSON succeeded'
         );
       });

experimental/packages/otlp-exporter-base/src/configuration/create-legacy-browser-delegate.ts

@@ -15,6 +15,7 @@
  */
 import { ISerializer } from '@opentelemetry/otlp-transformer';
 import {
+  createOtlpFetchExportDelegate,
   createOtlpSendBeaconExportDelegate,
   createOtlpXhrExportDelegate,
 } from '../otlp-browser-http-export-delegate';
@@ -35,17 +36,25 @@ export function createLegacyOtlpBrowserExportDelegate<Internal, Response>(
   signalResourcePath: string,
   requiredHeaders: Record<string, string>
 ): IOtlpExportDelegate<Internal> {
-  const useXhr = !!config.headers || typeof navigator.sendBeacon !== 'function';
+  const createOtlpExportDelegate = inferExportDelegateToUse(config.headers);
 
   const options = convertLegacyBrowserHttpOptions(
     config,
     signalResourcePath,
     requiredHeaders
   );
 
-  if (useXhr) {
-    return createOtlpXhrExportDelegate(options, serializer);
+  return createOtlpExportDelegate(options, serializer);
+}
+
+export function inferExportDelegateToUse(
+  configHeaders: OTLPExporterConfigBase['headers']
+) {
+  if (!configHeaders && typeof navigator.sendBeacon === 'function') {
+    return createOtlpSendBeaconExportDelegate;
+  } else if (typeof globalThis.fetch !== 'undefined') {
+    return createOtlpFetchExportDelegate;
   } else {
-    return createOtlpSendBeaconExportDelegate(options, serializer);
+    return createOtlpXhrExportDelegate;
   }
 }

experimental/packages/otlp-exporter-base/src/configuration/otlp-http-configuration.ts

@@ -76,8 +76,9 @@ function validateUserProvidedUrl(url: string | undefined): string | undefined {
     return undefined;
   }
   try {
-    new URL(url);
-    return url;
+    // NOTE: In non-browser environments, `globalThis.location` will be `undefined`.
+    const base = globalThis.location?.href;
+    return new URL(url, base).href;
   } catch {
     throw new Error(
       `Configuration: Could not parse user-provided export URL: '${url}'`

experimental/packages/otlp-exporter-base/src/otlp-browser-http-export-delegate.ts

@@ -20,7 +20,11 @@ import { createRetryingTransport } from './retrying-transport';
 import { createXhrTransport } from './transport/xhr-transport';
 import { createSendBeaconTransport } from './transport/send-beacon-transport';
 import { createOtlpNetworkExportDelegate } from './otlp-network-export-delegate';
+import { createFetchTransport } from './transport/fetch-transport';
 
+/**
+ * @deprecated use {@link createOtlpFetchExportDelegate}
+ */
 export function createOtlpXhrExportDelegate<Internal, Response>(
   options: OtlpHttpConfiguration,
   serializer: ISerializer<Internal, Response>
@@ -34,6 +38,19 @@ export function createOtlpXhrExportDelegate<Internal, Response>(
   );
 }
 
+export function createOtlpFetchExportDelegate<Internal, Response>(
+  options: OtlpHttpConfiguration,
+  serializer: ISerializer<Internal, Response>
+): IOtlpExportDelegate<Internal> {
+  return createOtlpNetworkExportDelegate(
+    options,
+    serializer,
+    createRetryingTransport({
+      transport: createFetchTransport(options),
+    })
+  );
+}
+
 export function createOtlpSendBeaconExportDelegate<Internal, Response>(
   options: OtlpHttpConfiguration,
   serializer: ISerializer<Internal, Response>