Use Raygun to automatically track exceptions in AngularJS

One of Angular. js's great achievements is the utility of exception throwing, because exception messages often indicate exactly why your code crashed. Large client web applications running in many browsers around the world face the problem of missing exceptions, and capturing it has the potential to fix bug and win users.

It is important to receive these exceptions when dealing with cross-browser and device issues, because your application may run correctly and reliably on your development machine, but on your user's browser it is a different story.

The solution is that you need an automatic exception tracking service, and Raygun simplifies this by receiving all the exceptions thrown by your Angular web application without requiring you to do anything. It's really fast to set up -- just follow these steps to get Raygun hook into your app.

The installation

First, download the small Raygun4JS script and add it to your project. There are three ways to get it:

Through Bower

bower install raygun4js

From NuGet - In Visual Studio, open the package Manager console and type:

Install-Package raygun4js

Click here to download the dev version or a compressed version
configuration

Next, refer to the script. If you use static HTML, will < script src="js/raygun.js" type="text/javascript" > < /script > Add to the page or to your module loader.

Finally, before your Angular main logic executes, call the following code to set up Raygun4JS:

Raygun.init('YOUR_API_KEY').attach();

You can generate 1 API key for every app created with Raygun, which you can access in your Raygun dashboard -- you get a 30-day free trial to test it.
Catch an exception in Angular

There are at least two ways to inject unhandled exceptions into the module of ES67en.js by using decorator or factory. These two approaches will give you the concrete implementation of $exceptionHandler, which the Raygun4JS mentioned above will send to Raygun.

Use 1 decorator

Decorator pattern because it will not overwrite the original behavior, so it is suitable for arbitrary behavior into the service, to ensure that in features of other desired separation of concerns, it is also a log and ideal way of dealing with the abnormal. In Angular. $provide js it can be used in the service, we will be used to realize our own

$exceptionHandler  function :
 
app.config(function ($provide) {
 $provide.decorator("$exceptionHandler", ['$delegate', function($delegate) {
  return function (exception, cause) {
   Raygun.send(exception);
   $delegate(exception, cause);
  }
 }])
});

$delegate is the entity of the exception handler that we will call to get the original behavior of the output to the console.

You can also create as many other services as you need:

$provide.decorator("$exceptionHandler", ['$delegate', '$log', function($delegate, $log) {
  return function (exception, cause) {
   $log.debug('Sending to Raygun');
   Raygun.send(exception);
   $delegate(exception, cause);
  }
 }])

Depends on the access to the Angular logic error from them is what type, cause parameters can be filled in. If an exception occurs in a factory or a service, you may get the range of parameters can be you can use it as a custom data, by replacing the above Raygun. send calls, along with any other things you need, then transferred to Raygun:

Raygun.send(exception, { cause: cause });

Use 1 factory

The quick way to get Raygun into your application's exception handler is to use a factory, although it removes the original console log, and if you want to keep it, you'll need to store the original value and call it again.

app.factory('$exceptionHandler', function () {
 return function (exception) {
  Raygun.send(exception);
 }
});

Manual sending error

Raygun4JS also attributes to your ability to easily manually track errors at any given time:

Raygun.send(new Error('my custom error'));

There is also a heap of other tools available on the provider, including unique user tracking, version tracking, labels, and any other trust information that the documentation here can view.

Raygun can even track jQuery Ajax errors in your Angular application without you having to do anything extra, so you'll get full care out of the box.
Are you ready to use Raygun?

As mentioned earlier, there is a free 30-day credit card free version available, so you can get one to see if your app is really working for your users. If you have any questions about this article, please leave them in the comments below.