feat(otlp-exporter-base): Add fetch sender for ServiceWorker environment

experimental/CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to experimental packages in this project will be documented
 * feat(instrumentation): Make `init()` method public [#4418](https://github.com/open-telemetry/opentelemetry-js/pull/4418)
 * feat(exporter-metrics-otlp-http): add option to set the exporter aggregation preference  [#4409](https://github.com/open-telemetry/opentelemetry-js/pull/4409) @AkselAllas
 * feat(node-sdk): add spanProcessors option [#4454](https://github.com/open-telemetry/opentelemetry-js/pull/4454) @naseemkullah
+* feat(otlp-exporter-base): Add fetch sender for WebWorker and ServiceWorker environment. [#3542](https://github.com/open-telemetry/opentelemetry-js/pull/3542) @sugi
 
 ### :bug: (Bug Fix)
 

experimental/packages/exporter-trace-otlp-http/package.json

@@ -75,6 +75,7 @@
     "codecov": "3.8.3",
     "cpx": "1.5.0",
     "cross-var": "1.1.0",
+    "fetch-mock": "9.11.0",
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "2.2.1",

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

@@ -33,6 +33,8 @@ import {
   OTLPExporterError,
 } from '@opentelemetry/otlp-exporter-base';
 import { IExportTraceServiceRequest } from '@opentelemetry/otlp-transformer';
+import { FetchMockStatic, MockCall } from 'fetch-mock/esm/client';
+const fetchMock = require('fetch-mock/esm/client').default as FetchMockStatic;
 
 describe('OTLPTraceExporter - web', () => {
   let collectorTraceExporter: OTLPTraceExporter;
@@ -270,6 +272,140 @@ describe('OTLPTraceExporter - web', () => {
         });
       });
     });
+
+    describe('when both "sendBeacon" and "XMLHTTPRequest" are NOT available (service worker env)', () => {
+      let clock: sinon.SinonFakeTimers;
+      let stubXhr: sinon.SinonStub;
+      const url = 'http://foo.bar.com';
+      beforeEach(() => {
+        clock = sinon.useFakeTimers();
+
+        stubBeacon.value(undefined);
+        stubXhr = sinon.stub(globalThis, 'XMLHttpRequest').value(undefined);
+        fetchMock.mock(url, 200);
+        collectorTraceExporter = new OTLPTraceExporter(collectorExporterConfig);
+      });
+      afterEach(() => {
+        sinon.restore();
+        clock.restore();
+        fetchMock.restore();
+      });
+
+      it('should successfully send the spans using fetch', done => {
+        collectorTraceExporter.export(spans, () => {
+          try {
+            assert.ok(fetchMock.called(url));
+            const request = fetchMock.lastCall(url)?.[1];
+            assert.ok(request);
+            assert.strictEqual(request.method, 'POST');
+
+            const body = request.body?.toString();
+            assert.ok(body);
+            const json = JSON.parse(body) as IExportTraceServiceRequest;
+            const span1 = json.resourceSpans?.[0].scopeSpans?.[0].spans?.[0];
+
+            assert.ok(typeof span1 !== 'undefined', "span doesn't exist");
+            ensureSpanIsCorrect(span1);
+
+            const resource = json.resourceSpans?.[0].resource;
+            assert.ok(
+              typeof resource !== 'undefined',
+              "resource doesn't exist"
+            );
+            ensureWebResourceIsCorrect(resource);
+
+            assert.strictEqual(stubBeacon.callCount, 0);
+            assert.strictEqual(stubXhr.callCount, 0);
+            ensureExportTraceServiceRequestIsSet(json);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+
+      it('should log the successful message', done => {
+        const spyLoggerDebug = sinon.stub();
+        const spyLoggerError = sinon.stub();
+        const nop = () => {};
+        const diagLogger: DiagLogger = {
+          debug: spyLoggerDebug,
+          error: spyLoggerError,
+          info: nop,
+          verbose: nop,
+          warn: nop,
+        };
+
+        diag.setLogger(diagLogger, DiagLogLevel.ALL);
+
+        collectorTraceExporter.export(spans, () => {
+          try {
+            assert.strictEqual(fetchMock.calls('*').length, 1);
+            assert.ok(fetchMock.called(url));
+
+            assert.strictEqual(
+              spyLoggerDebug.args[spyLoggerDebug.callCount - 1][0],
+              'Request Success'
+            );
+            assert.strictEqual(spyLoggerError.args.length, 0);
+            assert.strictEqual(stubBeacon.callCount, 0);
+            assert.strictEqual(stubXhr.callCount, 0);
+
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+
+      it('should log the error message', done => {
+        fetchMock.restore();
+        fetchMock.mock(url, 400);
+        collectorTraceExporter.export(spans, result => {
+          try {
+            assert.ok(fetchMock.called(url));
+            assert.deepStrictEqual(result.code, ExportResultCode.FAILED);
+            assert.ok(result.error?.message.includes('Failed to export'));
+            assert.strictEqual(stubBeacon.callCount, 0);
+            assert.strictEqual(stubXhr.callCount, 0);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+
+      it('should send custom headers', done => {
+        collectorTraceExporter = new OTLPTraceExporter(
+          Object.assign({}, collectorExporterConfig, {
+            headers: {
+              'My-Custom-Header1': '123',
+              'My-Custom-Header2': 'abc',
+            },
+          })
+        );
+
+        collectorTraceExporter.export(spans, () => {
+          try {
+            assert.ok(fetchMock.called(url));
+            const request = fetchMock.lastCall(url)?.[1];
+            assert.ok(request);
+            assert.ok(request.headers);
+            const sentHeadersObj = Object.fromEntries(
+              Object.entries(request.headers)
+            );
+            assert.strictEqual(sentHeadersObj['My-Custom-Header1'], '123');
+            assert.strictEqual(sentHeadersObj['My-Custom-Header2'], 'abc');
+
+            assert.strictEqual(stubBeacon.callCount, 0);
+            assert.strictEqual(stubXhr.callCount, 0);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+    });
   });
 
   describe('export - common', () => {
@@ -432,6 +568,66 @@ describe('OTLPTraceExporter - web', () => {
         });
       });
     });
+
+    describe('when both "sendBeacon" and "XMLHttpRequest" are NOT available', () => {
+      let clock: sinon.SinonFakeTimers;
+      let stubXhr: sinon.SinonStub;
+      beforeEach(() => {
+        clock = sinon.useFakeTimers();
+
+        stubBeacon.value(undefined);
+        stubXhr = sinon.stub(globalThis, 'XMLHttpRequest').value(undefined);
+        fetchMock.mock('*', 200);
+        collectorTraceExporter = new OTLPTraceExporter(collectorExporterConfig);
+      });
+      afterEach(() => {
+        sinon.restore();
+        clock.restore();
+        fetchMock.restore();
+      });
+
+      const assertRequestHeaders = (
+        call: MockCall | undefined,
+        expected: Record<string, string>
+      ) => {
+        assert.ok(call);
+        const headers = call[1]?.headers;
+        assert.ok(headers, 'invalid header');
+        ensureHeadersContain(
+          Object.fromEntries(Object.entries(headers)),
+          expected
+        );
+      };
+
+      it('should successfully send spans using fetch', done => {
+        collectorTraceExporter.export(spans, () => {
+          try {
+            assert.ok(fetchMock.called('*'));
+            assertRequestHeaders(fetchMock.lastCall('*'), customHeaders);
+            assert.strictEqual(stubBeacon.callCount, 0);
+            assert.strictEqual(stubOpen.callCount, 0);
+            assert.strictEqual(stubXhr.callCount, 0);
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+      });
+      it('should log the timeout request error message', done => {
+        collectorTraceExporter.export(spans, result => {
+          try {
+            assert.strictEqual(result.code, core.ExportResultCode.FAILED);
+            const error = result.error as OTLPExporterError;
+            assert.ok(error !== undefined);
+            assert.strictEqual(error.message, 'Request Timeout');
+            done();
+          } catch (e) {
+            done(e);
+          }
+        });
+        clock.tick(10000);
+      });
+    });
   });
 
   describe('export - concurrency limit', () => {
@@ -701,4 +897,108 @@ describe('export with retry - real http request destroyed', () => {
       });
     }).timeout(3000);
   });
+
+  describe('when both "sendBeacon" and "XMLHttpRequest" are NOT available', () => {
+    const url = 'http://localhost:4318/v1/traces';
+    let clock: sinon.SinonFakeTimers | undefined;
+    beforeEach(() => {
+      (window.navigator as any).sendBeacon = false;
+      sinon.stub(globalThis, 'XMLHttpRequest').value(undefined);
+      collectorTraceExporter = new OTLPTraceExporter(collectorExporterConfig);
+    });
+    afterEach(() => {
+      clock?.restore();
+      fetchMock.reset();
+    });
+    it('should log the timeout request error message when retrying with exponential backoff with jitter', done => {
+      spans = [];
+      spans.push(Object.assign({}, mockedReadableSpan));
+      clock = sinon.useFakeTimers();
+
+      let tries = 0;
+      fetchMock.mock(url, () => {
+        tries++;
+        return 503;
+      });
+
+      collectorTraceExporter.export(spans, result => {
+        assert.strictEqual(result.code, core.ExportResultCode.FAILED);
+        const error = result.error as OTLPExporterError;
+        assert.ok(error !== undefined);
+        assert.strictEqual(error.message, 'Request Timeout');
+        assert.strictEqual(tries, 1);
+        done();
+      });
+      clock.tick(2000);
+    }).timeout(3000);
+
+    it('should log the timeout request error message when retry-after header is set to 3 seconds', done => {
+      spans = [];
+      spans.push(Object.assign({}, mockedReadableSpan));
+      clock = sinon.useFakeTimers();
+
+      let retry = 0;
+      fetchMock.mock(url, () => {
+        retry++;
+        return { status: 503, headers: { 'Retry-After': 3 } };
+      });
+
+      collectorTraceExporter.export(spans, result => {
+        assert.strictEqual(result.code, core.ExportResultCode.FAILED);
+        const error = result.error as OTLPExporterError;
+        assert.ok(error !== undefined);
+        assert.strictEqual(error.message, 'Request Timeout');
+        assert.strictEqual(retry, 1);
+        done();
+      });
+      clock.tick(2000);
+    }).timeout(3000);
+
+    it('should log the timeout request error message when retry-after header is a date', async () => {
+      spans = [];
+      spans.push(Object.assign({}, mockedReadableSpan));
+
+      let tries = 0;
+      fetchMock.mock(url, () => {
+        tries++;
+        const d = new Date();
+        d.setSeconds(d.getSeconds() + 1);
+        return { status: 503, headers: { 'Retry-After': d.toUTCString() } };
+      });
+
+      await new Promise(r => setTimeout(r, 1000 - (Date.now() % 1000))); // wait to start export exactly in seconds
+      return new Promise(resolve => {
+        collectorTraceExporter.export(spans, result => {
+          assert.strictEqual(result.code, core.ExportResultCode.FAILED);
+          const error = result.error as OTLPExporterError;
+          assert.ok(error !== undefined);
+          assert.strictEqual(error.message, 'Request Timeout');
+          assert.strictEqual(tries, 2);
+          resolve();
+        });
+      });
+    }).timeout(3000);
+
+    it('should log the timeout request error message when retry-after header is a date with long delay', done => {
+      spans = [];
+      spans.push(Object.assign({}, mockedReadableSpan));
+
+      let tries = 0;
+      fetchMock.mock(url, () => {
+        tries++;
+        const d = new Date();
+        d.setSeconds(d.getSeconds() + 120);
+        return { status: 503, headers: { 'Retry-After': d.toUTCString() } };
+      });
+
+      collectorTraceExporter.export(spans, result => {
+        assert.strictEqual(result.code, core.ExportResultCode.FAILED);
+        const error = result.error as OTLPExporterError;
+        assert.ok(error !== undefined);
+        assert.strictEqual(error.message, 'Request Timeout');
+        assert.strictEqual(tries, 1);
+        done();
+      });
+    }).timeout(3000);
+  });
 });