Angular2 Logging

Question

私はangular2アプリへのロギングを紹介したいと思っており、これについてお勧めできる良いライブラリやアプローチをチェックしたいと思っています。ロギング用

要件は以下のとおりです。

• オプションは情報、警告、エラー、デバッグおよび冗長のようにログを設定する必要があります。
• は、ローカルストレージにログを保存することができるだろうし、その後一定間隔の同期後に、サーバーのエンドポイント
• にログが

要件をJSON形式をサポートし、ログ形式を制御することができるようになりますあなたが共有することができるWebワーカーとの作業についての経験があれば幸いです。

• ブラウザスレッドから遠く離れてウェブワーカーとしてログ機能を構築するとよいでしょう。一時的なストレージとしてアプリキャッシュを使用する可能性がありますか？

これに関するアドバイスは非常に高く評価されます。

Answer 1

私はJSNLogがあなたの要件に部分的に合っていると思います（私はJSNLogの著者です）。

JSNLogは、クライアント側ライブラリjsnlog.jsとサーバー側コンポーネントで構成されています。クライアントサイドライブラリは、AJAX要求でサーバー側コンポーネントにログ項目を送信します。サーバーにログオンすると、ログ項目はサーバー側のログに保存されます。 .Net 4.xバージョンはLog4Net、NLog、ElmahおよびSerilogログをサポートするためにCommon.Loggingを使用します。 .Net Coreバージョンはコアロギングフレームワークをサポートしています。 JSNLogマッチング

は、要件を備えています：

オプションは情報、警告、エラー、デバッグおよび 冗長のようにログインする設定があります。

JSNLogはLog4Netの重大度をサポートしています：Trace、Debug、Info、Warn、 Error、Fatal。また、重大度レベルの数値は で、必要な数の重大度を指定できます。

は、ローカルストレージにして、特定の 間隔の同期後にログを保存することができるだろう

JSNLogは、各メッセージにバッチにログ項目の設定可能な数をことができますサーバーのエンドポイントへのログサーバーに送信します。また、送信前にバッファ内にメッセージが格納される最大時間を設定することもできます。

さらに、JSNLogを使用すると、重要度の低いログ項目をクライアント側のメモリに格納し、重大度の高いログ項目を送信した場合にのみサーバーに送信することができます。たとえば、例外が発生した場合にTraceイベントをログに記録し、例外が発生したときにサーバーに送信し、致命的イベントを記録することができます。

はJSON形式をサポートすることができ、ログを管理しているのでしょう 形式

JSNLogあなたはJSONオブジェクトをログに記録することができます。サーバーでSerilogを使用する場合は、これらのオブジェクトを文字列ではなくオブジェクトとして格納できます。また、jsnlog.jsで送信ログ項目を変更できるイベントハンドラを設定することもできます。

は、Webワーカーとしてのロギング機能のビルドを持っていいだろう...

JSNLogは、Webワーカーではありません。

Answer 2

angular2ロガー 角度2.

1ための簡単のLog4j触発ロガーモジュール）NPMモジュールを取り付けます。あなたのアプリにangular2・ロガーライブラリを追加します--save angular2-ロガー

2）

NPMをインストールします。

systemjs.config.jsで：

// map tells the System loader where to look for things 
var map = { 
    'app':      'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs', 
    'angular2-logger':   'node_modules/angular2-logger' // ADD THIS 
}; 

//packages tells the System loader how to load when no filename and/or no extension 
var packages = { 
    'app':      { main: 'main.ts', defaultExtension: 'ts' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { defaultExtension: 'js' }, 
    'angular2-logger':   { defaultExtension: 'js' }, // AND THIS 
}; 

3）セットアッププロバイダーあなたは角度2のクイックスタートガイドに従っている場合には、このようなものでなければなりません。 app.module.tsで ：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Logger } from "angular2-logger/core"; // ADD THIS 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ], 
    providers: [ Logger ] // AND THIS 
}) 
export class AppModule { } 

4）あなたのオブジェクトにロガーを注入し、それを使用しています。

logger.level = logger.Level.LOG; // same as: logger.level = 5; 

または定義済みのコンフィギュレーション・プロバイダのいずれかを使用して：あなたはちょうどあなたがそうすることができ、ロガーのメッセージの階層レベルを変更する必要があるすべてのメッセージを見るために

@Component({ 
    ... 
}) 
export class AppComponent(){ 
    constructor(private _logger: Logger){ 
     this._logger.error('This is a priority level 1 error message...'); 
     this._logger.warn('This is a priority level 2 warning message...'); 
     this._logger.info('This is a priority level 3 warning message...'); 
     this._logger.debug('This is a priority level 4 debug message...'); 
     this._logger.log('This is a priority level 5 log message...'); 
    } 
} 

import {LOG_LOGGER_PROVIDERS} from "angular2-logger/core"; 

    @NgModule({ 
     ... 
     providers: [ LOG_LOGGER_PROVIDERS ] 
    }) 
    export class AppModule { } 

利用できるプロバイダは、以下のとおりです。

01あなたがNGX-ロガー

NGX Loggerを使用することができます

Answer 3

は、（現在の角度4.3以降をサポートしています）、角度のためのシンプルなロギングモジュールです。これは、コンソールに「きれいに印刷」することができ、ログメッセージをサーバー側のログ用のURLにPOSTできるようにします。一度インストール

インストール

NPM --save NGX-ロガーをインストール

あなたは私たちのメインモジュールをインポートする必要があります。

import { LoggerModule, NgxLoggerLevel } from 'ngx-logger'; 

唯一の残りの部分はにありますインポートされたモジュールをアプリケーションモジュールにリストし、設定を渡してロガーを初期化します。

@NgModule({ 
    declarations: [AppComponent, ...], 
    imports: [LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}), ...], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

使用

ロガーを使用するには、あなたはそれがローカルで、その後、ログ機能のいずれかを呼び出して、インポートが必要になります

import { Component } from '@angular/core'; 
import { NGXLogger } from 'ngx-logger'; 

@Component({ 
    selector: 'your-component', 
    templateUrl: './your.component.html', 
    styleUrls: ['your.component.less'], 
    providers: [NGXLogger] 
}) 
export class YourComponent { 
    constructor(private logger: NGXLogger) { 
     this.logger.debug('Your log message goes here'); 
     this.logger.debug('Multiple', 'Argument', 'support'); 
    }; 
} 

コンフィグオプションserverLogLevelが

- のみにログを送信します指定されたレベル以上のサーバー（OFFはサーバーのロガーを無効にします） serverLoggingUrl - POSTログへのURL レベル：アプリケーションはそのレベル以上のメッセージのみをログに記録します（OFFはクライアントのロガーを無効にします） enableDarkTheme：デフォルトカラーを黒ではなく白に設定します TRACE | DEBUG | INFO | LOG | WARN | ERROR | OFF サーバーサイドログ

serverLogginUrlが存在する場合、NGX Loggerはサーバーにログを記録するPOSTを試みます。

ペイロードの例{レベル：「DEBUG」、メッセージ：「あなたのログメッセージをここに」}

あなたが同じため、同様の文書を読むことができます。 https://www.npmjs.com/package/ngx-logger