Use Raygun to automatically track exceptions in AngularJS_AngularJS

One of the great achievements of Angular.js is the practical exception throwing, because the exception message can often indicate exactly why your code crashed. Large client-side web applications running on numerous browsers around the world face missing exceptions, and catching it makes it possible to fix the bug and gain users.

When dealing with cross-browser and device issues, it's important to receive these exception messages because your app may run correctly and reliably on your development machine, but not on your users' browsers. Another scene.

The solution is to have an automated exception tracking service, and Raygun simplifies the job by receiving all exceptions thrown by your Angular web app without requiring you to do anything. It's really quick to set up - just follow the steps below to hook Raygun into your application.

Install

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

By Bower

Copy code The code is as follows:

bower install raygun4js

Get it from NuGet - In Visual Studio, open the Package Manager console and type:

Copy code The code is as follows:

Install-Package raygun4js

Manual download – Click here to download the dev version or compressed version
Configuration

Next, quote this script. If you use static HTML, add 318529830bc9dd28df5c4e1a87c87d072cacc6d41bbb37262a98f745aa00fbf0 to the page or to your module loader.

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

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

You can generate an API key for every app created with Raygun, and you can access it in your Raygun dashboard - you have a 30-day free trial to test it out.
Catching Exceptions in Angular

There are at least two ways to inject unhandled exceptions into Angular.js modules, by using decorators or factories. These two methods will provide you with a specific implementation of $exceptionHandler, and the Raygun4JS we mentioned above will send the implementation to Raygun.

Use a decorator

The decorator pattern is very suitable for injecting behavior into any service because it does not overwrite the original behavior to ensure separation of concerns among other desired features. It also records logging and processing Ideal way to handle exceptions. In Angular.js it can be used in the $provide service, which we will use to implement our own

$exceptionHandler 函数:
 
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, which we will call to get the original behavior of outputting 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);
  }
 }])

Depending on what type of error is retrieved from the Angular logic, the cause parameter is filled in. If an exception occurs in a factory or service, you may get the range that the parameter can be, you can Use it as custom data by replacing the Raygun.send call above, along with anything else you need, and passing it to Raygun:

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

Use a factory

A quick way to put Raygun into your application's exception handler is to use a factory, although it will remove the original console log, which will need to be stored if you want to retain this functionality. the original value and call it again.

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

Manual sending error

Raygun4JS also gives you the ability to easily track errors manually at any time:

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

There are a bunch of other tools you can take advantage of on the provider, including unique user tracking, version tracking, tags and more – Here’s the documentation to see all the trust information for .

Raygun can even track jQuery Ajax errors in your Angular app without you having to do anything extra, so you'll be fully taken care of out of the box.
Ready to use Raygun?

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