Add changeset and fix format

Author: raymondlam

.changeset/nervous-needles-sit.md

@@ -0,0 +1,5 @@
+---
+'@firebase/performance': minor
+---
+
+Fix bug where events are not sent if they exceed sendBeacon payload limit

packages/performance/src/services/transport_service.test.ts

@@ -21,7 +21,8 @@ import sinonChai from 'sinon-chai';
 import {
   transportHandler,
   setupTransportService,
-  resetTransportService, flushQueuedEvents
+  resetTransportService,
+  flushQueuedEvents
 } from './transport_service';
 import { SettingsService } from './settings_service';
 
@@ -167,13 +168,10 @@ describe('Firebase Performance > transport_service', () => {
         'event_time_ms': '1'
       });
     }
-    expect(fetchStub).calledWith(
-      flTransportFullUrl,
-      {
-        method: 'POST',
-        body: JSON.stringify(firstLogRequest),
-      }
-    );
+    expect(fetchStub).calledWith(flTransportFullUrl, {
+      method: 'POST',
+      body: JSON.stringify(firstLogRequest)
+    });
     // Expects the second logRequest which contains remaining 20 events;
     const secondLogRequest = generateLogRequest('15501');
     for (let i = 0; i < 20; i++) {
@@ -269,7 +267,6 @@ describe('Firebase Performance > transport_service', () => {
     sendBeaconStub.onCall(1).returns(false);
     flushQueuedEvents();
 
-
     // Assert
     const firstLogRequest = generateLogRequest('1');
     const secondLogRequest = generateLogRequest('1');
@@ -289,13 +286,10 @@ describe('Firebase Performance > transport_service', () => {
       flTransportFullUrl,
       JSON.stringify(firstLogRequest)
     );
-    expect(fetchStub).calledWith(
-      flTransportFullUrl,
-      {
-        method: 'POST',
-        body: JSON.stringify(secondLogRequest),
-      }
-    );
+    expect(fetchStub).calledWith(flTransportFullUrl, {
+      method: 'POST',
+      body: JSON.stringify(secondLogRequest)
+    });
   });
 
   function generateLogRequest(requestTimeMs: string): any {

packages/performance/src/services/transport_service.ts

@@ -142,13 +142,16 @@ function postToFlEndpoint(body: string): Promise<void | Response> {
     SettingsService.getInstance().getFlTransportFullUrl();
   const size = TEXT_ENCODER.encode(body).length;
 
-  if (size <= MAX_SEND_BEACON_PAYLOAD_SIZE && navigator.sendBeacon &&
-    navigator.sendBeacon(flTransportFullUrl, body)) {
+  if (
+    size <= MAX_SEND_BEACON_PAYLOAD_SIZE &&
+    navigator.sendBeacon &&
+    navigator.sendBeacon(flTransportFullUrl, body)
+  ) {
     return Promise.resolve();
   } else {
     return fetch(flTransportFullUrl, {
       method: 'POST',
-      body,
+      body
     });
   }
 }
@@ -170,15 +173,15 @@ export function transportHandler(
     const message = serializer(...args);
     addToQueue({
       message,
-      eventTime: Date.now(),
+      eventTime: Date.now()
     });
   };
 }
 
 /**
  * Force flush the queued events. Useful at page unload time to ensure all events are uploaded.
  * Flush will attempt to use sendBeacon to send events async and defaults back to fetch as soon as a
- * sendBeacon fails. Firefox 
+ * sendBeacon fails. Firefox
  */
 export function flushQueuedEvents(): void {
   const flTransportFullUrl =
@@ -189,7 +192,10 @@ export function flushQueuedEvents(): void {
     const staged = queue.splice(-MAX_FLUSH_SIZE);
     const body = buildPayload(staged);
 
-    if (navigator.sendBeacon && navigator.sendBeacon(flTransportFullUrl, body)) {
+    if (
+      navigator.sendBeacon &&
+      navigator.sendBeacon(flTransportFullUrl, body)
+    ) {
       continue;
     } else {
       queue = [...queue, ...staged];
@@ -200,7 +206,7 @@ export function flushQueuedEvents(): void {
     const body = buildPayload(queue);
     fetch(flTransportFullUrl, {
       method: 'POST',
-      body,
+      body
     }).catch(() => {
       consoleLogger.info(`Failed flushing queued events.`);
     });