アレについて記す

Angularで利用する簡易Loggerを用意する

Posted on February 15, 2020 at 15:50 (JST)

下記を満たす実装を思いついたのでメモとして残す。

  • インスタンス化不要(フィールドへの定義不要)
  • chromeの開発者ツールで出力箇所を表示可能

動作環境

OS: macOS Mojave ver. 10.14.6
Node: v12.14.0
@angular/cli: 9.0.0
TypeScript: 3.7.5

コード

[logger.ts]

import {environment} from '../../environments/environment';
import {LogLevel} from './log-level';

export class Logger {

  static readonly trace = Logger.printFn(LogLevel.Trace);
  static readonly debug = Logger.printFn(LogLevel.Debug);
  static readonly info = Logger.printFn(LogLevel.Info);
  static readonly warning = Logger.printFn(LogLevel.Warning);
  static readonly error = console.error;

  static printFn(logLevel: LogLevel) {
    return (logLevel < environment.logLevel)
      ? Logger.doNothingFn
      : console.log;
  }

  static doNothingFn(message?: any, ...optionalParams: any[]) {
  }
}

[log-level.ts]

export enum LogLevel {
  Trace = 0,
  Debug = 1,
  Info = 2,
  Warning = 3,
  Error = 4
}

[environment.ts]

import {LogLevel} from '../app/features/log-level';

export const environment = {
  production: true,
  logLevel: LogLevel.Info,
  ...
}

解説

Angularでは環境別に変更したい設定をenvironment.tsenvironment.prod.tsに記載し、cliのオプションによってどのファイルの設定を使用するか指定できる。
つまり、import {environment} from '../../environments/environment';environmentは指定した環境向けの内容となる。

DIなどで環境設定内容を取得する必要がなく、staticメソッド内で利用できるのが嬉しいポイント。

[利用例]

import {Logger} from '../../features/logger';

class Hoge {
  doSomething() {
    Logger.trace('trace msg');
    Logger.info('info msg');
    Logger.error('error msg');
  }
}

Logger.traceLogger.infoは指定したレベル以上の重要度の場合はconsole.log関数となるため、Chromeのconsoleなどに表示される出力場所はconsole.logを直接使った場合と同じになる。


なぜ今まで思いつかなかったのか、こんな単純なことに。。。
loggerの呼び出し元情報の取得方法等、無駄な時間を費したことが悔しい。。

この記事の読者が 非標準のFunction.callerや既に使われていないarguments.callee、stack traceを発生させて…といった無駄な時間を回避できれば幸いである。

以上。


参考URL