@mparticle/web-sdk 2.18.3 → 2.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mparticle/web-sdk",
-    "version": "2.18.3",
+    "version": "2.19.1",
     "description": "mParticle core SDK for web applications",
     "license": "Apache-2.0",
     "keywords": [

package/src/apiClient.ts

@@ -189,7 +189,7 @@ export default function APIClient(
                 );
                 xhr.send(
                     JSON.stringify(
-                        mpInstance._ServerModel.convertEventToDTO(
+                        mpInstance._ServerModel.convertEventToV2DTO(
                             event as IUploadObject
                         )
                     )

package/src/batchUploader.ts

@@ -9,17 +9,35 @@ import { convertEvents } from './sdkToEventsApiConverter';
 import Types from './types';
 import { isEmpty } from './utils';
 
+/**
+ * BatchUploader contains all the logic to upload batches to mParticle.
+ * It queues events as they come in and at set intervals turns them into batches.
+ * It then attempts to upload them to mParticle.
+ *
+ * These uploads happen on an interval basis using window.fetch or XHR
+ * requests, depending on what is available in the browser.
+ *
+ * Uploads can also be triggered on browser visibility/focus changes via an
+ * event listener, which then uploads to mPartice via the browser's Beacon API.
+ */
+
 export class BatchUploader {
-    //we upload JSON, but this content type is required to avoid a CORS preflight request
+    // We upload JSON, but this content type is required to avoid a CORS preflight request
     static readonly CONTENT_TYPE: string = 'text/plain;charset=UTF-8';
     static readonly MINIMUM_INTERVAL_MILLIS: number = 500;
     uploadIntervalMillis: number;
-    pendingEvents: SDKEvent[];
-    pendingUploads: Batch[];
+    eventsQueuedForProcessing: SDKEvent[];
+    batchesQueuedForProcessing: Batch[];
     mpInstance: MParticleWebSDK;
     uploadUrl: string;
     batchingEnabled: boolean;
+    private uploader: AsyncUploader;
 
+    /**
+     * Creates an instance of a BatchUploader
+     * @param {MParticleWebSDK} mpInstance - the mParticle SDK instance
+     * @param {number} uploadInterval - the desired upload interval in milliseconds
+     */
     constructor(mpInstance: MParticleWebSDK, uploadInterval: number) {
         this.mpInstance = mpInstance;
         this.uploadIntervalMillis = uploadInterval;
@@ -28,8 +46,8 @@ export class BatchUploader {
         if (this.uploadIntervalMillis < BatchUploader.MINIMUM_INTERVAL_MILLIS) {
             this.uploadIntervalMillis = BatchUploader.MINIMUM_INTERVAL_MILLIS;
         }
-        this.pendingEvents = [];
-        this.pendingUploads = [];
+        this.eventsQueuedForProcessing = [];
+        this.batchesQueuedForProcessing = [];
 
         const { SDKConfig, devToken } = this.mpInstance._Store;
         const baseUrl = this.mpInstance._Helpers.createServiceUrl(
@@ -38,15 +56,20 @@ export class BatchUploader {
         );
         this.uploadUrl = `${baseUrl}/events`;
 
-        setTimeout(() => {
-            this.prepareAndUpload(true, false);
-        }, this.uploadIntervalMillis);
+        this.uploader = window.fetch
+            ? new FetchUploader(this.uploadUrl)
+            : new XHRUploader(this.uploadUrl);
+
+        this.triggerUploadInterval(true, false);
         this.addEventListeners();
     }
 
+    // Adds listeners to be used trigger Navigator.sendBeacon if the browser
+    // loses focus for any reason, such as closing browser tab or minimizing window
     private addEventListeners() {
         const _this = this;
 
+        // visibility change is a document property, not window
         document.addEventListener('visibilitychange', () => {
             _this.prepareAndUpload(false, _this.isBeaconAvailable());
         });
@@ -65,16 +88,32 @@ export class BatchUploader {
         return false;
     }
 
+    // Triggers a setTimeout for prepareAndUpload
+    private triggerUploadInterval(
+        triggerFuture: boolean = false,
+        useBeacon: boolean = false
+    ): void {
+        setTimeout(() => {
+            this.prepareAndUpload(triggerFuture, useBeacon);
+        }, this.uploadIntervalMillis);
+    }
+
+    /**
+     * This method will queue a single Event which will eventually be processed into a Batch
+     * @param event event that should be queued
+     */
     queueEvent(event: SDKEvent): void {
         if (!isEmpty(event)) {
-            this.pendingEvents.push(event);
+            this.eventsQueuedForProcessing.push(event);
             this.mpInstance.Logger.verbose(
                 `Queuing event: ${JSON.stringify(event)}`
             );
             this.mpInstance.Logger.verbose(
-                `Queued event count: ${this.pendingEvents.length}`
+                `Queued event count: ${this.eventsQueuedForProcessing.length}`
             );
 
+            // TODO: Remove this check once the v2 code path is removed
+            //       https://go.mparticle.com/work/SQDSDKS-3720
             if (
                 !this.batchingEnabled ||
                 Types.TriggerUploadType[event.EventDataType]
@@ -93,7 +132,7 @@ export class BatchUploader {
      * @param sdkEvents current pending events
      * @param defaultUser the user to reference for events that are missing data
      */
-    private static createNewUploads(
+    private static createNewBatches(
         sdkEvents: SDKEvent[],
         defaultUser: MParticleUser,
         mpInstance: MParticleWebSDK
@@ -141,9 +180,8 @@ export class BatchUploader {
                     mpInstance._Store.SDKConfig.onCreateBatch;
 
                 if (onCreateBatchCallback) {
-                    uploadBatchObject = onCreateBatchCallback(
-                        uploadBatchObject
-                    );
+                    uploadBatchObject =
+                        onCreateBatchCallback(uploadBatchObject);
                     if (uploadBatchObject) {
                         uploadBatchObject.modified = true;
                     } else {
@@ -169,112 +207,122 @@ export class BatchUploader {
      * @param triggerFuture whether to trigger the loop again - for manual/forced uploads this should be false
      * @param useBeacon whether to use the beacon API - used when the page is being unloaded
      */
-    private async prepareAndUpload(triggerFuture: boolean, useBeacon: boolean) {
+    private async prepareAndUpload(
+        triggerFuture: boolean,
+        useBeacon: boolean
+    ): Promise<void> {
         const currentUser = this.mpInstance.Identity.getCurrentUser();
 
-        const currentEvents = this.pendingEvents;
-        this.pendingEvents = [];
-        const newUploads = BatchUploader.createNewUploads(
+        const currentEvents = this.eventsQueuedForProcessing;
+        this.eventsQueuedForProcessing = [];
+
+        const newBatches = BatchUploader.createNewBatches(
             currentEvents,
             currentUser,
             this.mpInstance
         );
-        if (newUploads && newUploads.length) {
-            this.pendingUploads.push(...newUploads);
+        if (!isEmpty(newBatches)) {
+            this.batchesQueuedForProcessing.push(...newBatches);
         }
 
-        const currentUploads = this.pendingUploads;
-        this.pendingUploads = [];
-        const remainingUploads: Batch[] = await this.upload(
-            this.mpInstance.Logger,
-            currentUploads,
-            useBeacon
-        );
-        if (remainingUploads && remainingUploads.length) {
-            this.pendingUploads.unshift(...remainingUploads);
+        const batchesToUpload = this.batchesQueuedForProcessing;
+        const batchesThatDidNotUpload: Batch[] = [];
+        this.batchesQueuedForProcessing = [];
+
+        // Create an array of promises as we try to upload each batch indvidually
+        const promises: Promise<Batch>[] = batchesToUpload.map((upload) => {
+            return this.upload(this.mpInstance.Logger, upload, useBeacon);
+        });
+
+        // Iterate through fulfilled promises and store any remaining batches
+        // for future re-transmission attempts
+        if (!isEmpty(promises)) {
+            Promise.all(promises)
+                .then((batchResponses) => {
+                    batchResponses.forEach((batch) =>
+                        !isEmpty(batch)
+                            ? batchesThatDidNotUpload.push(batch)
+                            : null
+                    );
+                })
+                .catch((error) => {
+                    this.mpInstance.Logger.error(
+                        `Error processing batches during upload attempt: ${error}`
+                    );
+                })
+                .finally(() => {
+                    // Any batches that did not upload should be put back into the queue for processing
+                    if (!isEmpty(batchesThatDidNotUpload)) {
+                        this.batchesQueuedForProcessing.unshift(
+                            ...batchesThatDidNotUpload
+                        );
+                    }
+                });
         }
 
         if (triggerFuture) {
-            setTimeout(() => {
-                this.prepareAndUpload(true, false);
-            }, this.uploadIntervalMillis);
+            this.triggerUploadInterval(triggerFuture, false);
         }
     }
 
     private async upload(
         logger: SDKLoggerApi,
-        _uploads: Batch[],
+        batch: Batch,
         useBeacon: boolean
-    ): Promise<Batch[]> {
-        let uploader;
-
-        // Filter out any batches that don't have events
-        const uploads = _uploads.filter(upload => !isEmpty(upload.events));
-
-        if (isEmpty(uploads)) {
+    ): Promise<Batch | null> {
+        if (isEmpty(batch) || isEmpty(batch.events)) {
             return null;
         }
 
-        logger.verbose(`Uploading batches: ${JSON.stringify(uploads)}`);
-        logger.verbose(`Batch count: ${uploads.length}`);
-
-        for (let i = 0; i < uploads.length; i++) {
-            const fetchPayload: fetchPayload = {
-                method: 'POST',
-                headers: {
-                    Accept: BatchUploader.CONTENT_TYPE,
-                    'Content-Type': 'text/plain;charset=UTF-8',
-                },
-                body: JSON.stringify(uploads[i]),
-            };
+        logger.verbose(`Uploading batches: ${JSON.stringify(batch)}`);
+
+        const fetchPayload: fetchPayload = {
+            method: 'POST',
+            headers: {
+                Accept: BatchUploader.CONTENT_TYPE,
+                'Content-Type': 'text/plain;charset=UTF-8',
+            },
+            body: JSON.stringify(batch),
+        };
+
+        // TODO: Make beacon its own function
+        // beacon is only used on onbeforeunload onpagehide events
+        if (useBeacon && this.isBeaconAvailable()) {
+            let blob = new Blob([fetchPayload.body], {
+                type: 'text/plain;charset=UTF-8',
+            });
+            navigator.sendBeacon(this.uploadUrl, blob);
+        } else {
+            try {
+                const response = await this.uploader.upload(fetchPayload);
+
+                // TODO: Should we make this a switch statement instead?
+                if (response.status >= 200 && response.status < 300) {
+                    logger.verbose(
+                        `Upload success for request ID: ${batch.source_request_id}`
+                    );
 
-            // beacon is only used on onbeforeunload onpagehide events
-            if (useBeacon && this.isBeaconAvailable()) {
-                let blob = new Blob([fetchPayload.body], {
-                    type: 'text/plain;charset=UTF-8',
-                });
-                navigator.sendBeacon(this.uploadUrl, blob);
-            } else {
-                if (!uploader) {
-                    if (window.fetch) {
-                        uploader = new FetchUploader(this.uploadUrl, logger);
-                    } else {
-                        uploader = new XHRUploader(this.uploadUrl, logger);
-                    }
-                }
-                try {
-                    const response = await uploader.upload(
-                        fetchPayload,
-                        uploads,
-                        i
+                    return null;
+                } else if (response.status >= 500 || response.status === 429) {
+                    logger.error(
+                        `HTTP error status ${response.status} received`
                     );
 
-                    if (response.status >= 200 && response.status < 300) {
-                        logger.verbose(
-                            `Upload success for request ID: ${uploads[i].source_request_id}`
-                        );
-                    } else if (
-                        response.status >= 500 ||
-                        response.status === 429
-                    ) {
-                        logger.error(
-                            `HTTP error status ${response.status} received`
-                        );
-                        //server error, add back current events and try again later
-                        return uploads.slice(i, uploads.length);
-                    } else if (response.status >= 401) {
-                        logger.error(
-                            `HTTP error status ${response.status} while uploading - please verify your API key.`
-                        );
-                        //if we're getting a 401, assume we'll keep getting a 401 and clear the uploads.
-                        return null;
-                    }
-                } catch (e) {
+                    // Server error, return current batch and try again later
+                    return batch;
+                } else if (response.status >= 401) {
                     logger.error(
-                        `Error sending event to mParticle servers. ${e}`
+                        `HTTP error status ${response.status} while uploading - please verify your API key.`
                     );
-                    return uploads.slice(i, uploads.length);
+                    // if we're getting a 401, assume we'll keep getting a 401
+                    // so return the upload so it can be stored for later use
+                    return batch;
                 }
+            } catch (error) {
+                logger.error(
+                    `Error sending event to mParticle servers. ${error}`
+                );
+                return batch;
             }
         }
         return null;
@@ -283,34 +331,24 @@ export class BatchUploader {
 
 abstract class AsyncUploader {
     url: string;
-    logger: SDKLoggerApi;
+    public abstract upload(fetchPayload: fetchPayload): Promise<XHRResponse>;
 
-    constructor(url: string, logger: SDKLoggerApi) {
+    constructor(url: string) {
         this.url = url;
-        this.logger = logger;
     }
 }
 
 class FetchUploader extends AsyncUploader {
-    private async upload(
-        fetchPayload: fetchPayload,
-        uploads: Batch[],
-        i: number
-    ) {
+    public async upload(fetchPayload: fetchPayload): Promise<XHRResponse> {
         const response: XHRResponse = await fetch(this.url, fetchPayload);
         return response;
     }
 }
 
 class XHRUploader extends AsyncUploader {
-    private async upload(
-        fetchPayload: fetchPayload,
-        uploads: Batch[],
-        i: number
-    ) {
+    public async upload(fetchPayload: fetchPayload): Promise<XHRResponse> {
         const response: XHRResponse = await this.makeRequest(
             this.url,
-            this.logger,
             fetchPayload.body
         );
         return response;
@@ -318,7 +356,6 @@ class XHRUploader extends AsyncUploader {
 
     private async makeRequest(
         url: string,
-        logger: SDKLoggerApi,
         data: string
     ): Promise<XMLHttpRequest> {
         const xhr: XMLHttpRequest = new XMLHttpRequest();