[Dev] API: Colored logs (#2052)

src/api/gramjs/helpers.ts

@@ -2,6 +2,20 @@ import { Api as GramJs } from '../../lib/gramjs';
 import localDb from './localDb';
 import { buildApiPeerId, getApiChatIdFromMtpPeer } from './apiBuilders/peers';
 
+const LOG_BACKGROUND = '#111111DD';
+const LOG_PREFIX_COLOR = '#E4D00A';
+const LOG_SUFFIX = {
+  INVOKE: '#49DBF5',
+  'INVOKE RESPONSE': '#6887F7',
+  CONNECTING: '#E4D00A',
+  CONNECTED: '#26D907',
+  'CONNECTING ERROR': '#D1191C',
+  'INVOKE ERROR': '#D1191C',
+  UPDATE: '#0DD151',
+  'UNEXPECTED UPDATE': '#9C9C9C',
+  'UNEXPECTED RESPONSE': '#D1191C',
+};
+
 export function resolveMessageApiChatId(mtpMessage: GramJs.TypeMessage) {
   if (!(mtpMessage instanceof GramJs.Message || mtpMessage instanceof GramJs.MessageService)) {
     return undefined;
@@ -83,3 +97,18 @@ export function serializeBytes(value: Buffer) {
 export function deserializeBytes(value: string) {
   return Buffer.from(value, 'binary');
 }
+
+export function log(suffix: keyof typeof LOG_SUFFIX, ...data: any) {
+  /* eslint-disable max-len */
+  /* eslint-disable no-console */
+  const func = suffix === 'UNEXPECTED RESPONSE' ? console.error
+    : suffix === 'INVOKE ERROR' || suffix === 'UNEXPECTED UPDATE' ? console.warn : console.log;
+  /* eslint-enable no-console */
+  func(
+    `%cGramJS%c${suffix}`,
+    `color: ${LOG_PREFIX_COLOR}; background: ${LOG_BACKGROUND}; padding: 0.25rem; border-radius: 0.25rem;`,
+    `color: ${LOG_SUFFIX[suffix]}; background: ${LOG_BACKGROUND}; padding: 0.25rem; border-radius: 0.25rem; margin-left: 0.25rem;`,
+    ...data,
+  );
+  /* eslint-enable max-len */
+}

src/api/gramjs/methods/client.ts

@@ -27,7 +27,7 @@ import downloadMediaWithClient, { parseMediaUrl } from './media';
 import { buildApiUserFromFull } from '../apiBuilders/users';
 import localDb, { clearLocalDb } from '../localDb';
 import { buildApiPeerId } from '../apiBuilders/peers';
-import { addMessageToLocalDb } from '../helpers';
+import { addMessageToLocalDb, log } from '../helpers';
 
 const DEFAULT_USER_AGENT = 'Unknown UserAgent';
 const DEFAULT_PLATFORM = 'Unknown platform';
@@ -83,8 +83,7 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
 
   try {
     if (DEBUG) {
-      // eslint-disable-next-line no-console
-      console.log('[GramJs/client] CONNECTING');
+      log('CONNECTING');
 
       // eslint-disable-next-line no-restricted-globals
       (self as any).invoke = invokeRequest;
@@ -120,8 +119,7 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
     if (DEBUG) {
       // eslint-disable-next-line no-console
       console.log('>>> FINISH INIT API');
-      // eslint-disable-next-line no-console
-      console.log('[GramJs/client] CONNECTED');
+      log('CONNECTED');
     }
 
     onAuthReady();
@@ -131,8 +129,7 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
     void fetchCurrentUser();
   } catch (err) {
     if (DEBUG) {
-      // eslint-disable-next-line no-console
-      console.log('[GramJs/client] CONNECTING ERROR', err);
+      log('CONNECTING ERROR', err);
     }
 
     throw err;
@@ -214,8 +211,7 @@ export async function invokeRequest<T extends GramJs.AnyRequest>(
 ) {
   if (!isConnected) {
     if (DEBUG) {
-      // eslint-disable-next-line no-console
-      console.warn(`[GramJs/client] INVOKE ERROR ${request.className}: Client is not connected`);
+      log('INVOKE ERROR', request.className, 'Client is not connected');
     }
 
     return undefined;
@@ -223,15 +219,13 @@ export async function invokeRequest<T extends GramJs.AnyRequest>(
 
   try {
     if (DEBUG) {
-      // eslint-disable-next-line no-console
-      console.log(`[GramJs/client] INVOKE ${request.className}`);
+      log('INVOKE', request.className);
     }
 
     const result = await client.invoke(request, dcId);
 
     if (DEBUG) {
-      // eslint-disable-next-line no-console
-      console.log(`[GramJs/client] INVOKE RESPONSE ${request.className}`, result);
+      log('INVOKE RESPONSE', request.className, result);
     }
 
     if (!shouldIgnoreUpdates) {
@@ -241,8 +235,7 @@ export async function invokeRequest<T extends GramJs.AnyRequest>(
     return shouldReturnTrue ? result && true : result;
   } catch (err: any) {
     if (DEBUG) {
-      // eslint-disable-next-line no-console
-      console.log(`[GramJs/client] INVOKE ERROR ${request.className}`);
+      log('INVOKE ERROR', request.className);
       // eslint-disable-next-line no-console
       console.error(err);
     }

src/api/gramjs/updater.ts

@@ -39,6 +39,7 @@ import {
   addPhotoToLocalDb,
   resolveMessageApiChatId,
   serializeBytes,
+  log,
 } from './helpers';
 import { buildApiNotifyException, buildPrivacyKey, buildPrivacyRules } from './apiBuilders/misc';
 import { buildApiPhoto } from './apiBuilders/common';
@@ -984,7 +985,6 @@ export function updater(update: Update, originRequest?: GramJs.AnyRequest) {
     }
   } else if (DEBUG) {
     const params = typeof update === 'object' && 'className' in update ? update.className : update;
-    // eslint-disable-next-line no-console
-    console.warn('[GramJs/updater] Unexpected update:', params);
+    log('UNEXPECTED UPDATE', params);
   }
 }

src/api/gramjs/worker/worker.ts

@@ -3,6 +3,7 @@ import type { OriginMessageEvent, WorkerMessageData } from './types';
 
 import { DEBUG } from '../../../config';
 import { initApi, callApi, cancelApiProgress } from '../provider';
+import { log } from '../helpers';
 
 declare const self: WorkerGlobalScope;
 
@@ -47,8 +48,7 @@ onmessage = async (message: OriginMessageEvent) => {
         const response = await callApi(name, ...args);
 
         if (DEBUG && typeof response === 'object' && 'CONSTRUCTOR_ID' in response) {
-          // eslint-disable-next-line no-console
-          console.error(`[GramJs/worker] \`${name}\`: Unexpected response \`${(response as any).className}\``);
+          log('UNEXPECTED RESPONSE', `${name}: ${response.className}`);
         }
 
         const { arrayBuffer } = (typeof response === 'object' && 'arrayBuffer' in response && response) || {};
@@ -119,6 +119,10 @@ function onUpdate(update: ApiUpdate) {
     type: 'update',
     update,
   });
+
+  if (DEBUG && update['@type'] !== 'updateUserStatus' && update['@type'] !== 'updateServerTimeOffset') {
+    log('UPDATE', update['@type'], update);
+  }
 }
 
 function sendToOrigin(data: WorkerMessageData, arrayBuffer?: ArrayBuffer) {

src/global/actions/apiUpdaters/initial.ts

@@ -11,7 +11,7 @@ import type {
   ApiUpdateSession,
   ApiUpdateCurrentUser, ApiUpdateServerTimeOffset,
 } from '../../../api/types';
-import { DEBUG, SESSION_USER_KEY } from '../../../config';
+import { SESSION_USER_KEY } from '../../../config';
 import { subscribe } from '../../../util/notifications';
 import { updateUser } from '../../reducers';
 import { setLanguage } from '../../../util/langProvider';
@@ -20,13 +20,6 @@ import { forceWebsync } from '../../../util/websync';
 import { getShippingError, shouldClosePaymentModal } from '../../../util/getReadableErrorText';
 
 addActionHandler('apiUpdate', (global, actions, update) => {
-  if (DEBUG) {
-    if (update['@type'] !== 'updateUserStatus' && update['@type'] !== 'updateServerTimeOffset') {
-      // eslint-disable-next-line no-console
-      console.log('[GramJs] UPDATE', update['@type'], { update });
-    }
-  }
-
   switch (update['@type']) {
     case 'updateApiReady':
       onUpdateApiReady(global);