Skip push requests when the browser is offline

Author: ssh000

packages/javascript/.changesets/fix-skip-requests-when-browser-is-offline.md

@@ -0,0 +1,8 @@
+---
+bump: patch
+type: fix
+---
+
+Skip push requests when the browser is offline.
+
+When `navigator.onLine` reports that the browser is offline, the Push API client no longer attempts to send spans. The request is rejected before hitting the transport, which stops runaway retries that could crash tabs when a flood of errors was produced without connectivity.

packages/javascript/src/__tests__/api.test.ts

@@ -36,5 +36,21 @@ describe("PushApi", () => {
         body: FIXTURE.toJSON()
       })
     })
+
+    it("rejects without making a request when the browser is offline", async () => {
+      Object.defineProperty(window.navigator, "onLine", {
+        configurable: true,
+        get: () => false
+      })
+
+      fetchMock.mockClear()
+      await expect(api.push(FIXTURE)).rejects.toBeUndefined()
+      expect(fetchMock).not.toHaveBeenCalled()
+
+      Object.defineProperty(window.navigator, "onLine", {
+        configurable: true,
+        get: () => true
+      })
+    })
   })
 })

packages/javascript/src/api.ts

@@ -1,4 +1,4 @@
-import { Environment } from "./environment"
+import { Environment, isOffline } from "./environment"
 import { Span } from "./span"
 
 import { XDomainTransport } from "./transports/xdomain"
@@ -38,6 +38,9 @@ export class PushApi {
    * @return  {Promise<Span>}     A single API `Span`
    */
   public async push(span: Span): Promise<Span> {
+    if (isOffline()) {
+      return Promise.reject()
+    }
     await this._transport.send(span.toJSON())
     return span
   }

packages/javascript/src/environment.ts

@@ -114,3 +114,13 @@ export function getGlobalObject<T>(): T {
     ? self
     : {}) as T
 }
+
+/**
+ * Returns `true` when the browser reports itself as offline via
+ * `navigator.onLine`. Falls back to `false` when the property is
+ * unavailable (e.g. in Node) so callers default to attempting a request.
+ */
+export function isOffline(): boolean {
+  const globals = getGlobalObject<any>()
+  return globals.navigator !== undefined && globals.navigator.onLine === false
+}