feat: use Blob in sendBeacon to add application/json type (#2336)

* fix(opentelemetry-exporter-collector): issue#2321 use Blob for method sendBeacon to add type application/json

* fix: test unit browser error

* feat: add contentType configuration for beacon

* fix: some lint

* fix: use BlobPropertyBag for Blob

* fix: assertion name

* fix: blob on public sendWithBeacon only

* Style nit

Co-authored-by: Daniel Dyla <[email protected]>

Author: jufab

packages/opentelemetry-exporter-collector/src/CollectorExporterBase.ts

@@ -65,7 +65,7 @@ export abstract class CollectorExporterBase<
    * @param items
    * @param resultCallback
    */
-  export(items: ExportItem[], resultCallback: (result: ExportResult) => void) {
+  export(items: ExportItem[], resultCallback: (result: ExportResult) => void): void {
     if (this._isShutdown) {
       resultCallback({
         code: ExportResultCode.FAILED,

packages/opentelemetry-exporter-collector/src/platform/browser/CollectorExporterBrowserBase.ts

@@ -28,11 +28,11 @@ import { getEnv, baggageUtils } from '@opentelemetry/core';
 export abstract class CollectorExporterBrowserBase<
   ExportItem,
   ServiceRequest
-> extends CollectorExporterBase<
+  > extends CollectorExporterBase<
   CollectorExporterConfigBase,
   ExportItem,
   ServiceRequest
-> {
+  > {
   protected _headers: Record<string, string>;
   private _useXHR: boolean = false;
 
@@ -68,7 +68,7 @@ export abstract class CollectorExporterBrowserBase<
     items: ExportItem[],
     onSuccess: () => void,
     onError: (error: collectorTypes.CollectorExporterError) => void
-  ) {
+  ): void {
     if (this._isShutdown) {
       diag.debug('Shutdown already started. Cannot send objects');
       return;
@@ -94,7 +94,7 @@ export abstract class CollectorExporterBrowserBase<
       if (this._useXHR) {
         sendWithXhr(body, this.url, this._headers, _onSuccess, _onError);
       } else {
-        sendWithBeacon(body, this.url, _onSuccess, _onError);
+        sendWithBeacon(body, this.url, { type: 'application/json' }, _onSuccess, _onError);
       }
     });
     this._sendingPromises.push(promise);

packages/opentelemetry-exporter-collector/src/platform/browser/CollectorTraceExporter.ts

@@ -47,7 +47,7 @@ export class CollectorTraceExporter
     return toCollectorExportTraceServiceRequest(spans, this, true);
   }
 
-  getDefaultUrl(config: CollectorExporterConfigBase) {
+  getDefaultUrl(config: CollectorExporterConfigBase): string {
     return typeof config.url === 'string'
       ? config.url
       : getEnv().OTEL_EXPORTER_OTLP_TRACES_ENDPOINT.length > 0

packages/opentelemetry-exporter-collector/src/platform/browser/util.ts

@@ -25,10 +25,11 @@ import * as collectorTypes from '../../types';
 export function sendWithBeacon(
   body: string,
   url: string,
+  blobPropertyBag: BlobPropertyBag,
   onSuccess: () => void,
   onError: (error: collectorTypes.CollectorExporterError) => void
-) {
-  if (navigator.sendBeacon(url, body)) {
+): void {
+  if (navigator.sendBeacon(url, new Blob([body], blobPropertyBag))) {
     diag.debug('sendBeacon - can send', body);
     onSuccess();
   } else {
@@ -52,7 +53,7 @@ export function sendWithXhr(
   headers: Record<string, string>,
   onSuccess: () => void,
   onError: (error: collectorTypes.CollectorExporterError) => void
-) {
+): void {
   const xhr = new XMLHttpRequest();
   xhr.open('POST', url);
 

packages/opentelemetry-exporter-collector/src/platform/node/CollectorTraceExporter.ts

@@ -48,7 +48,7 @@ export class CollectorTraceExporter
     return toCollectorExportTraceServiceRequest(spans, this, true);
   }
 
-  getDefaultUrl(config: CollectorExporterNodeConfigBase) {
+  getDefaultUrl(config: CollectorExporterNodeConfigBase) : string {
     return typeof config.url === 'string'
       ? config.url
       : getEnv().OTEL_EXPORTER_OTLP_TRACES_ENDPOINT.length > 0

packages/opentelemetry-exporter-collector/test/browser/CollectorMetricExporter.test.ts

@@ -93,10 +93,11 @@ describe('CollectorMetricExporter - web', () => {
       it('should successfully send metrics using sendBeacon', done => {
         collectorExporter.export(metrics, () => {});
 
-        setTimeout(() => {
+        setTimeout(async () => {
           const args = stubBeacon.args[0];
           const url = args[0];
-          const body = args[1];
+          const blob: Blob = args[1];
+          const body = await blob.text();
           const json = JSON.parse(
             body
           ) as collectorTypes.opentelemetryProto.collector.metrics.v1.ExportMetricsServiceRequest;

packages/opentelemetry-exporter-collector/test/browser/CollectorTraceExporter.test.ts

@@ -67,12 +67,13 @@ describe('CollectorTraceExporter - web', () => {
       });
 
       it('should successfully send the spans using sendBeacon', done => {
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
-        setTimeout(() => {
+        setTimeout(async () => {
           const args = stubBeacon.args[0];
           const url = args[0];
-          const body = args[1];
+          const blob: Blob = args[1];
+          const body = await blob.text();
           const json = JSON.parse(
             body
           ) as collectorTypes.opentelemetryProto.collector.trace.v1.ExportTraceServiceRequest;
@@ -107,7 +108,7 @@ describe('CollectorTraceExporter - web', () => {
         const spyLoggerError = sinon.stub(diag, 'error');
         stubBeacon.returns(true);
 
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
         setTimeout(() => {
           const response: any = spyLoggerDebug.args[1][0];
@@ -143,7 +144,7 @@ describe('CollectorTraceExporter - web', () => {
       });
 
       it('should successfully send the spans using XMLHttpRequest', done => {
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
         setTimeout(() => {
           const request = server.requests[0];
@@ -181,7 +182,7 @@ describe('CollectorTraceExporter - web', () => {
         const spyLoggerDebug = sinon.stub(diag, 'debug');
         const spyLoggerError = sinon.stub(diag, 'error');
 
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
         setTimeout(() => {
           const request = server.requests[0];
@@ -210,7 +211,7 @@ describe('CollectorTraceExporter - web', () => {
       });
 
       it('should send custom headers', done => {
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
         setTimeout(() => {
           const request = server.requests[0];
@@ -248,7 +249,7 @@ describe('CollectorTraceExporter - web', () => {
         );
       });
       it('should successfully send custom headers using XMLHTTPRequest', done => {
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
         setTimeout(() => {
           const [{ requestHeaders }] = server.requests;
@@ -271,7 +272,7 @@ describe('CollectorTraceExporter - web', () => {
       });
 
       it('should successfully send spans using XMLHttpRequest', done => {
-        collectorTraceExporter.export(spans, () => {});
+        collectorTraceExporter.export(spans, () => { });
 
         setTimeout(() => {
           const [{ requestHeaders }] = server.requests;