Angular2 Регистрация

Я собираюсь ввести регистрацию в приложение angular2 и хочу проверить любые хорошие библиотеки или подходы, которые вы могли бы порекомендовать на этом.

Требования для ведения журнала:

  • Будут ли параметры настраивать ведение журнала, как информация, предупреждение, ошибка, отладка и подробный.
  • Будет возможность вести журналы в локальном хранилище, а затем через определенный интервал синхронизировать журналы с конечной точкой сервера
  • сможет поддерживать формат Json и управлять форматом журнала

Требование ниже было бы неплохо иметь, и любой опыт работы с веб-работником, которым вы можете поделиться, будет оценен.

  • Было бы хорошо, если бы функция ведения журнала была создана как веб-работник так далеко от потока браузера, и мы могли бы использовать кеш приложений в качестве временного хранилища?

Любые советы по этому поводу будут высоко оценены.

Ответ 1

Я думаю, JSNLog частично соответствует вашим требованиям (я автор JSNLog).

JSNLog состоит из клиентской библиотеки jsnlog.js и компонента на стороне сервера. Библиотека клиентской стороны отправляет элементы журнала на компонент на стороне сервера в запросах AJAX. После того, как на сервере, элементы журнала хранятся в журнале на стороне сервера. Версия .Net 4.x использует Common.Logging для поддержки журналов Log4Net, NLog, Elmah и Serilog. Версия .Net Core поддерживает базовую структуру ведения журнала.

Сопоставление функций JSNLog с вашими требованиями:

Будут ли параметры настраивать ведение журнала, как информация, предупреждение, ошибка, отладка и многословным.

JSNLog поддерживает уровни жесткости Log4Net: Trace, Debug, Info, Warn,  Ошибка, смертельный. Кроме того, вы можете использовать числовые уровни серьезности,  предоставляя вам столько уровней серьезности, сколько захотите.

Будет возможность вести журналы в локальном хранилище, а затем после определенного интервал синхронизирует журналы с конечной точкой сервера

JSNLog позволяет вам загружать настраиваемое количество элементов журнала в каждое сообщение на сервер. Он также поддерживает установку максимального времени, в течение которого любое сообщение находится в буфере перед отправкой.

Кроме того, JSNLog позволяет хранить элементы журнала с низкой степенью серьезности в клиентской памяти и отправлять их только на сервер при отправке элемента журнала высокой степени тяжести. Например, вы можете регистрировать события Trace в случае возникновения исключения и отправлять их только на сервер, когда происходит исключение, и регистрирует событие Fatal.

Будет поддерживать формат Json и управлять журналом Формат

JSNLog позволяет вам регистрировать объекты JSON. Если вы используете Serilog на сервере, вы можете хранить эти объекты как объекты, а не строки. Кроме того, вы можете установить обработчик событий на jsnlog.js, который позволяет вам изменять элемент исходящего журнала.

Было бы неплохо создать функцию ведения журнала в качестве веб-работника...

JSNLog не является веб-рабочим.

Ответ 2

angular2 -logger Простейший модуль Logger, основанный на Log4j, для Angular 2.

1) Установите модуль npm.

npm install --save angular2 -logger

2) Добавьте в приложение библиотеку angular2 -logger. Если вы следуете руководству Angular 2 Quickstart Guide, это должно быть примерно так:

В 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) Настройте поставщика. В 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) Внесите регистратор в свои объекты и используйте его.

@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...');
    }
 }

Чтобы просмотреть все сообщения, которые вам нужны для изменения уровня иерархии сообщений журнала, вы можете сделать это:

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

Или используя один из предопределенных поставщиков конфигурации:

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

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

Доступными поставщиками являются:

  ERROR_LOGGER_PROVIDERS
  WARN_LOGGER_PROVIDERS
  INFO_LOGGER_PROVIDERS
  DEBUG_LOGGER_PROVIDERS
  LOG_LOGGER_PROVIDERS
  OFF_LOGGER_PROVIDERS

Ответ 3

Вы можете использовать ngx-logger

NGX Logger - это простой модуль регистрации для angular (в настоящее время поддерживает angular 4.3+). Это позволяет "довольно печатать" на консоли, а также разрешать отправку журнальных сообщений по URL-адресу для ведения журнала на стороне сервера.

Установка

npm install --save ngx-logger

После установки вам нужно импортировать наш основной модуль:

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 {
}

Использование

Чтобы использовать Logger, вам нужно будет импортировать его локально, а затем вызвать одну из функций ведения журнала

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 - URL-адрес журналов POST level: приложение будет регистрировать сообщение только для этого уровня или выше (OFF отключает регистратор для клиента) enableDarkTheme: устанавливает цвет по умолчанию на белый вместо черного TRACE | DEBUG | INFO | Вход | WARN | ERROR | OFF Ведение журнала на стороне сервера

Если serverLogginUrl существует, NGX Logger попытается выполнить POST, чтобы журнал был на сервере.

Пример полезной нагрузки {уровень: "DEBUG", сообщение: "Ваше сообщение журнала идет здесь" }

Вы также можете прочитать документацию для этого. https://www.npmjs.com/package/ngx-logger