Discussion :

[Gluups]

Bonjour tout le monde,

Il semble que mon code d'erreur ait loupé une migration, tant qu'aucune erreur ne se produit je n'ai pas l'occasion de m'en rendre compte, mais quand il faut récupérer une erreur ça coince.

Dans ErrorHandleService j'ai ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  handleError<T>(operation: 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.log(error[0]);
      return of(result as T);
    }
  }

appelé par LocationService :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  getCountries(): Observable<Country[]> {
    const uri = decodeURIComponent(
      `${Constants.locationAPIUrl}\countries?apikey=${Constants.apiKey}`
    );
 
    return this.http.get<Country[]>(uri)
      .pipe(
        tap(_ => console.log("fetched countries")),
        catchError(this.errorHandleService.handleError.bind(this))
      );
  }

(le bind date de la dernière migration)

et tout ça appelé dans la page web :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  async getCountries() {
    const promise = new Promise((resolve, reject) => {
      this.locationService.getCountries()
        .toPromise()
        .then(
            res => {
              this.countries = res;
              resolve();
            },
            err => {
              console.error(err);
              this.errorMessage = err;
              reject(err);
            }
        );
    });
    await promise;
  }

Quand le serveur refuse la connexion, après la ligne qui m'avise de ça, voilà ce que m'affiche la console :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
ERROR TypeError: You provided '(error) => {
            console.log(error[0]);
            return Object(rxjs__WEBPACK_IMPORTED_MODULE_1__["of"])(result);
        }' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    RxJS 12
    Angular 16
    RxJS 21
    ZoneAwarePromise Angular
    toPromise RxJS
    promise weather.component.ts:61
    ZoneAwarePromise Angular
    getCountries weather.component.ts:59
    __awaiter tslib.es6.js:74
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:70
    getCountries main.js:377
    DoButtonCountries weather.component.ts:44
    __awaiter tslib.es6.js:74
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:70
    DoButtonCountries main.js:359
    WeatherComponent_Template_input_click_4_listener weather.component.html:7
    Angular 22
    WeatherComponent_Template weather.component.html:7
    Angular 13
    RxJS 3
core.js:4197
    Angular 4
    RxJS 5
    Angular 19
    RxJS 21
    ZoneAwarePromise Angular
    toPromise RxJS
    promise weather.component.ts:61
    ZoneAwarePromise Angular
    getCountries weather.component.ts:59
    __awaiter tslib.es6.js:74
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:70
    getCountries main.js:377
    DoButtonCountries weather.component.ts:44
    __awaiter tslib.es6.js:74
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:70
    DoButtonCountries main.js:359
    WeatherComponent_Template_input_click_4_listener weather.component.html:7
    Angular 22
    WeatherComponent_Template weather.component.html:7
    Angular 13
    RxJS 3

en bref dans error je n'ai pas le type attendu, et j'avoue que je pédale un peu pour sortir de là ...

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
...
...
   private endpoint = 'https://jsonplaceholder.typicode.com/xyz';
 
    constructor(private http: HttpClient) { }
 
    getPost(): Observable<Post[]> {
        return this.http.get<Post[]>(this.endpoint)
            .pipe(
                retry(1),
                catchError(this.handleError)
            );
    }
 
    handleError(error) {
        let errorMessage = '';
        if (error.error instanceof ErrorEvent) {
            // client-side error
            errorMessage = `Error: ${error.error.message}`;
        } else {
            // server-side error
            errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
        }
        console.log(errorMessage);
        return throwError(errorMessage);
    }

[Gluups]

Bonjour,
J'ai réussi à avoir un message un peu plus explicite, mais en plus du reste.
D'habitude, cathError, c'est pour afficher un message clair. Pas pour noyer l'utilisateur dans des pages d'historique d'appels.
Qu'est-ce que j'ai raté ?