feat: use Blob in sendBeacon to add application/json type

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

@@ -22,6 +22,8 @@ import { sendWithBeacon, sendWithXhr } from './util';
 import { diag } from '@opentelemetry/api';
 import { getEnv, baggageUtils } from '@opentelemetry/core';
 
+const DEFAULT_BLOB_PROPERTY_BAG: BlobPropertyBag = { type: 'application/json' };
+
 /**
  * Collector Metric Exporter abstract base class
  */
@@ -35,7 +37,7 @@ export abstract class CollectorExporterBrowserBase<
   > {
   protected _headers: Record<string, string>;
   private _useXHR: boolean = false;
-  private _contentType: string = '';
+  private _blobPropertBag: BlobPropertyBag = {};
 
   /**
    * @param config
@@ -54,7 +56,10 @@ export abstract class CollectorExporterBrowserBase<
       );
     } else {
       this._headers = {};
-      this._contentType = config.contentTypeBeacon ?? 'application/json';
+      this._blobPropertBag = {
+        ...DEFAULT_BLOB_PROPERTY_BAG,
+        ...config.beaconBlobPropertyBag
+      }
     }
   }
 
@@ -70,7 +75,7 @@ export abstract class CollectorExporterBrowserBase<
     items: ExportItem[],
     onSuccess: () => void,
     onError: (error: collectorTypes.CollectorExporterError) => void
-  ) : void {
+  ): void {
     if (this._isShutdown) {
       diag.debug('Shutdown already started. Cannot send objects');
       return;
@@ -96,7 +101,7 @@ export abstract class CollectorExporterBrowserBase<
       if (this._useXHR) {
         sendWithXhr(body, this.url, this._headers, _onSuccess, _onError);
       } else {
-        sendWithBeacon(body, this.url, this._contentType, _onSuccess, _onError);
+        sendWithBeacon(body, this.url, this._blobPropertBag, _onSuccess, _onError);
       }
     });
     this._sendingPromises.push(promise);

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

@@ -25,12 +25,11 @@ import * as collectorTypes from '../../types';
 export function sendWithBeacon(
   body: string,
   url: string,
-  contentType: string,
+  blobPropertyBag: BlobPropertyBag,
   onSuccess: () => void,
   onError: (error: collectorTypes.CollectorExporterError) => void
 ): void {
-  contentType = contentType !== '' ? contentType : 'application/json';
-  if (navigator.sendBeacon(url, new Blob([body], { type: contentType }))) {
+  if (navigator.sendBeacon(url, new Blob([body], blobPropertyBag))) {
     diag.debug('sendBeacon - can send', body);
     onSuccess();
   } else {

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

@@ -346,7 +346,7 @@ export interface CollectorExporterConfigBase {
   attributes?: SpanAttributes;
   url?: string;
   concurrencyLimit?: number;
-  contentTypeBeacon?:string;
+  beaconBlobPropertyBag?: BlobPropertyBag;
 }
 
 /**

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

@@ -56,7 +56,7 @@ describe('CollectorTraceExporter - web', () => {
         hostname: 'foo',
         attributes: {},
         url: 'http://foo.bar.com',
-        contentTypeBeacon: 'text/plain',
+        beaconBlobPropertyBag: { type: 'text/plain' },
       };
     });
 
@@ -98,7 +98,7 @@ describe('CollectorTraceExporter - web', () => {
 
           assert.strictEqual(stubOpen.callCount, 0);
 
-          assert.strictEqual(header, collectorExporterConfig.contentTypeBeacon);
+          assert.strictEqual(header, collectorExporterConfig.beaconBlobPropertyBag?.type);
 
           ensureExportTraceServiceRequestIsSet(json);