JavaScript Angular Error-Handling

[-Rayz-]

Guten Morgen,

ich hätte mal eine Frage wie man denn so am besten das Error-Handling für Requests abfängt. Bisher habe ich folgendes als Beispiel:

this._service.addItem(this.item)
    .pipe(
        catchError(error => this.handleErrorStatusCode(error)),
        finalize(() => {
            if (this.error) {
                this._alertService.success('Yeah alles toll');
            }
        })
    )
    .subscribe();

Ich möchte bei einem Fehler den StatusCode übergebn und wenn es erfolgreich war, auch eine Rückmeldung liefern. Sollte es zu einem Fehler kommen, setze ich meine error Variable in der Methode "handleErrorStatusCode" auf true und rufe auch dort meinen altertService auf. nur halt nicht mit success sondern eben mit .error und errorCode

Mein Problem ist folgendes: Wenn ich die error Variable nicht habe, wird meine Errormeldung vom Success überschrieben. Sowohl finalize wie auch unter subscribe das complete werden ja immer aufgerufen. Das mit der error Variable als Hilfe kommt mir einfach nicht richtig vor und wäre über eine Alternative Idee sehr dankbar.

MfG Rayz

 

[blablub1212]

Bisschen was zum Lesen: https://christianlydemann.com/logging-with-angular/

Da bekommst du Anregungen für Exceptions und HTTP-Requests. Anstatt dem ELK-Stack würde ich in kleinen Projekten evtl. Papertrail nutzen

 

[-Rayz-]

Danke dir

 

[pcBauer]

Auch wenn ich hier ein bisschen spät einsteige, aber ich hoffe ich kann trotzdem noch was beitragen.

Für generelles Error-Handling bei Requests empfehle ich einen eigenen HTTP-Interceptor.
Dafür brauchst du halt eine möglichst einheitliche Error-Struktur (z.B. immer Fehlercodes), dafür brauchst du den Code nur noch an einer Stelle und musst ihn nicht jedes Mal selbst implementieren.

Nur verstehe ich nicht ganz wieso du unbedingt das finalize nehmen musst, wenn du doch eh verschiedene Dinge im Erfolgs- und Fehlerfall machen willst?

Fragen:

• Wieso machst du einen aufruf auf eine success-Methode mit Yeah alles toll, genau dann wenn es einen Fehler gibt?
• this.error wird durch this.handleErrorStatusCode(error) gesetzt?
• willst du den Erfolgsfall durch den Fehlerfall nun manipulieren oder sind es eben nicht eh zwei völlig getrennte Fälle?

In meinen Augen kannst du gänzlich auf deine pipe verzichten und stattdessen Alles im subscribe machen?

this._service.addItem(this.item)
    .subscribe(
        () => console.log("Yeah alles toll!"),
        () => this.handleErrorStatusCode(error),
        () => console.log("fertig!")
    );

Falls das Problem noch so besteht, kannst du dich ja mal melden, die ELK-Thematik hintendran ist ja nochmal was Anderes.

 

[-Rayz-]

Für Requests nutze ich nun auch einen Intercepter. Allerdings wirklich nur für Fehlermeldungen da Success Meldungen dann doch zu spezifisch sind.

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request)
            .pipe(
                catchError(error => {
                    console.log('Request Error: ', error.status)
                    if (error.status === 401) {
                        this._authenticationService.logout();
                    }

                    this._alertService.pushNotification({
                        text: StatusMessages.GetErrorMessage([error.status]),
                        type: NotificationType.Error,
                        duration: 5000
                    });
                    return throwError(error);

So sieht es dann in einer Component aus:

of(true).pipe(
            ....
            catchError(error => {
                this.error = true;
                return of(error);
            }),
            finalize(() =>  {
                this.loading = false;
                if (!this.error) {
                    this._alertService.pushNotification({
           ...
                    });
                }
            }))
            .subscribe();