Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@btapai/ng-error-handler

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

27

Version

10.0.0

License

MIT

Unpacked Size

91.3 kB

Total Files

42

Last publish

Collaborators

  • avatar