Merge pull request #1137 from OneSignal/feat/improve_logging_format

[Feat] Improve logging format and styling

src/onesignal/OneSignal.ts

@@ -28,7 +28,7 @@ import { AppUserConfigNotifyButton } from '../shared/models/Prompts';
 import { WindowEnvironmentKind } from '../shared/models/WindowEnvironmentKind';
 import Database from '../shared/services/Database';
 import OneSignalUtils from '../shared/utils/OneSignalUtils';
-import { logMethodCall, getConsoleStyle } from '../shared/utils/utils';
+import { logMethodCall } from '../shared/utils/utils';
 import OneSignalEvent from '../shared/services/OneSignalEvent';
 import NotificationsNamespace from './NotificationsNamespace';
 import CoreModule from '../core/CoreModule';
@@ -63,14 +63,7 @@ export default class OneSignal {
 
   private static async _initializeConfig(options: AppUserConfig) {
     const appConfig = await new ConfigManager().getAppConfig(options);
-    Log.debug(
-      `OneSignal: Final web app config: %c${JSON.stringify(
-        appConfig,
-        null,
-        4,
-      )}`,
-      getConsoleStyle('code'),
-    );
+    Log.debug('OneSignal: Final web app config:', appConfig);
 
     // TODO: environmentInfo is explicitly dependent on existence of OneSignal.config. Needs refactor.
     // Workaround to temp assign config so that it can be used in context.
@@ -426,9 +419,8 @@ export default class OneSignal {
 LegacyManager.ensureBackwardsCompatibility(OneSignal);
 
 Log.info(
-  `%cOneSignal Web SDK loaded (version ${OneSignal._VERSION},
+  `OneSignal Web SDK loaded (version ${OneSignal._VERSION},
   ${SdkEnvironment.getWindowEnv().toString()} environment).`,
-  getConsoleStyle('bold'),
 );
 Log.debug(
   `Current Page URL: ${

src/page/bell/Message.ts

@@ -1,6 +1,6 @@
 import BrowserUtils from '../../shared/utils/BrowserUtils';
 import Log from '../../shared/libraries/Log';
-import { delay, getConsoleStyle, nothing } from '../../shared/utils/utils';
+import { delay, nothing } from '../../shared/utils/utils';
 import AnimatedElement from './AnimatedElement';
 import Bell from './Bell';
 
@@ -37,10 +37,7 @@ export default class Message extends AnimatedElement {
   }
 
   display(type, content, duration = 0) {
-    Log.debug(
-      `Calling %cdisplay(${type}, ${content}, ${duration}).`,
-      getConsoleStyle('code'),
-    );
+    Log.debug(`Calling display(${type}, ${content}, ${duration}).`);
     return (this.shown ? this.hide() : nothing())
       .then(() => {
         this.content = BrowserUtils.decodeHtmlEntities(content);

src/shared/context/Utils.ts

@@ -27,24 +27,6 @@ export class Utils {
     return indexOfAble.indexOf(match) !== -1;
   }
 
-  public static getConsoleStyle(style: string) {
-    if (style == 'code') {
-      return `padding: 0 1px 1px 5px;border: 1px solid #ddd;border-radius: 3px;font-family: Monaco,"DejaVu Sans Mono","Courier New",monospace;color: #444;`;
-    } else if (style == 'bold') {
-      return `font-weight: 600;color: rgb(51, 51, 51);`;
-    } else if (style == 'alert') {
-      return `font-weight: 600;color: red;`;
-    } else if (style == 'event') {
-      return `color: green;`;
-    } else if (style == 'postmessage') {
-      return `color: orange;`;
-    } else if (style == 'serviceworkermessage') {
-      return `color: purple;`;
-    } else {
-      return '';
-    }
-  }
-
   /**
    * Returns the current object without keys that have undefined values.
    * Regardless of whether the return result is used, the passed-in object is destructively modified.

src/shared/helpers/HttpHelper.ts

@@ -6,18 +6,14 @@ import SubscriptionPopup from '../../page/modules/frames/SubscriptionPopup';
 import Log from '../libraries/Log';
 import SdkEnvironment from '../managers/SdkEnvironment';
 import { WindowEnvironmentKind } from '../models/WindowEnvironmentKind';
-import { getConsoleStyle } from '../utils/utils';
 import OneSignalEvent from '../services/OneSignalEvent';
 
 declare let OneSignal: any;
 
 export default class HttpHelper {
   // Http only - Only called from iframe's init.js
   static async initHttp(options: RemoteFrameOptions) {
-    Log.debug(
-      `Called %cinitHttp(${JSON.stringify(options, null, 4)})`,
-      getConsoleStyle('code'),
-    );
+    Log.debug(`Called initHttp(${JSON.stringify(options, null, 4)})`);
 
     switch (SdkEnvironment.getWindowEnv()) {
       case WindowEnvironmentKind.OneSignalProxyFrame:

src/shared/helpers/InitHelper.ts

@@ -23,11 +23,7 @@ import { DynamicResourceLoader } from '../../page/services/DynamicResourceLoader
 import Database from '../services/Database';
 import LimitStore from '../services/LimitStore';
 import OneSignalUtils from '../utils/OneSignalUtils';
-import {
-  getConsoleStyle,
-  once,
-  triggerNotificationPermissionChanged,
-} from '../utils/utils';
+import { once, triggerNotificationPermissionChanged } from '../utils/utils';
 import Environment from './Environment';
 import OneSignalEvent from '../services/OneSignalEvent';
 import ProxyFrameHost from '../../page/modules/frames/ProxyFrameHost';
@@ -45,7 +41,7 @@ export default class InitHelper {
   /** Main methods */
 
   public static async internalInit() {
-    Log.debug('Called %cinternalInit()', getConsoleStyle('code'));
+    Log.debug('Called internalInit()');
 
     // Always check for an updated service worker
     await OneSignal.context.serviceWorkerManager.installWorker();
@@ -80,7 +76,7 @@ export default class InitHelper {
   }
 
   public static async sessionInit(): Promise<void> {
-    Log.debug(`Called %csessionInit()`, getConsoleStyle('code'));
+    Log.debug(`Called sessionInit()`);
 
     if (OneSignal._sessionInitAlreadyRunning) {
       Log.debug(

src/shared/helpers/MainHelper.ts

@@ -93,12 +93,7 @@ export default class MainHelper {
     const response = await fetch(url);
     const data = await response.json();
     if (data.errors) {
-      Log.error(
-        `API call %c${url}`,
-        Utils.getConsoleStyle('code'),
-        'failed with:',
-        data.errors,
-      );
+      Log.error(`API call ${url}`, 'failed with:', data.errors);
       throw new Error('Failed to get notification icons.');
     }
     return data;

src/shared/services/OneSignalEvent.ts

@@ -72,13 +72,9 @@ export default class OneSignalEvent {
       }
 
       if (displayData || displayData === false) {
-        Log.debug(
-          `(${env}) » %c${eventName}:`,
-          Utils.getConsoleStyle('event'),
-          displayData,
-        );
+        Log.debug(`(${env}) » ${eventName}:`, displayData);
       } else {
-        Log.debug(`(${env}) » %c${eventName}`, Utils.getConsoleStyle('event'));
+        Log.debug(`(${env}) » ${eventName}`);
       }
     }
 

src/shared/utils/OneSignalUtils.ts

@@ -116,9 +116,7 @@ export class OneSignalUtils {
 
   public static logMethodCall(methodName: string, ...args: any[]) {
     return Log.debug(
-      `Called %c${methodName}(${args.map(Utils.stringify).join(', ')})`,
-      Utils.getConsoleStyle('code'),
-      '.',
+      `Called ${methodName}(${args.map(Utils.stringify).join(', ')})`,
     );
   }
 

src/shared/utils/utils.ts

@@ -211,10 +211,6 @@ export function hasCssClass(
  * };
  */
 
-export function getConsoleStyle(style: string) {
-  return Utils.getConsoleStyle(style);
-}
-
 /**
  * Returns a promise for the setTimeout() method.
  * @param durationMs

src/sw/serviceWorker/ServiceWorker.ts

@@ -358,8 +358,7 @@ export class ServiceWorker {
    */
   static onPushReceived(event: PushEvent): void {
     Log.debug(
-      `Called %conPushReceived(${JSON.stringify(event, null, 4)}):`,
-      Utils.getConsoleStyle('code'),
+      `Called onPushReceived(${JSON.stringify(event, null, 4)}):`,
       event,
     );
 
@@ -462,12 +461,7 @@ export class ServiceWorker {
     };
 
     Log.debug(
-      `Called %csendConfirmedDelivery(${JSON.stringify(
-        notification,
-        null,
-        4,
-      )})`,
-      Utils.getConsoleStyle('code'),
+      `Called sendConfirmedDelivery(${JSON.stringify(notification, null, 4)})`,
     );
 
     await awaitableTimeout(
@@ -745,8 +739,7 @@ export class ServiceWorker {
    */
   static async displayNotification(notification: IMutableOSNotification) {
     Log.debug(
-      `Called %cdisplayNotification(${JSON.stringify(notification, null, 4)}):`,
-      Utils.getConsoleStyle('code'),
+      `Called displayNotification(${JSON.stringify(notification, null, 4)}):`,
       notification,
     );
 
@@ -854,8 +847,7 @@ export class ServiceWorker {
    */
   static onNotificationClosed(event) {
     Log.debug(
-      `Called %conNotificationClosed(${JSON.stringify(event, null, 4)}):`,
-      Utils.getConsoleStyle('code'),
+      `Called onNotificationClosed(${JSON.stringify(event, null, 4)}):`,
       event,
     );
     const notification = event.notification.data as IOSNotification;
@@ -906,8 +898,7 @@ export class ServiceWorker {
    */
   static async onNotificationClicked(event: NotificationEvent) {
     Log.debug(
-      `Called %conNotificationClicked(${JSON.stringify(event, null, 4)}):`,
-      Utils.getConsoleStyle('code'),
+      `Called onNotificationClicked(${JSON.stringify(event, null, 4)}):`,
       event,
     );
 
@@ -1198,8 +1189,7 @@ export class ServiceWorker {
 
   static async onPushSubscriptionChange(event: SubscriptionChangeEvent) {
     Log.debug(
-      `Called %conPushSubscriptionChange(${JSON.stringify(event, null, 4)}):`,
-      Utils.getConsoleStyle('code'),
+      `Called onPushSubscriptionChange(${JSON.stringify(event, null, 4)}):`,
       event,
     );
 

src/sw/webhooks/OSWebhookSender.ts

@@ -31,7 +31,7 @@ export class OSWebhookSender {
     Log.debug(
       `Executing ${payload.event} webhook ${
         isServerCorsEnabled ? 'with' : 'without'
-      } CORS %cPOST ${webhookTargetUrl}`,
+      } CORS POST ${webhookTargetUrl}`,
       payload,
     );
     await fetch(webhookTargetUrl, fetchOptions);