fix: Remove beacon transport (#1952)

https://www.chromestatus.com/features#milestone%3D73
https://bugs.chromium.org/p/chromium/issues/detail?id=720283

Chrome & Firefox changed / disabled the beacon transport, we have to remove the code an fall back to fetch / xhr.

Author: HazAT

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.0.0-rc.2
+
+- [browser] fix: Remove beacon transport.
+
 ## 5.0.0-rc.1
 
 - [node] fix: Check if buffer isReady before sending/creating Promise for request.

packages/browser/examples/app.js

@@ -1,15 +1,15 @@
 // Very happy integration that'll prepend and append very happy stick figure to the message
 class HappyIntegration {
   constructor() {
-    this.name = "HappyIntegration";
+    this.name = 'HappyIntegration';
   }
 
   setupOnce() {
-    Sentry.addGlobalEventProcessor(async (event) => {
+    Sentry.addGlobalEventProcessor(async event => {
       const self = getCurrentHub().getIntegration(HappyIntegration);
       // Run the integration ONLY when it was installed on the current Hub
       if (self) {
-        if (event.message === "Happy Message") {
+        if (event.message === 'Happy Message') {
           event.message = `\\o/ ${event.message} \\o/`;
         }
       }
@@ -20,23 +20,26 @@ class HappyIntegration {
 
 class HappyTransport extends Sentry.Transports.BaseTransport {
   captureEvent(event) {
-    console.log(`This is the place where you'd implement your own sending logic. It'd get url: ${this.url} and an event itself:`, event);
+    console.log(
+      `This is the place where you'd implement your own sending logic. It'd get url: ${this.url} and an event itself:`,
+      event,
+    );
 
     return {
-      status: 'success'
-    }
+      status: 'success',
+    };
   }
 }
 
 Sentry.init({
   // Client's DSN.
-  dsn: "https://363a337c11a64611be4845ad6e24f3ac@sentry.io/297378",
+  dsn: 'https://363a337c11a64611be4845ad6e24f3ac@sentry.io/297378',
   // An array of strings or regexps that'll be used to ignore specific errors based on their type/message
-  ignoreErrors: [/PickleRick_\d\d/, "RangeError"],
+  ignoreErrors: [/PickleRick_\d\d/, 'RangeError'],
   // // An array of strings or regexps that'll be used to ignore specific errors based on their origin url
-  blacklistUrls: ["external-lib.js"],
+  blacklistUrls: ['external-lib.js'],
   // // An array of strings or regexps that'll be used to allow specific errors based on their origin url
-  whitelistUrls: ["http://localhost:5000", "https://browser.sentry-cdn"],
+  whitelistUrls: ['http://localhost:5000', 'https://browser.sentry-cdn'],
   // // Debug mode with valuable initialization/lifecycle informations.
   debug: true,
   // Whether SDK should be enabled or not.
@@ -46,9 +49,9 @@ Sentry.init({
     return [new HappyIntegration(), ...integrations];
   },
   // A release identifier.
-  release: "1537345109360",
+  release: '1537345109360',
   // An environment identifier.
-  environment: "staging",
+  environment: 'staging',
   // Custom event transport that will be used to send things to Sentry
   transport: HappyTransport,
   // Method called for every captured event
@@ -58,11 +61,11 @@ Sentry.init({
     // Our CustomError defined in errors.js has `someMethodAttachedToOurCustomError`
     // which can mimick something like a network request to grab more detailed error info or something.
     // hint is original exception that was triggered, so we check for our CustomError name
-    if (hint.originalException.name === "CustomError") {
+    if (hint.originalException.name === 'CustomError') {
       const serverData = await hint.originalException.someMethodAttachedToOurCustomError();
       event.extra = {
         ...event.extra,
-        serverData
+        serverData,
       };
     }
     console.log(event);
@@ -71,88 +74,88 @@ Sentry.init({
   // Method called for every captured breadcrumb
   beforeBreadcrumb(breadcrumb, hint) {
     // We ignore our own logger and rest of the buttons just for presentation purposes
-    if (breadcrumb.message.startsWith("Sentry Logger")) return null;
-    if (breadcrumb.category !== "ui.click" || hint.event.target.id !== "breadcrumb-hint") return null;
+    if (breadcrumb.message.startsWith('Sentry Logger')) return null;
+    if (breadcrumb.category !== 'ui.click' || hint.event.target.id !== 'breadcrumb-hint') return null;
 
     // If we have a `ui.click` type of breadcrumb, eg. clicking on a button we defined in index.html
     // We will extract a `data-label` attribute from it and use it as a part of the message
-    if (breadcrumb.category === "ui.click") {
+    if (breadcrumb.category === 'ui.click') {
       const label = hint.event.target.dataset.label;
       if (label) {
         breadcrumb.message = `User clicked on a button with label "${label}"`;
       }
     }
     console.log(breadcrumb);
     return breadcrumb;
-  }
+  },
 });
 
 // Testing code, irrelevant vvvvv
 
-document.addEventListener("DOMContentLoaded", () => {
-  document.querySelector("#blacklist-url").addEventListener("click", () => {
-    const script = document.createElement("script");
-    script.crossOrigin = "anonymous";
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelector('#blacklist-url').addEventListener('click', () => {
+    const script = document.createElement('script');
+    script.crossOrigin = 'anonymous';
     script.src =
-      "https://rawgit.com/kamilogorek/cfbe9f92196c6c61053b28b2d42e2f5d/raw/3aef6ff5e2fd2ad4a84205cd71e2496a445ebe1d/external-lib.js";
+      'https://rawgit.com/kamilogorek/cfbe9f92196c6c61053b28b2d42e2f5d/raw/3aef6ff5e2fd2ad4a84205cd71e2496a445ebe1d/external-lib.js';
     document.body.appendChild(script);
   });
 
-  document.querySelector("#whitelist-url").addEventListener("click", () => {
-    const script = document.createElement("script");
-    script.crossOrigin = "anonymous";
+  document.querySelector('#whitelist-url').addEventListener('click', () => {
+    const script = document.createElement('script');
+    script.crossOrigin = 'anonymous';
     script.src =
-      "https://rawgit.com/kamilogorek/cb67dafbd0e12b782bdcc1fbcaed2b87/raw/3aef6ff5e2fd2ad4a84205cd71e2496a445ebe1d/lib.js";
+      'https://rawgit.com/kamilogorek/cb67dafbd0e12b782bdcc1fbcaed2b87/raw/3aef6ff5e2fd2ad4a84205cd71e2496a445ebe1d/lib.js';
     document.body.appendChild(script);
   });
 
-  document.querySelector("#ignore-message").addEventListener("click", () => {
-    throw new Error("Exception that will be ignored because of this keyword => PickleRick_42 <=");
+  document.querySelector('#ignore-message').addEventListener('click', () => {
+    throw new Error('Exception that will be ignored because of this keyword => PickleRick_42 <=');
   });
 
-  document.querySelector("#ignore-type").addEventListener("click", () => {
+  document.querySelector('#ignore-type').addEventListener('click', () => {
     throw new RangeError("Exception that will be ignored because of it's type");
   });
 
-  document.querySelector("#regular-exception").addEventListener("click", () => {
+  document.querySelector('#regular-exception').addEventListener('click', () => {
     throw new Error(`Regular exception no. ${Date.now()}`);
   });
 
-  document.querySelector("#capture-exception").addEventListener("click", () => {
+  document.querySelector('#capture-exception').addEventListener('click', () => {
     Sentry.captureException(new Error(`captureException call no. ${Date.now()}`));
   });
 
-  document.querySelector("#capture-message").addEventListener("click", () => {
+  document.querySelector('#capture-message').addEventListener('click', () => {
     Sentry.captureMessage(`captureMessage call no. ${Date.now()}`);
   });
 
-  document.querySelector("#duplicate-exception").addEventListener("click", () => {
-    Sentry.captureException(new Error("duplicated exception"));
+  document.querySelector('#duplicate-exception').addEventListener('click', () => {
+    Sentry.captureException(new Error('duplicated exception'));
   });
 
-  document.querySelector("#duplicate-message").addEventListener("click", () => {
-    Sentry.captureMessage("duplicate captureMessage");
+  document.querySelector('#duplicate-message').addEventListener('click', () => {
+    Sentry.captureMessage('duplicate captureMessage');
   });
 
-  document.querySelector("#integration-example").addEventListener("click", () => {
-    Sentry.captureMessage("Happy Message");
+  document.querySelector('#integration-example').addEventListener('click', () => {
+    Sentry.captureMessage('Happy Message');
   });
 
-  document.querySelector("#exception-hint").addEventListener("click", () => {
+  document.querySelector('#exception-hint').addEventListener('click', () => {
     class CustomError extends Error {
       constructor(...args) {
         super(...args);
-        this.name = "CustomError";
+        this.name = 'CustomError';
       }
       someMethodAttachedToOurCustomError() {
         return new Promise(resolve => {
-          resolve("some data, who knows what exactly");
+          resolve('some data, who knows what exactly');
         });
       }
     }
 
-    throw new CustomError("Hey there");
+    throw new CustomError('Hey there');
   });
 
-  document.querySelector("#breadcrumb-hint").addEventListener("click", () => {});
+  document.querySelector('#breadcrumb-hint').addEventListener('click', () => {});
 });

packages/browser/examples/index.html

@@ -1,7 +1,7 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>@sentry/browser SDK examples</title>
     <script src="bundle.js"></script>
     <script src="app.js"></script>
@@ -33,4 +33,4 @@
     <button id="exception-hint">event hints example</button>
     <button data-label="User Defined Label" id="breadcrumb-hint">breadcrumb hints example</button>
   </body>
-</html>
+</html>

packages/browser/src/backend.ts

@@ -2,12 +2,12 @@ import { BaseBackend } from '@sentry/core';
 import { Event, EventHint, Options, Severity, Transport } from '@sentry/types';
 import { isDOMError, isDOMException, isError, isErrorEvent, isPlainObject } from '@sentry/utils/is';
 import { addExceptionTypeValue } from '@sentry/utils/misc';
-import { supportsBeacon, supportsFetch } from '@sentry/utils/supports';
+import { supportsFetch } from '@sentry/utils/supports';
 import { SyncPromise } from '@sentry/utils/syncpromise';
 
 import { eventFromPlainObject, eventFromStacktrace, prepareFramesForEvent } from './parsers';
 import { computeStackTrace } from './tracekit';
-import { BeaconTransport, FetchTransport, XHRTransport } from './transports';
+import { FetchTransport, XHRTransport } from './transports';
 
 /**
  * Configuration options for the Sentry Browser SDK.
@@ -50,9 +50,6 @@ export class BrowserBackend extends BaseBackend<BrowserOptions> {
     if (this._options.transport) {
       return new this._options.transport(transportOptions);
     }
-    if (supportsBeacon()) {
-      return new BeaconTransport(transportOptions);
-    }
     if (supportsFetch()) {
       return new FetchTransport(transportOptions);
     }

packages/browser/src/integrations/breadcrumbs.ts

@@ -5,7 +5,7 @@ import { logger } from '@sentry/utils/logger';
 import { getEventDescription, getGlobalObject, parseUrl } from '@sentry/utils/misc';
 import { fill, normalize } from '@sentry/utils/object';
 import { safeJoin } from '@sentry/utils/string';
-import { supportsBeacon, supportsHistory, supportsNativeFetch } from '@sentry/utils/supports';
+import { supportsHistory, supportsNativeFetch } from '@sentry/utils/supports';
 
 import { BrowserClient } from '../client';
 
@@ -28,7 +28,6 @@ export interface SentryWrappedXMLHttpRequest extends XMLHttpRequest {
 
 /** JSDoc */
 interface BreadcrumbIntegrations {
-  beacon?: boolean;
   console?: boolean;
   dom?: boolean;
   fetch?: boolean;
@@ -57,7 +56,6 @@ export class Breadcrumbs implements Integration {
    */
   public constructor(options?: BreadcrumbIntegrations) {
     this._options = {
-      beacon: true,
       console: true,
       dom: true,
       fetch: true,
@@ -68,60 +66,6 @@ export class Breadcrumbs implements Integration {
     };
   }
 
-  /**
-   * @hidden
-   */
-  private _instrumentBeacon(): void {
-    if (!supportsBeacon()) {
-      return;
-    }
-
-    /**
-     * @hidden
-     */
-    function beaconReplacementFunction(originalBeaconFunction: () => void): () => void {
-      return function(this: History, ...args: any[]): void {
-        const url = args[0];
-        const data = args[1];
-        // If the browser successfully queues the request for delivery, the method returns "true" and returns "false" otherwise.
-        // https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API
-        const result = originalBeaconFunction.apply(this, args);
-
-        const client = getCurrentHub().getClient<BrowserClient>();
-        const dsn = client && client.getDsn();
-        if (dsn) {
-          const filterUrl = new API(dsn).getStoreEndpoint();
-          // if Sentry key appears in URL, don't capture it as a request
-          // but rather as our own 'sentry' type breadcrumb
-          if (filterUrl && url.includes(filterUrl)) {
-            addSentryBreadcrumb(data);
-            return result;
-          }
-        }
-
-        // What is wrong with you TypeScript...
-        const breadcrumbData = ({
-          category: 'beacon',
-          data,
-          type: 'http',
-        } as any) as { [key: string]: any };
-
-        if (!result) {
-          breadcrumbData.level = Severity.Error;
-        }
-
-        Breadcrumbs.addBreadcrumb(breadcrumbData, {
-          input: args,
-          result,
-        });
-
-        return result;
-      };
-    }
-
-    fill(global.navigator, 'sendBeacon', beaconReplacementFunction);
-  }
-
   /** JSDoc */
   private _instrumentConsole(): void {
     if (!('console' in global)) {
@@ -495,9 +439,6 @@ export class Breadcrumbs implements Integration {
     if (this._options.fetch) {
       this._instrumentFetch();
     }
-    if (this._options.beacon) {
-      this._instrumentBeacon();
-    }
     if (this._options.history) {
       this._instrumentHistory();
     }

packages/browser/src/transports/beacon.ts

@@ -1,4 +1,3 @@
 export { BaseTransport } from './base';
 export { FetchTransport } from './fetch';
 export { XHRTransport } from './xhr';
-export { BeaconTransport } from './beacon';