Angular Logging simplificado com ngx-logger — onthecode (2023)

no meu anteriorpublicar, falei sobre capturar todos os erros no Angular com um manipulador de erros global. Se você deseja manter os erros capturados, precisa implementar um mecanismo de log confiável. Hoje, quero explicar como habilitar o registro Angular em seus aplicativos comregistrador ngxpacote.

Importância do registro

Como desenvolvedor, você é responsável por cada linha de código que escreve. Se um bug surgir no aplicativo, você precisará identificar o problema e fornecer uma correção para ele.

Sem dúvida, isso é mais fácil falar do que fazer em um projeto do mundo real. Na maioria dos casos, pode levar horas (se não dias) para reproduzir o problema antes mesmo de corrigi-lo.

Quando implementado corretamente, o log pode salvar seu tempo tão* grande. O registro não apenas economizará horas de depuração a longo prazo, mas também lhe dará confiança sobre suas soluções.

Login básico em JavaScript

Login de baunilhaJavaScripté bem simples - basta usar oconsoleobjeto como mostrado abaixo.

console.registro('log de informações');console.avisar('registro de aviso');
Idioma do código: JavaScript (javascript)

Embora muito simples, o log do console pode limitar o que você pode fazer com seus logs. Pense nisso, você adicionará declarações de log em todo o projeto.

E se…

• você deseja desabilitar o registro temporariamente
• habilitar log apenas na produção
• ignorar certos níveis de log
• enviar logs para o servidor

É possível implementar esses requisitos manualmente. Você pode fornecê-lo como um serviço em seu aplicativo Angular.

No entanto, questões de infraestrutura, como registro, são essenciais em qualquer aplicativo e você não deve realmente gastar seu tempo criando e mantendo esses recursos. A menos que haja políticas rígidas da empresa, você deve usar bibliotecas em vez de reinventar a roda.

Introdução ao ngx-logger

ngx-loggeré uma biblioteca de registro muito simples para aplicativos Angular.

Ele oferece os seguintes recursos:

• Impressão bonita para o console
• Ativar registro com base no nível especificado
• Controle o nível de log com base no ambiente atual
• Envie mensagens de log para o servidor via HTTP para registro centralizado
• Indica a localização do log e o número da linha

Começar a usar o ngx-logger é fácil, bastacriar um novo aplicativo Angulare puxe o pacote do npm:

npm instalar ngx-logger
Idioma do código: bash (bash)

Importe a biblioteca no módulo raiz, ou seja,app.module.ts:

importar{ LoggerModule, NgxLoggerLevel }de 'ngx-logger';
Idioma do código: TypeScript (texto datilografado)

Finalmente, importeLoggerModule.forRootem seu módulo de aplicativo. Aqui é onde podemos configurar o logger:

