feat(browser): Flush offline queue on flush and browser online event

dev-packages/browser-integration-tests/suites/transport/offline/flush/subject.js

@@ -0,0 +1,7 @@
+setTimeout(() => {
+  Sentry.captureMessage(`foo ${Math.random()}`);
+}, 500);
+
+setTimeout(() => {
+  Sentry.flush();
+}, 2000);

dev-packages/browser-integration-tests/suites/transport/offline/flush/test.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests } from '../../../../utils/helpers';
+
+function delay(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+sentryTest('should flush event', async ({ getLocalTestUrl, page }) => {
+  // makeBrowserOfflineTransport is not included in any CDN bundles
+  if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle')) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  // This would be the obvious way to test offline support but it doesn't appear to work!
+  // await context.setOffline(true);
+
+  let abortedCount = 0;
+
+  // Abort all envelope requests so the event gets queued
+  await page.route(/ingest\.sentry\.io/, route => {
+    abortedCount += 1;
+    return route.abort();
+  });
+  await page.goto(url);
+  await delay(1_000);
+  await page.unroute(/ingest\.sentry\.io/);
+
+  expect(abortedCount).toBe(1);
+
+  // The previous event should now be queued
+
+  // It should get flushed after a few seconds
+  const eventData = await getMultipleSentryEnvelopeRequests<Event>(page, 2, { timeout: 4_000 });
+
+  // Filter out any client reports
+  const events = eventData.filter(e => !('discarded_events' in e)) as Event[];
+
+  expect(events).toHaveLength(1);
+
+  // The next two events will be message events starting with 'foo'
+  expect(events[0].message?.startsWith('foo'));
+});

packages/browser/src/transports/offline.ts

@@ -1,5 +1,6 @@
 import type { BaseTransportOptions, Envelope, OfflineStore, OfflineTransportOptions, Transport } from '@sentry/core';
 import { makeOfflineTransport, parseEnvelope, serializeEnvelope } from '@sentry/core';
+import { WINDOW } from '../helpers';
 import { makeFetchTransport } from './fetch';
 
 // 'Store', 'promisifyRequest' and 'createStore' were originally copied from the 'idb-keyval' package before being
@@ -158,7 +159,15 @@
 function makeIndexedDbOfflineTransport<T>(
   createTransport: (options: T) => Transport,
 ): (options: T & BrowserOfflineTransportOptions) => Transport {
-  return options => createTransport({ ...options, createStore: createIndexedDbStore });
+  return options => {
+    const transport = createTransport({ ...options, createStore: createIndexedDbStore });
+
+    WINDOW.addEventListener('online', async _ => {
+      await transport.flush();
+    });
+
+    return transport;
+  };
 }
 
 /**

packages/core/src/transports/offline.ts

@@ -170,7 +170,15 @@ export function makeOfflineTransport<TO>(
 
     return {
       send,
-      flush: t => transport.flush(t),
+      flush: timeout => {
+        // If there's no timeout, we should attempt to flush the offline queue.
+        if (timeout === undefined) {
+          retryDelay = START_DELAY;
+          flushIn(MIN_DELAY);
+        }
+
+        return transport.flush(timeout);
+      },
     };
   };
 }