npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bugsplat-ng4

v2.1.1

Published

BugSplat error handling for Angular 4

Downloads

12

Readme

BugSplat

travis-ci

Introduction

BugSplat supports the collection of errors in Angular 4 applications. The bugsplat-ng4 npm package implements Angular’s ErrorHandler interface in order to post errors to BugSplat where they can be tracked and managed. Adding BugSplat to your Angular application is extremely easy. Before getting started please complete the following tasks:

Simple Configuration

To collect errors and crashes in your Angular 4 application, run the following command in terminal or cmd at the root of your project to install bugsplat-ng4:

npm install bugsplat-ng4 --save

Import BugSplatErrorHandler and BugSplatConfiguration into your app module from bugsplat-ng4:

app.module.ts

import { BugSplatErrorHandler, BugSplatConfiguration } from 'bugsplat-ng4';

Add a provider for ErrorHandler with the useClass property set to BugSplatErrorHandler:

app.module.ts

...
@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: BugSplatErrorHandler }
  ],
  ...
})

In your app module, add a provider for BugSplatConfiguration with the useValue property set to an instance of your BugSplat configuration:

app.module.ts

...
const appName = "my-angular-4-crasher";
const appVersion = "1.0.0.0";
const database = "fred";

@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: BugSplatErrorHandler },
    { provide: BugSplatConfiguration, useValue: new BugSplatConfiguration(appName, appVersion, database) }
  ],
  ...
})

Import the HttpClient module from @angular/common/http and add it to your module’s imports:

app.module.ts

import { HttpClientModule } from '@angular/common/http';
...
@NgModule({
  imports: [
    ...
    HttpClientModule
  ],
  providers: [
    { provide: ErrorHandler, useClass: BugSplatErrorHandler },
    { provide: BugSplatConfiguration, useValue: new BugSplatConfiguration(appName, appVersion, database) },
  ],
  ...
})

Throw a new error in your application to test the bugsplat-ng4 integration:

app.component.ts

throw new Error("foobar!");

Navigate to the All Crashes page in BugSplat and you should see a new crash report for the application you just configured. Click the link in the Id column to see details about your crash on the Individual Crash page:

AllCrashNg4

IndividualCrashNg4

Extended Configuration

You can post additional information to BugSplat by creating a wrapper around the BugSplat object. To do so, create a new class that implements Angular’s ErrorHandler interface. In the handlerError method make a call to BugSplat.post passing it the error object:

my-angular-error-handler.ts

import { ErrorHandler, Injectable, Inject, Optional } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { BugSplat, BugSplatConfiguration, BugSplatLogger } from 'bugsplat-ng4';

@Injectable()
export class MyAngularErrorHandler implements ErrorHandler {
    public bugsplat: BugSplat;
    constructor(@Inject(BugSplatConfiguration)public config: BugSplatConfiguration,
        @Inject(HttpClient)private http: HttpClient,
        @Optional()private logger: BugSplatLogger) {
            this.database = this.config.database;
            this.bugsplat = new BugSplat(this.config, this.http, this.logger);
    }
    handleError(error) {
        // Add additional functionality here
        this.bugsplat.post(error);
    }
}

BugSplat provides the following properties and methods that allow you to customize its functionality:

bugsplat.ts

BugSplat.appkey: string; // A unique identifier for your application
BugSplat.user: string; // The name or id of your user
BugSplat.email: string; // The email of your user 
BugSplat.description: string; // Additional info about your crash that gets reset after every post
BugSplat.addAdditionalFile(file); // Add a file to a list of files to be uploaded at post time (total upload limit 2MB)
BugSplat.getObservable(); // Returns an Observable<BugSplatPostEvent>. Subscribing to this method will allow you to hook into the results of BugSplatPost events in your components. Make sure to unsubscribe in ngOnDestroy.
BugSplat.post(error); // Post an arbitrary Error object to BugSplat

In your app module, update the useClass property in your ErrorHandler provider to the name of the class you just created:

app.module.ts

...
@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: MyAngularErrorHandler },
    { provide: BugSplatConfiguration, useValue: new BugSplatConfiguration(appName, appVersion, database) },
  ]
  ...
})

You can also configure BugSplat's logging preferences. Start by adding BugSplatLogger and BugSplatLogLevel to the existing list of imports for bugsplat-ng4. Create a provider for BugSplatLogger with useValue set to a new instance of BugSplatLogger. Pass one of the BugSplatLogLevel options as the first parameter to BugSplatLogger. You can provide an instance of your own custom logger as the second parameter granted it has error, warn, info and log methods. If no custom logger is provided console will be used. The BugSplatLogger dependency is marked as optional so if you are not interested in log statements emitted by BugSplat you may omit this provider:

app.module.ts

import { ..., BugSplatLogger, BugSplatLogLevel } from 'bugsplat-ng4';
...
@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: BugSplatErrorHandler },
    { provide: BugSplatConfiguration, useValue: new BugSplatConfiguration(appName, appVersion, database) },
    { provide: BugSplatLogger, useValue: new BugSplatLogger(BugSplatLogLevel.Log) }
  ],
  ...
})

Contributing

BugSplat loves open source software! If you have suggestions on how we can improve this integration, please reach out to [email protected], create an issue in our GitHub repo or send us a pull request.