Using Raygun to derive exceptions from dynamic tracking Angularjs

This article mainly introduces the use of Raygun from the dynamic tracking Angularjs in the exception, Angularjs is a highly popular JavaScript library, the need for friends can refer to the

One of the great achievements of Angular.js is the practical exception thrown, because the exception information is often able to accurately indicate why your code crashed. Large client Web applications that run in many browsers around the world face an abnormally lost problem, and capturing it can fix bugs and win users.

When dealing with issues across browsers and devices, it is important to receive these exception messages because your application may run reliably on your development machine, but it is another scene in your user's browser.

The solution is to require an automatic exception tracking service, and Raygun simplifies the work by receiving all the exceptions that are thrown by your angular Web application, but does not require you to do anything. It's set really fast-just follow the steps below to hook Raygun to your app.

Installation

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

Through Bower

The code is as follows:

Bower Install Raygun4js

Get from NuGet--in Visual Studio, open the Package Manager console and enter:

The code is as follows:

Install-package Raygun4js

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

Configuration

Next, reference this script. If you use static HTML, it will be added to the page or added to your module loader.

Finally, call the following code to set the RAYGUN4JS before your angular main logic executes:

Raygun.init (' Your_api_key '). Attach ();

You can generate an API key for each app created with Raygun, you can visit him in your Raygun dashboard-you have 30 days of free trial time to test it.
Catching exceptions in angular

There are at least two ways to inject an unhandled exception into a angular.js module by using decorator or factory. Both of these methods will provide you with a $exceptionhandler implementation, and the raygun4js mentioned above will send the implementation to Raygun.

Use an Adorner

The adorner pattern, which does not overwrite the original behavior, is well suited to inject behavior into any service to ensure that the focus is detached from the other desired attributes and is an ideal way to log and handle exceptions. In Angular.js it can be used in $provide service, we will be used to implement our own

$exceptionHandler 函数:

  

app.config(function($provide) {

 $provide.decorator("$exceptionHandler", ['$delegate',function($delegate) {

  returnfunction(exception, cause) {

   Raygun.send(exception);

   $delegate(exception, cause);

  }

 }])

});

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

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

$provide.decorator("$exceptionHandler", ['$delegate','$log',function($delegate, $log) {

  returnfunction(exception, cause) {

   $log.debug('Sending to Raygun');

   Raygun.send(exception);

   $delegate(exception, cause);

  }

 }])

Depending on what type of error is thrown in the obtained angular logic, the cause parameter is populated. If an exception occurs in a factory or service, you may get a range of parameters that you can use as custom data by replacing the raygun.send call, with whatever else you need, and then transferring it to Raygun:

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

Use a factory

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

app.factory('$exceptionHandler',function() {

 returnfunction(exception) {

  Raygun.send(exception);

 }

});

Send error manually

Raygun4js is also attributable to your ability to manually track errors at any time:

Raygun.send (new error (' My custom error '));

There is also a stack of other tools available on the supply, including unique user tracking, version tracking, labeling, and more – all the information that the document here can view.

Raygun can even track jquery ajax errors in your angular application even tracks jquery ajax errors without you doing anything extra, so you'll get full care of the out-of-the-box.

Are you ready to use Raygun?

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