diff --git a/README.md b/README.md index 08eb359..2e79153 100644 --- a/README.md +++ b/README.md @@ -146,90 +146,3 @@ export class AppComponent { } } ``` - -## Error Handling - -Use `PlausibleErrorHandler` to track error's in your Angular application. The event will only show up in Plausible when you create a [custom event goal](https://plausible.io/docs/custom-event-goals#2-create-a-custom-event-goal-in-your-plausible-analytics-account) for your page. - -Create a custom event goal for the default event name: `Error`. Otherwise provide a custom event name by passing `plausibleErrorEvent` and create a custom event goal for custom event name. - -```ts -import { - PlausibleErrorHandler, - PlausibleEventDirective, - PLAUSIBLE_ERROR_OPTIONS, - PlausibleErrorHandlerOptions, -} from '@notiz/ngx-plausible'; -import { ErrorHandler, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { environment } from 'src/environments/environment'; - -const plausibleErrorOptions: PlausibleErrorHandlerOptions = { - logErrors: !environment.production, - plausibleErrorEvent: 'Error', // default event name -}; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, PlausibleEventDirective], - providers: [ - { - provide: ErrorHandler, - useClass: PlausibleErrorHandler, - }, - { - provide: PLAUSIBLE_ERROR_OPTIONS, - useValue: plausibleErrorOptions, - }, - ], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -Or use `createPlausibleErrorHandler` and `createPlausibleErrorHandlerProvider` to configure the `PlausibleErrorHandler` via a factory. - -```ts -import { - PlausibleEventDirective, - createPlausibleErrorHandler, - PlausibleService, -} from '@notiz/ngx-plausible'; -import { ErrorHandler, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { environment } from 'src/environments/environment'; - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, PlausibleEventDirective], - providers: [ - { - provide: ErrorHandler, - useFactory: (plausibleService: PlausibleService) => - createPlausibleErrorHandler(plausibleService, { - logErrors: !environment.production, - plausibleErrorEvent: 'Error', // default event name - }), - deps: [PlausibleService], - }, - // or use - createPlausibleErrorHandlerProvider({ logErrors: !environment.production, }), - ], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -Configure `PlausibleErrorHandler` with `PlausibleErrorHandlerOptions`: - -| Option | Default | -| --------------------- | --------------- | -| `logErrors` | `false` | -| `plausibleErrorEvent` | `Error` | -| `extractor` | Default provide | diff --git a/projects/ngx-plausible/src/lib/plausible-error-handler.ts b/projects/ngx-plausible/src/lib/plausible-error-handler.ts deleted file mode 100644 index 0081f8f..0000000 --- a/projects/ngx-plausible/src/lib/plausible-error-handler.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { - ErrorHandler, - Inject, - Injectable, - InjectionToken, - Optional, -} from '@angular/core'; -import { HttpErrorResponse } from '@angular/common/http'; -import { PlausibleService } from './plausible.service'; - -export interface PlausibleErrorHandlerOptions { - /** - * Useful for development. - * - * Use with `!environment.production`. - */ - logErrors?: boolean; - - /** - * Default to 'Error'. - */ - plausibleErrorEvent?: string; - - /** - * Provide your custom logic to extract the error. - * - * @param error Captured by Angular - * @param defaultExtractor Default logic to extract the error - */ - extractor?(error: any, defaultExtractor: (error: any) => any): any; -} - -export const PLAUSIBLE_ERROR_OPTIONS = - new InjectionToken('PLAUSIBLE_ERROR_OPTIONS'); - -@Injectable() -export class PlausibleErrorHandler implements ErrorHandler { - constructor( - private plausibleService: PlausibleService, - @Optional() - @Inject(PLAUSIBLE_ERROR_OPTIONS) - private options?: PlausibleErrorHandlerOptions - ) {} - - handleError(error: any): void { - const extractedError = this.extractError(error) || 'Unknown error'; - - this.plausibleService.event(this.plausibleEventName(), { - props: { - error: extractedError, - }, - }); - - if (this.options?.logErrors) { - console.error(extractedError); - } - } - - private plausibleEventName() { - return this.options?.plausibleErrorEvent || 'Error'; - } - - private extractError(error: any): any { - if (this.options?.extractor) { - const defaultExtractor = this.defaultExtractor.bind(this); - return this.options.extractor(error, defaultExtractor); - } - - return this.defaultExtractor(error); - } - - protected defaultExtractor(errorCandidate: unknown): unknown { - let error = errorCandidate; - - if (error && (error as { ngOriginalError: Error }).ngOriginalError) { - error = (error as { ngOriginalError: Error }).ngOriginalError; - } - - if (typeof error === 'string' || error instanceof Error) { - return error; - } - - if (error instanceof HttpErrorResponse) { - if (error.error instanceof Error) { - return error.error; - } - - if (error.error instanceof ErrorEvent && error.error.message) { - return error.error.message; - } - - if (typeof error.error === 'string') { - return `[${error.status}]: ${error.error}`; - } - - return error.message; - } - - return null; - } -} - -export function createPlausibleErrorHandler( - plausibleService: PlausibleService, - options?: PlausibleErrorHandlerOptions -) { - return new PlausibleErrorHandler(plausibleService, options); -} - -export function createPlausibleErrorHandlerProvider( - options?: PlausibleErrorHandlerOptions -) { - return { - provide: ErrorHandler, - useFactory: (plausibleService: PlausibleService) => - createPlausibleErrorHandler(plausibleService, options), - deps: [PlausibleService], - }; -} diff --git a/projects/ngx-plausible/src/public-api.ts b/projects/ngx-plausible/src/public-api.ts index 510cb1b..2c104f0 100644 --- a/projects/ngx-plausible/src/public-api.ts +++ b/projects/ngx-plausible/src/public-api.ts @@ -2,7 +2,6 @@ * Public API Surface of ngx-plausible */ -export * from './lib/plausible-error-handler'; export * from './lib/plausible-event.directive'; export * from './lib/plausible.service'; export * from './lib/plausible-types';