Merge pull request #20 from notificationapi-com/R4js2ANZ/3366-react-sdk-debug-mode

Update version to 0.0.17 and add debug logging functionality to NotificationAPI client SDK

Author: mbasadi

lib/api.ts

@@ -1,4 +1,5 @@
 import { API_REGION } from './interfaces';
+import { Logger } from './logger';
 
 export const api = async (
   method: 'GET' | 'POST' | 'PATCH' | 'DELETE',
@@ -7,27 +8,67 @@ export const api = async (
   clientId: string,
   userId: string,
   hashedUserId?: string,
-  data?: any
+  data?: any,
+  logger?: Logger
 ): Promise<any> => {
   const token = generateBasicTokenForUser(clientId, userId, hashedUserId);
-  const res = await fetch(
-    `https://${host}/${clientId}/users/${encodeURIComponent(
-      userId
-    )}/${resource}`,
-    {
+  const url = `https://${host}/${clientId}/users/${encodeURIComponent(
+    userId
+  )}/${resource}`;
+
+  const headers = {
+    Authorization: `Basic ${token}`
+  };
+
+  if (logger) {
+    logger.log('HTTP Request:', {
+      method,
+      host,
+      url,
+      body: data
+    });
+  }
+
+  const startTime = Date.now();
+
+  try {
+    const res = await fetch(url, {
       method,
       body: JSON.stringify(data),
-      headers: {
-        Authorization: `Basic ${token}`
+      headers
+    });
+
+    if (logger) {
+      logger.log('HTTP Response:', res);
+    }
+
+    try {
+      const responseData = await res.json();
+
+      if (logger) {
+        logger.log('Response Data:', responseData);
+      }
+
+      return responseData;
+    } catch (e) {
+      if (logger) {
+        logger.warn('Failed to parse response as JSON:', e);
       }
+      return undefined;
     }
-  );
+  } catch (error) {
+    const duration = Date.now() - startTime;
 
-  try {
-    const responseData = await res.json();
-    return responseData;
-  } catch (e) {
-    return undefined;
+    if (logger) {
+      logger.error('HTTP Request Failed:', {
+        error,
+        url,
+        headers,
+        duration: `${duration}ms`
+      });
+    }
+
+    throw error;
   }
 };
 

lib/client.ts

@@ -1,4 +1,5 @@
 import { api } from './api';
+import { Logger } from './logger';
 import {
   API_REGION,
   BaseDeliveryOptions,
@@ -29,6 +30,9 @@ type NotificationAPIClientSDKConfig = {
   websocketHost: string | WS_REGION;
   keepWebSocketAliveForSeconds: number;
   onNewInAppNotifications?: (notifications: InAppNotification[]) => unknown;
+
+  // Debug mode:
+  debug: boolean;
 };
 
 const defaultConfig: NotificationAPIClientSDKConfig = {
@@ -42,11 +46,13 @@ const defaultConfig: NotificationAPIClientSDKConfig = {
     Date.now() - 30 * 24 * 60 * 60 * 1000
   ).toISOString(),
   onNewInAppNotifications: undefined,
-  keepWebSocketAliveForSeconds: 24 * 60 * 60 // 24 hours
+  keepWebSocketAliveForSeconds: 24 * 60 * 60, // 24 hours
+  debug: false
 };
 
 type NotificationAPIClientSDK = {
   config: NotificationAPIClientSDKConfig;
+  logger: Logger;
   init(
     config: Partial<NotificationAPIClientSDKConfig> & {
       userId: string;
@@ -117,22 +123,37 @@ type NotificationAPIClientSDK = {
 
 export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
   config: defaultConfig,
+  logger: new Logger(false),
   init: function (config) {
     this.config = { ...defaultConfig, ...config };
+    this.logger = new Logger(this.config.debug);
+    this.logger.log('Initialized with config:', {
+      userId: this.config.userId,
+      clientId: this.config.clientId,
+      host: this.config.host,
+      websocketHost: this.config.websocketHost,
+      debug: this.config.debug,
+      hasHashedUserId: !!this.config.hashedUserId
+    });
     return {
       ...this
     };
   },
   rest: {
     generic: function (method, resource, data) {
+      NotificationAPIClientSDK.logger.log(
+        `API Call: ${method} ${resource}`,
+        data ? { body: data } : ''
+      );
       return api(
         method,
         NotificationAPIClientSDK.config.host,
         resource,
         NotificationAPIClientSDK.config.clientId,
         NotificationAPIClientSDK.config.userId,
         NotificationAPIClientSDK.config.hashedUserId,
-        data
+        data,
+        NotificationAPIClientSDK.logger
       );
     },
 
@@ -177,15 +198,41 @@ export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
       if (NotificationAPIClientSDK.config.hashedUserId) {
         address += `&userIdHash=${encodeURIComponent(NotificationAPIClientSDK.config.hashedUserId)}`;
       }
+      NotificationAPIClientSDK.logger.log('WebSocket connecting to:', address);
       NotificationAPIClientSDK.websocket.object = new WebSocket(address);
+
+      NotificationAPIClientSDK.websocket.object.onopen = () => {
+        NotificationAPIClientSDK.logger.log('WebSocket connection opened');
+      };
+
+      NotificationAPIClientSDK.websocket.object.onclose = (event) => {
+        NotificationAPIClientSDK.logger.log('WebSocket connection closed:', {
+          code: event.code,
+          reason: event.reason,
+          wasClean: event.wasClean
+        });
+      };
+
+      NotificationAPIClientSDK.websocket.object.onerror = (error) => {
+        NotificationAPIClientSDK.logger.error('WebSocket error:', error);
+      };
+
       NotificationAPIClientSDK.websocket.object.onmessage = (m) => {
+        NotificationAPIClientSDK.logger.log(
+          'WebSocket message received:',
+          m.data
+        );
         const body = JSON.parse(m.data);
         if (!body || !body.route) {
           return;
         }
 
         if (body.route === 'inapp_web/new_notifications') {
           const message = body as WebSocket_NewNotification_Message;
+          NotificationAPIClientSDK.logger.log(
+            'New notifications received:',
+            message.payload.notifications
+          );
           if (NotificationAPIClientSDK.config.onNewInAppNotifications) {
             NotificationAPIClientSDK.config.onNewInAppNotifications(
               message.payload.notifications
@@ -197,6 +244,7 @@ export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
     },
     disconnect: function (callback) {
       if (NotificationAPIClientSDK.websocket.object) {
+        NotificationAPIClientSDK.logger.log('WebSocket disconnecting');
         NotificationAPIClientSDK.websocket.object?.close();
         if (callback) {
           callback(NotificationAPIClientSDK.websocket.object);
@@ -223,17 +271,29 @@ export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
   // e.g. identify simply maps to postUsers
 
   getInAppNotifications: async (params) => {
+    NotificationAPIClientSDK.logger.log(
+      'getInAppNotifications called with params:',
+      params
+    );
+
     const maxCountNeeded =
       params.maxCountNeeded ||
       NotificationAPIClientSDK.config.getInAppDefaultCount;
     const oldestNeeded =
       params.oldestNeeded ||
       NotificationAPIClientSDK.config.getInAppDefaultOldest;
 
+    NotificationAPIClientSDK.logger.log('Fetching notifications with:', {
+      maxCountNeeded,
+      oldestNeeded,
+      before: params.before
+    });
+
     let result: InAppNotification[] = [];
     let oldestReceived = params.before;
     let hasMore = true;
     let shouldLoadMore = true;
+
     while (shouldLoadMore) {
       const res = await NotificationAPIClientSDK.rest.getNotifications(
         oldestReceived,
@@ -243,6 +303,11 @@ export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
       const notisWithoutDuplicates = notis.filter(
         (n) => !result.find((nn) => nn.id === n.id)
       );
+
+      NotificationAPIClientSDK.logger.log(
+        `Received ${notis.length} notifications, ${notisWithoutDuplicates.length} unique`
+      );
+
       oldestReceived = notisWithoutDuplicates.reduce(
         (min: string, n) => (min < n.date ? min : n.date),
         params.before
@@ -258,16 +323,34 @@ export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
         oldestReceived < oldestNeeded
       ) {
         shouldLoadMore = false;
+        NotificationAPIClientSDK.logger.log('Stopping fetch loop:', {
+          hasMore,
+          totalResults: result.length,
+          maxCountNeeded,
+          oldestReceived,
+          oldestNeeded
+        });
       }
     }
 
+    NotificationAPIClientSDK.logger.log('getInAppNotifications completed:', {
+      totalItems: result.length,
+      hasMore,
+      oldestReceived
+    });
+
     return {
       items: result,
       hasMore,
       oldestReceived
     };
   },
   updateInAppNotifications: async (params) => {
+    NotificationAPIClientSDK.logger.log(
+      'updateInAppNotifications called with params:',
+      params
+    );
+
     const body: {
       [key: string]: any;
     } = {
@@ -290,6 +373,10 @@ export const NotificationAPIClientSDK: NotificationAPIClientSDK = {
       body.opened = null;
     }
 
+    NotificationAPIClientSDK.logger.log(
+      'Updating notifications with body:',
+      body
+    );
     return NotificationAPIClientSDK.rest.patchNotifications(body);
   },
   getPreferences: async () => {

lib/logger.ts

@@ -0,0 +1,23 @@
+class Logger {
+  constructor(private debug: boolean = false) {}
+
+  log(...args: any[]) {
+    if (this.debug) {
+      console.log('[NotificationAPI js core SDK Debug]', ...args);
+    }
+  }
+
+  warn(...args: any[]) {
+    if (this.debug) {
+      console.warn('[NotificationAPI js core SDK Debug]', ...args);
+    }
+  }
+
+  error(...args: any[]) {
+    if (this.debug) {
+      console.error('[NotificationAPI js core SDK Debug]', ...args);
+    }
+  }
+}
+
+export { Logger };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@notificationapi/core",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package.json

@@ -3,6 +3,7 @@ import { NotificationAPIClientSDK } from '../lib/client';
 const client = NotificationAPIClientSDK.init({
   clientId: '24nojpnrsdc53fkslha0roov05',
   userId: 'sahand',
+  debug: true,
 
   // for websocket:
   onNewInAppNotifications: (notifications) => {