ブラウザでのログイン

すべてのノード.JSアプリケーションはプログラム進行を伝えるためにいくつかのレベルのログを使用します.しかし、フロントエンドコードのログはほとんど見られません.これは主にです.

フロントエンド開発者はすでにUIを介して多くのフィードバックを得る.

consoleのオブジェクトは、クロスブラウザの互換性の悪い歴史を持っています(例えば、IEEE 8コンソールオブジェクトはdevtoolsパネルが開いているときにのみ利用できました.

したがって、フロントエンド開発者が我々の反応プロジェクトでエラーを記録する方法を私に尋ねたとき、それは驚きませんでした:

Should logs be freely used everywhere and leave it up to the bundler to handle removal of those? To reduce the size footprint perhaps? I read that some older browsers do not have console defined. So it’s advisable to remove them or handle its presence.

ロガーを書く

最初に知っておくべきことは、console.logを直接使用しないことです.console.logを使用して前処理と集約ログからあなたを制限するコンソールの標準の欠如(living draftがあります)、すなわち、ログはすべてconsole.logにまっすぐになります.
ログを取得し、ログがブラウザのdevtoolsにあるのでログを取得するときにログを取得する場合は、ブラウザによって提供されるツールセットに制限されます.また、パフォーマンスコストでログを記録します.つまり、コンベンションとコントロールログを確立できる抽象化が必要です.この抽象化は以下のように簡単です.

const MyLogger = (...args) => {
  console.log(...args);
};

あなたが通過し、アプリケーション内のMyLogger機能を使用します.

ログを取得する

この抽象性を持つことによって、既にどのような/時にログを取得するかを制御することができます.たとえば、すべてのログメッセージに名前空間とログの重大度を記述する必要があります.

type LogLevelType =
  'debug' |
  'error' |
  'info' |
  'log' |
  'trace' |
  'warn';

const MyLogger = (namespace: string, logLevel: LogLevelType, ...args) => {
  console[logLevel](namespace + ':', ...args);
};

我々のアプリケーションは、多くのモジュールを使用して構築されます.私は、どのモジュールがログを生産しているかを識別するために名前空間を使用します.また、異なるドメインログ(例えば「認証」、「GraphSQL」、「ルーティング」)を切り離すために.一方、ログレベルでは、devtoolsのログの可視性を切り替えることができます.

JavaScript関数を用いたログのフィルタリング

デフォルトですべてのログを無効にして、特定のグローバル関数が存在する場合にのみ、それらを印刷することもできます.

type LogLevelType =
  'debug' |
  'error' |
  'info' |
  'log' |
  'trace' |
  'warn';

const Logger = (logLevel: LogLevelType, ...args) => {
  if (globalThis.myLoggerWriteLog) {
    globalThis.myLoggerWriteLog(logLevel, ...args);
  }
};

このパターンの利点は、デフォルトでコンソールに書き込まれたものではありません(パフォーマンスコストはありません.不要なノイズはありません).しかし、実行時にログを記録/印刷するためのカスタムロジックを注入することができます.つまり、最小化された生産サイトにアクセスすることができます.

globalThis.myLoggerWriteLog = (logLevel, ...args) => {
  console[logLevel](...args);
};

総括する

これらの3つの機能が実装されている(ログの名前空間、ログレベルと機能的なフィルタリングを強制する)場合は、すでに良いスタートアップしています.

Logステートメントは、バンドルサイズに影響を与えることはありません.

コンソールオブジェクトがこの日に標準化されていないことは事実です.しかし、すべての現在のJavaScript環境は、コンソールを実装します.ログ.コンソール.ログのすべてのブラウザのログに十分です.

私たちは重要なアプリケーション状態変化(例えばAPIエラー)を記述するすべてのイベントを記録しなければなりません.

ログボリュームは無関係です.

ログは名前空間でなければならず、指定された重大度レベル(例えばトレース、デバッグ、情報、警告、エラー、致命的)を持ちます.

ログはシリアル化しなければなりません.

ログは、生産で利用可能でなければなりません.

私は、ログボリュームが無関係であると言いました(アスタリスクで).どのくらいのログを実際には無関係です(モック関数を呼び出すと、測定可能なコストを持っていない).しかし、どれだけ印刷され、格納されて非常に実際のパフォーマンスコストと処理/ストレージコストがあります.これはフロントエンドとバックエンドプログラムの場合はtrueです.このような抽象化を行うことで、ログの関連するサブセットを選択的にフィルター処理、バッファリング、および記録できます.
一日の終わりには、あなたのロガーを実装し、いくつかの抽象化はconsole.logを直接使用するよりも良いでしょう.私のアドバイスはロガーインタフェースを何かを利用できるように制限することです:小さなインターフェースはAPIの一貫した使用を意味して、よりスマートな変換を可能にします、例えば、すべての私のloggers(Roarrを使用して実行される)はログレベル、一つのテキストメッセージとすべての支持変数を記述している単一の、直列化可能なオブジェクトを必要とします.