web-dev-qa-db-fra.com

Comment enregistrer toutes les erreurs de console possibles survenues dans Angular Application sur le côté du client?

Actuellement, mon Angular est constitué d'un nombre important de sous-modules et de composants. Angular applications sont assez sensibles aux erreurs de rendu HTML. Par exemple, si nous obtenons un NULL objet d'une API et essayant d'avoir accès à sa propriété, il rompt partiellement le rendu de l'application.

Il est assez difficile de gérer et de tester de tels cas en tenant compte de la croissance constante. Savez-vous s'il est possible de créer un script pouvant enregistrer toutes les erreurs apparaissant dans une console?

Ici ce que j'ai obtenu:

1) ne poignée d'erreur de demande HTTP Pour enregistrer les demandes cassées d'une API:

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

2) enregistreur côté client Mais pour une raison quelconque, il ne fait que connecter des erreurs à partir de crawlers :)

<script>
  window.onerror = function(m,u,l,c) {
    if (window.XMLHttpRequest) {
      var xhr = new XMLHttpRequest();
      var data = "msg="+encodeURIComponent(m)
        +"&url="+encodeURIComponent(u)
        +"&line="+l
        +"&col="+c
        +"&href="+encodeURIComponent(window.location.href);
      xhr.open("GET", "logger.php?"+data, true);
      xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
      xhr.send();
    }
  };
</script>

Il serait très utile d'obtenir un script pouvant simplement enregistrer toutes les erreurs de la console et

javascriptangulartypescriptloggingerror-handling
6
Denis Evseev

Lorsque j'ai commencé à travailler avec angulaire, j'ai trouvé cet article utile: Angular: Ajout de la journalisation Angular Applications .

Si vous suivez la guidage, vous vous retrouvez avec un loggingService que vous pouvez configurer pour enregistrer des erreurs sur l'un des trois (ou tous) emplacements:

  • La console
  • Stockage local
  • Une base de données (via POST)

Ce que l'article laisse, c'est comment attraper les erreurs automatiquement. Vous pouvez le faire avec un httpterceptor . Voici un exemple d'une application que je travaille sur:

http-demande-interceptor.ts 

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpRequest, HttpErrorResponse, HttpInterceptor } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';

import { LogService } from '../services/log.service';

@Injectable()
export class HttpRequestInterceptor implements HttpInterceptor {
  constructor (private logService: LogService, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const newReq = req.clone({
      headers: req.headers.set('Content-Type', 'application/json'),
      withCredentials: true
    });
    return next.handle(newReq)
      .pipe(
        retry(1),
        catchError((error: HttpErrorResponse) => {
          let displayError = '';
          let serverError = '';
          let clientError = '';

          if (error.error instanceof ErrorEvent) {
            // client-side error
            clientError = `Error: ${error.error.message}`;
            this.logService.error(clientError);
          } else {
            // server-side error
            displayError = error.error;
            serverError = `Error Code: ${error.status}\n${error.message}\n${error.error}`;

            if (error.status === 401) {
              this.logService.error(serverError);
              this.router.navigate(['/unauthorized', { message: error.error}]);
            }

            if (error.status >= 500) {
              this.logService.error(serverError);
              this.router.navigate(['/error']);
            }
          }
          return throwError(displayError);
        })
     );
  }
}

Httpintercepteurs sont très puissants. Celui-ci fait ce qui suit:

  1. Ajoute un type de contenu à l'en-tête de chaque demande, le réglant à l'application/JSON
  2. Envoie chaque demande avec des informations d'identification
  3. Réessaie chaque demande une seconde fois avant la manipulation des erreurs
  4. Gère des erreurs [.____]
    • Lorsque l'utilisateur est non autorisé, il redirige vers une page d'erreur 401 personnalisée.
    • Lorsque le serveur jette une erreur (500+), il redirige vers une page d'erreur de serveur personnalisée.
    • Dans tous les cas, il enregistre l'erreur en utilisant le service de journalisation mentionné ci-dessus.
    • Il jette également l'erreur à l'appelant, de sorte que votre API renvoie des messages d'erreur conviviaux, vous pouvez les attraper dans votre contrôleur et les montrer à vos utilisateurs.

Pour enregistrer un httpterceptor dans votre application, vous avez besoin d'un module:

http-interceptor.module.ts 

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpRequestInterceptor } from './http-request-interceptor';


@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS,
      useClass: HttpRequestInterceptor,
      multi: true
    }
  ]
})

export class HttpInterceptorModule { }

Ensuite, vous enregistrez ce module dans votre fichier app.module.ts et l'inclure dans les importations Array.

1
Danya Smith