Giter Club home page Giter Club logo

angular-error-shipper's Introduction

angular-error-shipper

A module for shipping errors, stack traces and other information from within your Angular app to a remote service.

Travis Build NPM version GitHub version Bower version Dependencies

Why?

Surfacing the details of when and why your app is breaking is important, this is a tool in assisting in that process. Having these logs indexed in something like LogStash make diagnosing problems significantly easier.

How?

This module instruments Angular's default $exceptionHandler to invoke a configurable set of clientside shippers.

--

Usage

Install the module and expose make it accessible to your app (by adding it to the your index.html, for example).

bower install angular-error-shipper
or
npm install angular-error-shipper

Declare the module as a dependency in your app:

angular.module('myApp', [
  'ngCookies',
  'ipCookie',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngTouch',
  'ngErrorShipper' // <-- the dep
])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });      
 
  }]);

There is a very simple example implementation in the ./example directory.

Default Shipper

Just doing the above will not have any effect (the Angular exception handling will work as normal) you will need to configure at least one shipper. There is a default shipper than easily be configured, like so:

angular.module('myApp', []).service('myService', function (errorShipper) {
	errorShipper.configure({
		url: 'path/where/it/should/post' // URL is the only required property
	});
});

The above is all you need to use the barebones shipper and have a information about clientside exceptions POST'd to the specified endpoint. The default shipper will not be created unless your explicitly invoke the .configure method.

Options for the default shipper

  • url required - An absolute or relative path to the location where the shipper will POST exceptions.
  • onSuccess - A callback to execute when a success POST of a exception takes place.
  • onError - A callback to execute when there is an error on POST'ing to the specified url.
  • data - An object that will be merged together with the exception data and be sent to the specified url, useful for sending app or user specific information. Note: you can also overwrite the properties set internally by the errorLogger.
  • method - Should you want to use anything other than POST for sending the exceptions.

Note: this options object is the one that is passed to Angular's internal $http, so you can pass it anything you can use there, like headers or cache etc. See more here:

https://docs.angularjs.org/api/ng/service/$http

Custom Shippers

If the above default shipper isn't flexible enough for you, you can add an arbitrary number of your own custom shippers to be invoked.

angular.module('myApp', []).service('myService', function (errorShipper) {
	errorShipper.use(function (payload) {
		// do something with payload
	});
	errorShipper.use(function (payload) {
		// do something else with payload
	});
});

The function(s) you pass to the use method will be invoked in the order it was added.

Each shipper will receive the same single argument, an Object containing all the information the error instrumentation produces. See Data format below for more details.

You will note there's no callback passed from the error instrumenter, as these shippers are designed to be fire-and-forget.

Also, if configure is not called and use is then ONLY the custom shippers will be used.

The default shipper needs to be explicitly opt'ed into. It can be used with an arbitrary number of customer shippers however. When used with custom shippers the default shipper will always be executed first, even if configure is invoked AFTER use.

Data format

The data format is the following:

{
   exception : exception.toString(), // Generated by Angular
   stack : exception.stack.toString(), // Generated by Angular
   location : angular.toJson($window.location),
   cause : cause || null, // Generated by Angular
   performance : angular.toJson(window.performance) // If available
}

--

Testing

Run the tests using grunt:

grunt test

Contributing

Always welcome, please unit test all your code.

--

Versions

#####0.1.0 - Initial release

angular-error-shipper's People

Contributors

joe8bit avatar steve384 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

angular-error-shipper's Issues

Not serialising information from window.performance

Due to the spec not requiring that the most useful information (memory, timing etc) be enumerable or serialisable Chrome, Firefox and IE don't currently support serialising these properties of window.performance.

See these bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=760851
https://code.google.com/p/chromium/issues/detail?id=497900

Apparently there is an effort to add a non-spec serialiser to window.performance, but currently the logger will serialise only the properties available to it.

I am considering deprecating the window.performance serialiser until the above are fixed. Thoughts?

Not setting shipper

So I have been trying to set this up this evening and I noticed that it would initialize correctly but would not set the shipper correctly ( always undefined etc). Removing $window resolved the issue as far as I can tell when this function is called $window is not passed.

  function set($window, shipper, first) {
    if (!first) {
      shippers.push(shipper);
    } else {
      shippers.unshift(shipper);
    }
  }

Create an example

Hey there,

I'm having trouble getting events to be sent to the server. Would it be possible for you to code up a simple example that I can follow?

Thanks!
Jason G.

Payload

I know it is fairly trivial to create a custom error shipper and payload but I am curious how you would feel about possibly putting in a flag to have the payload unwrapped (un nested timing,memory etc).

The only reason I bring this up is because personally I have to unwrap all of this to make it "Splunk" friendly.

Not a big deal but having a toggle to determine the output type would be beneficial in my oppinon

Not overidding $exceptionHandler

I tried with the barebones examples you provided. But it's somehow not overriding the behavior of $exceptionHandlers and i'm unable to send the exception to my URL.

Here's my code.

angular.module('write').controller(function (errorShipper) {
errorShipper.configure({
url: 'http://requestb.in/12avk0j1'
});
});
Please close down the issue if not found valid. It's my general query.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.