loggers

client-logger.ts

// @link: https://www.nightprogrammer.com/javascript/how-to-create-a-logger-in-javascript-example/
// @link: https://dmitripavlutin.com/console-log-tips/
const logbaseColor =
  'background: #008cf4; color: #ffffff; font-size: 12px; padding: 2px 4px;';

const logErrorColor =
  'background: #974855; color: #ffffff; font-size: 12px; padding: 2px 4px;';

export const client = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  log: (str: string, obj?: any, d?: boolean) => {
    if ((!debug && !d) || isProd || !isBrowser) return;
    console.log('%c%s%o', logbaseColor, str, obj);
  },
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  error: (str: string, obj?: any, d?: boolean) => {
    if ((!debug && !d) || isProd || !isBrowser) return;
    console.error('%c%s%o', logErrorColor, str, obj);
  },
};

dev-logger.ts

import { debug as globalDebug } from '@/utils';

const debug: boolean = globalDebug || false;

const logColors = {
  red: '\x1b[31m%s\x1b[0m',
  green: '\x1b[32m%s\x1b[0m',
  yellow: '\x1b[33m%s\x1b[0m',
  blue: '\x1b[34m%s\x1b[0m',
  magenta: '\x1b[35m%s\x1b[0m',
  cyan: '\x1b[36m%s\x1b[0m',
};

export function dev() {
  const isProd = process.env.NODE_ENV === 'production';

  return {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    log: function log(str: string, obj?: any, d?: boolean) {
      if (isProd || (!debug && !d)) return;
      console.log(logColors.yellow, str, obj);
    },
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    err: function err(str: string, obj?: any, d?: boolean) {
      if (isProd || (!debug && !d)) return;
      console.log(logColors.red, str, obj);
    },
  };
}