これでいいのか
前提条件として開発時はenvironment.ts、リリース時はenvironment.prod.tsを使用する
service化などはせずに、よく使用するcommon.tsみたいな共通関数群を作成して、下のソースをコピペ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/** * デバッグ用の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が使われ、リリース時は何も動作しなくなる。
1 |
Debug().log("hogehoge"); |
【蛇足】何故そうしたのか
正統方なやり方はisDevModeで分岐させることだろう
1 2 3 |
if (isDevMode()) { console.log("hogehoge"); } |
面倒クセと思った。また、if分の書き忘れでリリース時に出なくて良いconsoleが出てしまう可能性がある。関数化してしまえばconsole関数は1箇所にしか使われないため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でも知りたいのならばサーバーにログ(データ)送信プログラムを追加するしかないだろう。