implement sendMetrics

src/storage/config.test.ts

@@ -45,6 +45,8 @@ describe('Config', () => {
       disabled: false,
       isAlwaysAuthed: false,
       version: null,
+      ricTimeoutScheduleEvent: 1000,
+      apiKey: '',
       reset: expect.any(Function),
     });
   });
@@ -68,6 +70,7 @@ describe('Config', () => {
       metricPath: '/custom-metrics',
       apiEndpoint: 'https://open.analytics',
       disabled: false,
+      apiKey: '',
       reset: () => Object.assign(getConfig(), DEFAULT_CONFIG),
       onError: () => undefined,
     });
@@ -83,10 +86,12 @@ describe('Config', () => {
       metricPath: '/metrics',
       onError: expect.any(Function),
       disabled: false,
+      apiKey: '',
       apiEndpoint: 'https://cca-lite.coinbase.com',
       isAlwaysAuthed: false,
       reset: expect.any(Function),
       version: null,
+      ricTimeoutScheduleEvent: 1000,
     });
   });
 

src/storage/config.ts

@@ -15,6 +15,7 @@ export const DEFAULT_CONFIG = {
   version: null,
   apiKey: '',
   apiEndpoint: 'https://cca-lite.coinbase.com',
+  ricTimeoutScheduleEvent: 1000,
   // TODO: find better solution to handle reset
   reset: () => Object.assign(getConfig(), DEFAULT_CONFIG),
 };

src/types/config.ts

@@ -33,6 +33,7 @@ export type CustomConfig = {
   batchEventsThreshold?: number;
   batchMetricsPeriod?: number;
   batchMetricsThreshold?: number;
+  ricTimeoutScheduleEvent?: number,
   isAlwaysAuthed?: boolean;
   version?: string | number | null;
   apiKey: string;

src/utils/networkLayer.ts

@@ -13,6 +13,7 @@ import { NetworkLayer } from '../types/networkLayer.ts';
 import { getNow } from './time.ts';
 import { getChecksum } from './dataIntegrity.ts';
 import { apiFetch } from './apiFetch.ts';
+import { scheduleEvent } from './scheduler.ts';
 
 export const sendEvents = (events: Event[]) => {
   const identity = getIdentity();
@@ -55,7 +56,7 @@ export const sendEvents = (events: Event[]) => {
   }
 
   const eventEndPoint = `${apiEndpoint}${eventPath}`;
-  console.log('sendEvents', eventEndPoint);
+  // console.log('sendEvents', eventEndPoint);
   // request to {eventEndPoint}
   apiFetch({
     url: eventEndPoint,
@@ -64,7 +65,33 @@ export const sendEvents = (events: Event[]) => {
   })
 
 };
-export const sendMetrics = (metrics: Metric[]) => {
+export const sendMetrics = (metrics: Metric[], skipScheduler = false) => {
+
+  const {apiEndpoint, metricPath, onError} = getConfig();
+  const metricEndpoint = `${apiEndpoint}${metricPath}`;
+
+  if(skipScheduler) {
+    apiFetch({
+      url: metricEndpoint,
+      data: {
+        metricData: metrics,
+      },
+      isJSON: true,
+      onError: onError,
+    })
+  } else {
+    scheduleEvent(() => {
+      apiFetch({
+        url: metricEndpoint,
+        data: {
+          metricData: metrics,
+        },
+        isJSON: true,
+        onError: onError,
+      })
+    });
+  }
+
   console.log('sendMetrics', metrics);
 };
 

src/utils/scheduler.ts

@@ -1,5 +1,6 @@
 import { createQueue } from './queue';
 import { Scheduler } from '../types/scheduler';
+import { getConfig } from '../storage/storage';
 
 const DEFAULT_BATCH_THRESHOLD = 30;
 const DEFAULT_TIME_THRESHOLD = 5000;
@@ -49,3 +50,18 @@ export const createScheduler = <T>(callback: (items: T[]) => void, batchThreshol
     get length() { return queue.length; }
   };
 }
+/*
+* Schedule an event
+* - on web we create a background task with the requestIdleCallback API
+* - on iOS and android we use the InteractionManager to schedule
+*   a task after interactions or animations have completed,
+*   this helps especially animations to run smoothly.
+*/
+export const scheduleEvent = (cb: () => void) => {
+  const config = getConfig();
+ if (window?.requestIdleCallback) {
+   window.requestIdleCallback(cb, { timeout: config.ricTimeoutScheduleEvent });
+ } else {
+   cb();
+ }
+};