add in-flight requests test and support retrying all fetch errors

Author: chrisradek

packages/browser-integration-tests/package.json

@@ -20,6 +20,7 @@
     "@playwright/test": "^1.28.1",
     "@segment/analytics-next": "workspace:^",
     "http-server": "14.1.1",
-    "nock": "^13.2.9"
+    "nock": "^13.2.9",
+    "tslib": "^2.4.1"
   }
 }

packages/browser-integration-tests/src/segment-retries.test.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { Request, test, expect } from '@playwright/test'
 import { SettingsBuilder } from './fixtures/settings'
 import { standaloneMock } from './helpers/standalone-mock'
 
@@ -25,9 +25,14 @@ test.describe('Standalone tests', () => {
       )
     })
 
-    test.skip('supports retries on page navigation', async ({ page }) => {
+    test('supports retrying failed requests on page navigation', async ({
+      page,
+    }) => {
       // Load analytics.js
       await page.goto('/standalone.html')
+      await page.evaluate(() =>
+        window.addEventListener('pagehide', () => console.log('hidden'))
+      )
       await page.evaluate(() => window.analytics.load('fake-key'))
 
       // fail the 1st request
@@ -60,5 +65,55 @@ test.describe('Standalone tests', () => {
 
       expect(request.method()).toBe('POST')
     })
+
+    test('supports retrying in-flight requests on page navigation', async ({
+      page,
+    }) => {
+      // Load analytics.js
+      await page.goto('/standalone.html')
+      await page.evaluate(() =>
+        window.addEventListener('pagehide', () => console.log('hidden'))
+      )
+      await page.evaluate(() => window.analytics.load('fake-key'))
+
+      // blackhole the request so that it stays in-flight when we reload the page
+      await page.route(
+        'https://api.segment.io/v1/t',
+        async () => {
+          // do nothing
+        },
+        {
+          times: 1,
+        }
+      )
+
+      // Detect when we've seen a track request initiated by the browser
+      const requestSent = new Promise<void>((resolve) => {
+        const onRequest: (req: Request) => void = (req) => {
+          if (req.url() === 'https://api.segment.io/v1/t') {
+            page.off('request', onRequest)
+            resolve()
+          }
+        }
+
+        page.on('request', onRequest)
+      })
+
+      // trigger an event
+      await page.evaluate(() => {
+        void window.analytics.track('test event')
+      })
+
+      await requestSent
+      await page.reload()
+
+      // load analytics.js again and wait for a new request.
+      const [request] = await Promise.all([
+        page.waitForRequest('https://api.segment.io/v1/t'),
+        page.evaluate(() => window.analytics.load('fake-key')),
+      ])
+
+      expect(request.method()).toBe('POST')
+    })
   })
 })

packages/browser-integration-tests/src/shims.d.ts

@@ -0,0 +1,7 @@
+import type { AnalyticsSnippet } from '@segment/analytics-next'
+
+declare global {
+  interface Window {
+    analytics: AnalyticsSnippet
+  }
+}

packages/browser/src/plugins/segmentio/index.ts

@@ -103,12 +103,10 @@ export function segmentio(
         normalize(analytics, json, settings, integrations)
       )
       .then(() => ctx)
-      .catch((err) => {
-        if (err.type === 'error' || err.message === 'Failed to fetch') {
-          buffer.pushWithBackoff(ctx)
-          // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          scheduleFlush(flushing, buffer, segmentio, scheduleFlush)
-        }
+      .catch(() => {
+        buffer.pushWithBackoff(ctx)
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        scheduleFlush(flushing, buffer, segmentio, scheduleFlush)
         return ctx
       })
       .finally(() => {

yarn.lock

@@ -1194,6 +1194,7 @@ __metadata:
     "@segment/analytics-next": "workspace:^"
     http-server: 14.1.1
     nock: ^13.2.9
+    tslib: ^2.4.1
   languageName: unknown
   linkType: soft
 
@@ -13795,6 +13796,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "tslib@npm:2.4.1"
+  checksum: 19480d6e0313292bd6505d4efe096a6b31c70e21cf08b5febf4da62e95c265c8f571f7b36fcc3d1a17e068032f59c269fab3459d6cd3ed6949eafecf64315fca
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"