【Angular】開発時とリリース時のconsole.log制御

1 これでいいのか
- 1.1 実行
2 【蛇足】何故そうしたのか
- 2.1 他のパッケージを使わなかった理由

これでいいのか

前提条件として開発時はenvironment.ts、リリース時はenvironment.prod.tsを使用する

service化などはせずに、よく使用するcommon.tsみたいな共通関数群を作成して、下のソースをコピペ。

/**
 * デバッグ用のconsole.
 *
 * 開発環境のみconsole機能を提供する。prod環境ではconsoleは動かさない
 *
 * @export
 * @returns console|cnsoleのMock
 */
export function Debug() {
  if (isDevMode()) {
    return console;
  } else {
    return new MockConsole();
  }
}

/**
 * consoleのモック
 * @class MockConsole
 */
class MockConsole {
  log(...v: any[]): void { }
  info(...v: any[]): void { }
  warn(...v: any[]): void { }
  error(...v: any[]): void { }
  debug(...v: any[]): void { }
  group(...v: any[]): void { }
  groupEnd(...v: any[]): void { }
  table(...v: any[]): void { }
  dir(...v: any[]): void { }
  time(...v: any[]): void { }
  timeEnd(...v: any[]): void { }
  assert(...v: any[]): void { }
  trace(...v: any[]): void { }
}

/**

* デバッグ用のconsole.

* 開発環境のみconsole機能を提供する。prod環境ではconsoleは動かさない

* @export

* @returns console|cnsoleのMock

export function Debug() {

if (isDevMode()) {

return console;

} else {

return new MockConsole();

}

/**

* consoleのモック

* @class MockConsole

class MockConsole {

log(...v: any[]): void { }

info(...v: any[]): void { }

warn(...v: any[]): void { }

error(...v: any[]): void { }

debug(...v: any[]): void { }

group(...v: any[]): void { }

groupEnd(...v: any[]): void { }

table(...v: any[]): void { }

dir(...v: any[]): void { }

time(...v: any[]): void { }

timeEnd(...v: any[]): void { }

assert(...v: any[]): void { }

trace(...v: any[]): void { }

}

実行

console.logではなく、Debug().logと記載する。これで開発時はconsoleが使われ、リリース時は何も動作しなくなる。

Debug().log("hogehoge");

1	Debug().log("hogehoge");

【蛇足】何故そうしたのか

正統方なやり方はisDevModeで分岐させることだろう

if (isDevMode()) {
  console.log("hogehoge");
}

if (isDevMode()) {

console.log("hogehoge");

}

面倒クセと思った。また、if分の書き忘れでリリース時に出なくて良いconsoleが出てしまう可能性がある。関数化してしまえばconsole関数は１箇所にしか使われないためgrepなどで簡単に調べる事ができる。

chromeブラウザではconsole.logを発行した場合、オリジナルのtsファイルの行数を表示され、クリックすることによりジャンプすることができる。service化なども試みたが、service.tsに記載されているconsole.logの行が表示されてしまい、どこのconsole.logかが判断出来ない状態になる。traceなどのコマンドで呼び出し元、行番号は取得できたが、それはtsから生成されたjsファイルが指定される。

他のパッケージを使わなかった理由

Angularはクライアントサイドで動くためリリース時にはログ収集したい場合はサーバーに送るしかない。そのことを踏まえて、リリース時のconsole関数は無意味と考えた。VS Codeでデバックは簡単に行えるため、consoleの使い道はあくまでObjectデータやtraceの確認にすぎない。SSRの場合はlogを収集することによってどの機能がよく使われているか、エラー内容など知ることができる。Angularでも知りたいのならばサーバーにログ(データ)送信プログラムを追加するしかないだろう。