ngx-error-boundary

NgxErrorBoundary

This library is an experimental implementation of React Error boundary for Angular.

DEMO

Install the library

npm i ngx-error-boundary --save

Import the module:

imports: [NgxErrorBoundaryModule];

Once you include the module, you will get following component that you can use:

<ErrorBoundary
  [fallback]="template"
  key="unique.identify.string"
></ErrorBoundary>

following directives:

errorRetry;
errorDismiss;

and also you got one service:

NgxErrorBoundaryService;

Usage

<ErrorBoundary>

Using [fallback] with <ng-template></ng-template>, key is optional if there is only one ErrorBoundary pre-component.

If there are multi ErrorBoundary inside one component, you need to use key to show correct error message

<!-- error: {message: string, key: string} -->
<!-- retry$: Observable<boolean>: is retrying -->
<ng-template #errTemplate let-error let-retry$="retry$">
  <div class="err-container">
    <h2>Something goes wrong!</h2>
    <section>
      <p [innerHTML]="error.message"></p>
      <!-- errorRetry can help to retry the failed observable -->
      <button errorRetry>
        {{ (retry$ | async) ? "Retrying..." : "Retry" }}
      </button>
      <!-- errorDismiss: hide error boundary -->
      <button [errorDismiss]="error.key">Dismiss</button>
    </section>
  </div>
</ng-template>

<ErrorBoundary [fallback]="errTemplate" key="example">
  <YOUR_CONTENT_FROM_SERVER [data]="data$ | async" />
</ErrorBoundary>

this.data$ = timer(500).pipe(
  this.apiService.fetchData(),
  this.errorService.handleExpection({
    message: "Cannot load data",
    key: "example",
  })
);

When there is error, <YOUR_CONTENT_FROM_SERVER [data]="data$ | async" /> will be repalced with errTemplate.

@Input() fallback: TemplateRef

Take an ng-template as input.

@Input() key: string

A string to unqiue identify string to show correct error message

errorRetry Directive

You can retry the failed observable.

errorDismiss Directive

Take error's key string as input.

To hide Error boundary component

NgxErrorBoundaryService

handleExpection({message?: string, key?: string})

If nothing passed in as arguement, will use catched error's message information.

There is a default key assigned, can be used for global error message.

Example:

@Component({
  selector: "categories",
  ...
  providers: [NgxErrorBoundaryService],
})
export class CategoriesComponent {
  categories$: Observable<Category[]>;
  constructor(
    private categoriesService: CategoriesService,
    private errorService: NgxErrorBoundaryService
  ) {
    this.categories$ = this.categoriesService.fetchData().pipe(
      this.errorService.handleExpection({
        message: "Cannot load categories",
        key: "categories",
      })
    );
  }
}

dismiss(key?: string)

key: error key

Hide error boundary component and error message for the key.

If didn't pass key, then hide all error messages.