diff --git a/docs/en/UI/Angular/HTTP-Error-Reporter-Service.md b/docs/en/UI/Angular/HTTP-Error-Reporter-Service.md new file mode 100644 index 0000000000..5f02589751 --- /dev/null +++ b/docs/en/UI/Angular/HTTP-Error-Reporter-Service.md @@ -0,0 +1,71 @@ +# HTTP Error Reporter Service + +`HttpErrorReporterService` is a service which is exposed by `@abp/ng.core` package. HTTP errors can be reported by using this service. The service emits an event when an error is reported and keeps the errors as an array. The [`RestService`](./HTTP-Requests#restservice) uses the `HttpErrorReporterService` for reporting errors. + +See the example below to learn how to report an error: + +```ts +import { HttpErrorReporterService } from '@abp/ng.core'; +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { of } from 'rxjs'; +import { catchError } from 'rxjs/operators'; + +@Injectable() +export class SomeService { + constructor(private http: HttpClient, private httpErrorReporter: HttpErrorReporterService) {} + + getData() { + return this.http.get('http://example.com/get-data').pipe( + catchError(err => { + this.httpErrorReporter.reportError(err); + return of(null); + }), + ); + } +} +``` + +See the following example to learn listening the reported errors: + +```ts +import { HttpErrorReporterService } from '@abp/ng.core'; +import { HttpErrorResponse } from '@angular/common/http'; +import { Injectable } from '@angular/core'; + +@Injectable() +export class MyErrorHandler { + constructor(private httpErrorReporter: HttpErrorReporterService) { + this.handleErrors(); + } + + handleErrors() { + this.httpErrorReporter.reporter$.subscribe((err: HttpErrorResponse) => { + // handle the errors here + }); + } +} +``` + + +## API + + +### `reporter$: Observable` + +`reporter$` is a getter, returns an observable. It emits an event when a new error is reported. The event value type is `HttpErrorResponse`. + + +### `errors$: Observable` + +`errors$` is a getter, returns an observable. It emits an event when a new error is reported. The event value is all errors reported at runtime. + +### `errors: HttpErrorResponse` + +`errors` is a getter that returns all errors reported. + + +### `reportError(error: HttpErrorResponse): void` + +`reportError` is a method. The errors can be reported via this. +When an error is reported, the method triggers the `reports$` and `errors$` observables to emit an event. \ No newline at end of file diff --git a/docs/en/UI/Angular/HTTP-Requests.md b/docs/en/UI/Angular/HTTP-Requests.md index 0d7e65217d..57a058ef36 100644 --- a/docs/en/UI/Angular/HTTP-Requests.md +++ b/docs/en/UI/Angular/HTTP-Requests.md @@ -21,13 +21,13 @@ getConfig() { Although clear and flexible, handling errors this way is repetitive work, even when error processing is delegated to the store or any other injectable. -An `HttpInterceptor` is able to catch `HttpErrorResponse`  and can be used for a centralized error handling. Nevertheless, cases where default error handler, therefore the interceptor, must be disabled require additional work and comprehension of Angular internals. Check [this issue](https://github.com/angular/angular/issues/20203) for details. +An `HttpInterceptor` is able to catch `HttpErrorResponse` and can be used for a centralized error handling. Nevertheless, cases where default error handler, therefore the interceptor, must be disabled require additional work and comprehension of Angular internals. Check [this issue](https://github.com/angular/angular/issues/20203) for details. ## RestService -ABP core module has a utility service for HTTP requests: `RestService`. Unless explicitly configured otherwise, it catches HTTP errors and dispatches a `RestOccurError` action. This action is then captured by the `ErrorHandler` introduced by the `ThemeSharedModule`. Since you should already import this module in your app, when the `RestService` is used, all HTTP errors get automatically handled by default. +ABP core module has a utility service for HTTP requests: `RestService`. Unless explicitly configured otherwise, it catches HTTP errors and dispatches a `RestOccurError` action. This action is then captured by the `ErrorHandler` introduced by the `ThemeSharedModule`. Since you should already import this module in your app, when the `RestService` is used, all HTTP errors get automatically handled by default. @@ -67,7 +67,7 @@ getFoo(id: number) { -The `request` method always returns an `Observable`. Therefore you can do the following wherever you use `getFoo` method: +The `request` method always returns an `Observable`. Therefore you can do the following wherever you use `getFoo` method: ```js doSomethingWithFoo(id: number) { @@ -205,7 +205,7 @@ You may find `Rest.Observe` enum [here](https://github.com/abpframework/abp/blob ## HTTP Error Handling -When the `RestService` is used, all HTTP errors are automatically handled by `ErrorHandler` which is a service that exposed by the `@abp/ng.theme.shared` package. +When the `RestService` is used, all HTTP errors are reported to the [`HttpErrorReporterService`](./HTTP-Error-Reporter-Service), and then `ErrorHandler`, a service exposed by the `@abp/ng.theme.shared` package automatically handles the errors. ### Custom HTTP Error Handler