Browse Source

remove unnecesarry configFactory and update documentation for customization

pull/19272/head
Sinan Öztürk 3 years ago
parent
commit
a8ae674c2f
  1. 49
      docs/en/UI/Angular/HTTP-Error-Handling.md
  2. 2
      npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts
  3. 7
      npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
  4. 12
      npm/ng-packs/packages/theme-shared/src/lib/tokens/http-error.token.ts

49
docs/en/UI/Angular/HTTP-Error-Handling.md

@ -1,8 +1,55 @@
# HTTP Error Handling
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.
## Configurations for Errors
ABP offers a configurations for errors handling. You can set these configuration in **`ThemeSharedModule.forRoot()`** method in app.module.ts
See the configuration interface;
```ts
export type ErrorScreenErrorCodes = 0 | 401 | 403 | 404 | 500;
export interface HttpErrorConfig {
skipHandledErrorCodes?: ErrorScreenErrorCodes[] | number[]; //
errorScreen?: {
component: Type<any>;
forWhichErrors?: ErrorScreenErrorCodes[];
hideCloseIcon?: boolean;
};
}
```
- **`ErrorScreenErrorCodes`** The error codes that you can pass to **`skipHandledErrorCodes`** and **`forWhichErrors`**.
- **`skipHandledErrorCodes`** Error codes those you don't want to handle it.
- **`errorScreen`** The screen that you want to show when a route error occurs.
- **`component`** Component that you want to show.
- **`forWhichErrors`** same as **`ErrorScreenErrorCodes`**
- **`hideCloseIcon`** Hides close icon in default ABP component.
### Example Usage
```ts
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { MyCustomRouteErrorComponent } from './my-custom-route.component';
@NgModule({
imports: [
ThemeSharedModule.forRoot({
httpErrorConfig: {
skipHandledErrorCodes: [403],
errorScreen: {
forWhichErrors: [404],
component: MyCustomRouteErrorComponent,
hideCloseIcon: false
}
}
}),
...
],
})
export class AppModule {}
```
## Custom HTTP Error Handler
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.
### Function Method `Deprecated`

2
npm/ng-packs/packages/theme-shared/src/lib/handlers/error.handler.ts

@ -87,7 +87,7 @@ export class ErrorHandler {
protected filterRestErrors = ({ status }: HttpErrorResponse): boolean => {
if (typeof status !== 'number') return false;
if (!this.httpErrorConfig || !this.httpErrorConfig.skipHandledErrorCodes) {
if (!this.httpErrorConfig?.skipHandledErrorCodes) {
return true;
}

7
npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@ -32,7 +32,7 @@ import { RootParams } from './models/common';
import { DEFAULT_HANDLERS_PROVIDERS, NG_BOOTSTRAP_CONFIG_PROVIDERS } from './providers';
import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
import { HTTP_ERROR_CONFIG } from './tokens/http-error.token';
import { DateParserFormatter } from './utils/date-parser-formatter';
import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
import { PasswordComponent } from './components/password/password.component';
@ -112,11 +112,6 @@ export class ThemeSharedModule {
useFactory: noop,
},
{ provide: HTTP_ERROR_CONFIG, useValue: httpErrorConfig },
{
provide: 'HTTP_ERROR_CONFIG',
useFactory: httpErrorConfigFactory,
deps: [HTTP_ERROR_CONFIG],
},
{ provide: NgbDateParserFormatter, useClass: DateParserFormatter },
NG_BOOTSTRAP_CONFIG_PROVIDERS,
{

12
npm/ng-packs/packages/theme-shared/src/lib/tokens/http-error.token.ts

@ -1,18 +1,6 @@
import { InjectionToken } from '@angular/core';
import { CustomHttpErrorHandlerService, HttpErrorConfig, HttpErrorHandler } from '../models/common';
export function httpErrorConfigFactory(config = {} as HttpErrorConfig) {
if (config.errorScreen && config.errorScreen.component && !config.errorScreen.forWhichErrors) {
config.errorScreen.forWhichErrors = [401, 403, 404, 500];
}
return {
skipHandledErrorCodes: [],
errorScreen: {},
...config,
} as HttpErrorConfig;
}
export const HTTP_ERROR_CONFIG = new InjectionToken<HttpErrorConfig>('HTTP_ERROR_CONFIG');
/**

Loading…
Cancel
Save