@NgModule({ imports: [ BrowserModule, HttpClientModule, LoggerModule.forRoot({ serverLoggingUrl:'http://localhost:68552/',// Substitua por SUA APInível: NgxLoggerLevel.TRACE, serverLogLevel: NgxLoggerLevel.ERROR, disableConsoleLogging:falso}) ], declarações: [AppComponent], bootstrap: [AppComponent]})exportar aulaAppModule { }
Idioma do código: TypeScript (texto datilografado)

Com a configuração acima em vigor, podemos iniciar o log em qualquer lugar do aplicativo.

exportar aulaComponente de aplicativo {construtor(privadoregistrador: NGXLogger) {esse.logger.debug("Mensagem de depuração");esse.logger.info("Mensagem de informação");esse.logger.log("Mensagem de registro padrão");esse.logger.warn("Mensagem de aviso");esse.logger.error("Mensagem de erro"); }}
Idioma do código: TypeScript (texto datilografado)

Aqui estamos injetando o NGXLogger como dependência na classe do componente, nos dando acesso aoNGXLoggerinstância.

Ao executar o aplicativo, você verá as mensagens de log no console do navegador.

Você notará que há erros relacionados ao log do lado do servidor. Isso porque dissemosngxloggerpara enviar erros para o servidor em/api/logsponto final. Como esse URL não existe, recebemos uma mensagem de erro.

Configuração de registro angular

Vamos dar uma olhada no objeto de configuração:

LoggerModule.forRoot({ serverLoggingUrl:'http://localhost:68552/',// Substitua por SUA API,nível: NgxLoggerLevel.TRACE, serverLogLevel: NgxLoggerLevel.ERROR, disableConsoleLogging:falso})
Idioma do código: TypeScript (texto datilografado)

níveldefine o nível mínimo de log no navegador. Os níveis disponíveis são: TRACE, DEBUG, INFO, LOG, WARN, ERROR, FATAL e OFF. Esses valores vêmNgxLoggerLevelaula.

serverLoggingUrlé onde você fornece o caminho completo para o ponto final da API para fazer logon no servidor. Isso é opcional, se você não precisa que os logs sejam enviados para o servidor, exclua esta linha.

serverLogLeveldefine o nível mínimo de log para log do lado do servidor.

disableConsoleLoggingé um sinalizador que ajuda você a desligar completamente o log do console.

Logging específico do ambiente em Angular

Um requisito comum em um aplicativo do mundo real é o registro específico do ambiente. Isso significa simplesmente que você deseja configurar o log de maneira diferente, dependendo do ambiente em que o aplicativo está sendo executado.

Por exemplo, você pode querer registrar erros apenas no ambiente de produção, mantendo todos os níveis de log ativados no ambiente de desenvolvimento.

Para fazer isso, precisamos usar variáveis ​​de ambiente do nosso aplicativo Angular.

vamos importarambienteobjeto emapp.component.ts, que nos permite inicializar a configuração de log com detalhes específicos do ambiente.

importar{ ambiente }de 'origem/ambientes/ambiente';@NgModule({ imports: [ BrowserModule, HttpClientModule, LoggerModule.forRoot({ serverLoggingUrl:`${environment.apiUrl}API/logs`, level:environment.logLevel, serverLogLevel: environment.serverLogLevel, disableConsoleLogging:falso}) ], declarações: [AppComponent], bootstrap: [AppComponent]})exportar aulaAppModule { }
Idioma do código: TypeScript (texto datilografado)

Existem dois ambientes em um aplicativo Angular gerado por cli:desenvolvimentoeProdução. Esses ambientes são definidos noAngular.jsonarquivo e localizado emorigempasta do projeto.

A ideia é que a mesma variável exista em cada arquivo de ambiente, fornecendo diferentes valores correspondentes ao ambiente.

Vamos atualizar o ambiente de desenvolvimento:

importar{NgxLoggerLevel}de 'ngx-logger';exportar constambiente = { produção:falso, apiUrl:'http://localhost:68552/',// Substitua pela API locallogLevel: NgxLoggerLevel.WARN, serverLogLevel: NgxLoggerLevel.OFF};
Idioma do código: TypeScript (texto datilografado)

Ao executar o aplicativo comde servir, a configuração do ambiente de desenvolvimento será usada: somente os logs de aviso e acima serão registrados no navegador. O log do lado do servidor está desativado, pois queremos apenas ver os erros no console durante o desenvolvimento.

Vamos também atualizar o ambiente de produção (environment.prod.ts):

importar{NgxLoggerLevel}de 'ngx-logger';exportar constambiente = { produção:verdadeiro, apiUrl:'http://api.myservice.com/api/',// Substitua pela API remotalogLevel: NgxLoggerLevel.OFF, serverLogLevel: NgxLoggerLevel.ERROR};
Idioma do código: TypeScript (texto datilografado)

Nossa configuração de produção afirma que não haverá registro de navegador e apenas erros serão registrados no servidor no URL da API especificado.

Você pode testar isso iniciando seu aplicativo no modo de produção viang serve --configuration=produção.

Registrando no servidor

O login no Angular acontece dentro do navegador de cada usuário, que não podemos acessar. O envio de logs para o servidor nos permite armazená-los em algum lugar seguro, como arquivos de log ou até mesmo um banco de dados.

Acho que esse é o recurso mais útil dongx-logger.

Para que esse recurso funcione, você precisa de uma API que exponha umPUBLICARendpoint para aceitar um objeto de log.

ngx-loggerPUBLICARs um objeto para cada mensagem de log do endpoint da API.

Por exemplo:

{"nível":5,"adicional": [],"mensagem":"Erro","carimbo de data/hora":2020-02-02T11:42:40.153Z,"nome do arquivo":"principal.js","número da linha":87,"colunaNúmero":26}
Idioma do código: JSON / JSON com comentários (json)

Certifique-se de importarHttpClientModulee definir oserverLoggingUrlcorretamente.

Sua implementação de API irá variar dependendo da pilha do servidor. Aqui está um exemplo de endpoint paraAPI da Web do .NET Core:

[HttpPost]públicoIActionResultPublicar([FromBody] LogDto dto){eramsg =$"MENSAGEM:{dto.Mensagem}- "+$"ARQUIVO:{dto.FileName}- "+$"NÍVEL:{dto.Level}- "+$"NÚMERO DE LINHA:{dto.LineNumber}- "+$"TIMEMP:{dto.Timestamp:F}"+$"USUÁRIO:{User.Identity.Name}"; _logger.LogError(msg);retornarOK();}
Idioma do código: C # (cs)

E aí está! Você pode conferir o código emGitHub.

Eu gostaria de saber como você realiza o login em seus aplicativos, deixe-me saber nos comentários.