🏭

ログが少しだけ見やすくなるuseLoggerを作った

2022/05/31に公開

JavaScript

きっかけ

とあるインターン先でログを収集するコードを見て，　開発環境時にもっとデバッグがしやすくなったら良いなと思ってログをブラウザのコンソールにいい感じに表示するものを作りました〜

ソースコード

useLogger.ts

import path from 'path'

const colors = {
    black: '\u001b[30m',
    red: '\u001b[31m',
    green: '\u001b[32m',
    yellow: '\u001b[33m',
    blue: '\u001b[34m',
    magenta: '\u001b[35m',
    cyan: '\u001b[36m',
    white: '\u001b[37m',
}

const exactPath = () => {
    const callerPath =
        new Error().stack
            ?.split('at ')[3]
            .replaceAll('(', '')
            .replaceAll(')', '')
            .replaceAll('\n', '')
            .split(' ')[1] ?? ''
    const callerDir = path.dirname(callerPath)
    const caller = path.basename(callerPath)
    const exactPath = path.join(callerDir, caller).split(':')[1]
    return exactPath
}

/**
 *
 * @param log ログで表示する変数
 */
const consoleLog = (log: string | object) => {
    console.log(`[${exactPath()}]:`, log)
}

/**
 *
 * @param log サクセスログで表示する変数
 */
const consoleSuccess = (log: string | object) => {
    if (typeof log === 'string') console.log(`[${exactPath()}]: ${colors.green}${log}`)
    if (typeof log === 'object') console.log(`[${exactPath()}]:`, log)
}

/**
 *
 * @param error サクセスログで表示する変数
 */
const consoleError = (error: string | object) => {
    if (typeof error === 'string') console.log(`[${exactPath()}]: ${colors.red}${error}`)
    if (typeof error === 'object') console.log(`[${exactPath()}]:`, error)
}

export const useLogger = () => {
    return { consoleLog, consoleSuccess, consoleError }
}

説明

colors

ここではログとして表示するときの文字の色を設定できるようになっています．
自分の好きな色を設定することができます．

exactPath

exactPath内でどこでエラーが発生したのかを取得します．
ここでは/src/components/.../Sample.tsxみたいな文字列が返ってきます．
多少強引に取得していますので，もっと改良できたり他の方法もあるかと思います．
ぜひコメントで教えていただけると嬉しいです．

consoleLog

ここではexactPathで取得したパスを表示しています．

consoleSuccess, consoleError

ここでは成功したときっぽいログや失敗した時のようなログを色付きで表示しています．
ただ，オブジェクトが来た場合には色をつけられずにそのまま表示してしまっています．

使い方

実際の使い方はこんな感じです

Sample.tsx

import { useLogger } from 'somewhere'

export const Sample = () => {
  const { consoleLog, consoleSuccess, consoleError } = useLogger()
  
  consoleLog('ただのログです')
  consoleSuccess('成功のログです')
  consoleSuccess({ key: 'value' })
  consoleError('エラーログです')
  consoleError(new Error('簡易的なエラーです'))
    
  return (
    <SomeComponent />
  )
}

ログ

実際のログはこんな感じになります．
色がついていてかつ，どこから呼び出されたのかがわかるのでとても便利です！