Nefarious Pomegranate Magnate

    @btapai/ng-error-handler
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.0 • Public • Published

    ErrorHandler

    How to install and use

    1. Install the package with the following script:

      npm install @btapai/ng-error-handler --save
    2. This package has @angular/cdk as a peer dependency. Install it as well:

      npm install @angular/cdk --save
    3. If your project does not use @angular/material, add the following line into your styles.css file:

      @import '~@angular/cdk/overlay-prebuilt.css';
    4. Import the module into your main ngModule

      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { AppComponent } from './app.component';
      import { ErrorHandlerModule } from '@btapai/ng-error-handler';
      
      @NgModule({
        declarations: [AppComponent],
        imports: [
          BrowserModule,
          ErrorHandlerModule.forRoot(), // place it into the imports array
        ],
        providers: [],
        bootstrap: [AppComponent],
      })
      export class AppModule {}

    With this setup uncaught errors will be handled by this error-handler module.

    Customisation

    This packages uses the Angular CDK Overlay module for creating a backdrop. If you would like to style the overlay, provide a configuration object with your custom OverlayConfig object. For possible config options check out its documentation

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { ErrorHandlerModule, ERROR_HANDLER_CONFIG, ErrorHandlerConfig } from '@btapai/ng-error-handler';
    
    const CustomErrorHandlerConfig: ErrorHandlerConfig = {
      overlayConfig: {
        hasBackdrop: false, //
      },
    };
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, ErrorHandlerModule.forRoot()],
      providers: [{ provide: ERROR_HANDLER_CONFIG, useValue: CustomErrorHandlerConfig }],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    You can also provide custom hooks to run when an error is thrown:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { ErrorHandlerModule, ERROR_HANDLER_CONFIG, ErrorHandlerConfig } from '@btapai/ng-error-handler';
    import { ThirdPartyErrorLogger } from 'third-party-error-logger';
    
    const CustomErrorHandlerConfig: ErrorHandlerConfig = {
      errorHandlerHooks: [ThirdPartyErrorLogger.logErrorMessage],
    };
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, ErrorHandlerModule.forRoot()],
      providers: [{ provide: ERROR_HANDLER_CONFIG, useValue: CustomErrorHandlerConfig }],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    Future plans

    I'd like to keep this module up-to date with Angular versions.

    Keywords

    none

    Install

    npm i @btapai/ng-error-handler

    DownloadsWeekly Downloads

    47

    Version

    10.0.0

    License

    MIT

    Unpacked Size

    91.3 kB

    Total Files

    42

    Last publish

    Collaborators

    • btapai