Repository files navigation

I created this library to provide a way to handle all errors that can happen in an angular application.

Before the introduction of signals, I was using an ErrorHandler and everything worked.

Now, the issue raises when we use signals since they memoize the errors.

If an error is generated when the value of a signal is evaluated, this error is thrown everytimethe signal is read.

References:

• https://medium.com/netanelbasal/handling-errors-with-tosignal-in-angular-6500511c0d6f
• angular/angular#51949

It will automatically non-handled handle rxjs, signal and classic errors and make them available in a rx subject (ErrorBus)

• log these errors in the console (useful during development).
• display these errors to the user.

The components in the library are:

Sensor -> Centralized Service -> Notification

• Sensor is meant to capture the errors.
  The sensors handle the errors. The default configuration sends the error to the Centralized Service.
  The library provides 3 sensors :
  • ErrorHandler
  • Signal
  • Http Interceptor (not really interesting, the errorHandler does the same stuff).
• Centralized service
  The centralized service is theErrorBus component.
  It is basically a rxjsSubject wrapper.
  Any component can listen to the errors that are sent to the ErrorBus.
• Notification
  This component is meant to report the error to the end user.
  The library doesn't provide any implementation for it, since I think every applicationwill have its own need.The implementation will be straightforward :
  • listen to the ErrorBus
  • diplay the error in a toaster or similar component.

If you want to use all the stuff, you'll need to :

• register the providers fromprovideErrorHandler() in your app.config.
• provide you ErrorNotifier

.app.config.ts

import{ApplicationConfig,provideZoneChangeDetection,}from'@angular/core';import{provideRouter}from'@angular/router';import{routes}from'./app.routes';import{provideErrorHandler}from'@gonzal/ngx-error-handling';exportconstappConfig:ApplicationConfig={providers:[provideZoneChangeDetection({eventCoalescing:true}),provideRouter(routes),provideErrorHandler(),provideHttpClient(withInterceptors([errorHttpInterceptor])),// instantiates your ErrorNotifier at startupprovideAppInitializer(()=>{inject(ErrorNotifier);})],};

.ErrorNotifier

import{inject,Injectable}from"@angular/core";import{ErrorBus}from'@gonzal/ngx-error-handling';@Injectable({providedIn:'root'})exportclassErrorNotifier{    #errorBus=inject(ErrorBus);constructor(){this.#errorBus.getErrorStream().subscribe((error)=>this.#notify(error));}    #notify(error:Error){// or whatever other error reporting mechanism you want to useconsole.log(error);}}

You can also use only the captor you need (i.e. signal captor).

Moreon this in the captor section.

To capture the errors that can be thrown in a signal, you'll need to usesafeSignal() method.

This will replace any occurence ofcomputed() ortoSignal().

Sample usage :

.Safe signal evaluation

value=input('');computedValue=safeSignal(()=>{constvalue=this.value();returnthis.#businessLogic(value);},{// value that will be returned by the signal if an error is thrownfallback:'default value',// error handling mechanismonError:(e)=>console.error(e);});

.Safe observable to signal conversion

#userService=inject(UserService);users=safeSignal(this.#userService.getUsers(),{// value that will be returned by the signal if an error is thrownfallback:[],// error handling mechanismonError:(e)=>console.error(e);});

The options parameter is optional. If the parameter is undefined,safeSignal will just use the options from the providerSignalErrorConfigurationif it is available (if you useprovideErrorHandler(), this configuration class is already provided and configured to send the errors to theErrorBus).

So a more realistic sample would be :

value=input('');computedValue=safeSignal(()=>{constvalue=this.value();returnthis.#businessLogic(value);});

.Safe observable to signal conversion

#userService=inject(UserService);users=safeSignal(this.#userService.getUsers(),{fallback:[]});

ErrorHttpInterceptor catches all errors thrown by httpClient.

It the ask theErrorHttpInterceptorConfiguration provider if it should handle the error.

If yes, it call theonError of theErrorHttpInterceptorConfiguration, marks the error as handled and just rethrows the error.

IfErrorHttpInterceptorConfiguration is not provided,ErrorHttpInterceptor is just a noop interceptor.

Note thatprovideErrorHandler() already providesErrorHttpInterceptorConfiguration.

NgxErrorHandler just propagates any error to theErrorBus.

This is a wrapper around a rxjs Subject.

To use it:

import{inject,Injectable}from"@angular/core";import{ErrorBus}from'@gonzal/ngx-error-handling';@Injectable({providedIn:'root'})exportclassErrorNotifier{    #errorBus=inject(ErrorBus);constructor(){this.#errorBus.getErrorStream().subscribe((error)=>this.#notify(error));}    #notify(error:Error){// or whatever other error reporting mechanism you want to useconsole.log(error);}}