使用Raygun来自动追踪AngularJS中的异常

Angular.js取得的巨大成就之一是实用的异常抛出，因为异常信息经常能够准确的表明你的代码为什么崩溃了。运行于世界各地的众多浏览器的大型客户端web应用会面临异常丢失的问题，而捕获它就有可能修复 bug并赢得用户。

当处理跨浏览器和设备的问题时，接收这些异常信息是很重要的，因为你的应用可能在你的开发机器上运行得正确可靠，但在你的用户的浏览器上却是另一番场景。

其解决方案是需要一个自动异常跟踪服务，而Raygun通过接收你的Angular web应用抛出的所有异常但不需要你做任何事，从而简化了这项工作。它的设置真的很快－－只需要按照以下步骤将Raygun hook到你的应用就可以了。

安装

首先，下载小巧的Raygun4JS脚本，并把它添加到你的项目中。有3个途径获得：

通过Bower

代码如下:

bower install raygun4js

从NuGet获得——在Visual Studio中，打开包管理器控制台然后输入：

代码如下:

Install-Package raygun4js

手动下载 – 点击此处下载dev版 或者压缩过的版本
配置

接下来，引用这个脚本。如果你使用静态的HTML，将<script src="js/raygun.js" type="text/javascript"></script>添加到页面里面或添加到你的模块加载器中。

最后，在你的Angular主逻辑执行之前调用下面的代码来设置Raygun4JS：

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

你可以为每一个用Raygun创建的app生成一个API key，你可以在你的Raygun dashboard 中访问他——你有30天免费试用时间来测试它。
在Angular中捕获异常

至少有两种方法将未处理的异常注射到Angular.js的模块中，通过使用decorator 或 factory。这两种方式会为你提供$exceptionHandler的具体实现，我们上面所提到的Raygun4JS会将该实现发送给Raygun。

使用一个装饰器

装饰器模式因其不会覆盖掉原有的行为，所以很适合用来将行为注入到任意的服务中，以确保在其它所期望的特性中分离关注点，它也是记录日志和处理异常的理想方式. 在Angular.js中它可以使用在 $provide 服务中，我们将用来实现我们自己的

$exceptionHandler 函数:

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

$delegate 是异常处理器的实体，我们会调用它来获得输出到控制台的原始行为.

你也可以按照自己的需要创建足够多的其它服务:

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

依赖于所获取到的自Angular逻辑中抛出的错误是什么类型, cause 参数得以被填充. 如果一个异常发生在一个工厂或者服务中，你可能会得到那个参数可以的范围, 你可以将其作为自定义数据，通过替换掉上面的Raygun.send调用，附带任何你需要的其它东西，再传送到Raygun:

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

使用一个工厂

快速的将Raygun放到你的应用的异常处理器中的方法就是使用一个工厂, 尽管它会移除原来的控制台日志，而如果你想要保留此项功能的话，就会需要存储原来的值并再一次调用它.

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

手动发送错误

Raygun4JS 也归于了你任意时间很容易的手动跟踪错误的能力:

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

供应器上还有一堆其它使用的工具可以利用，包括独特的用户跟踪，版本跟踪，标签及其它 – 这里的文档可以查看 的所有相信信息.

Raygun 甚至可以在你的Angular应用中跟踪jQuery 的Ajax错误even tracks jQuery Ajax errors ，而无需你的做任何额外的事情, 因此你将得到开箱即用的全面照顾.
准备好使用Raygun了吗?

如之前所提及的，有一个 30天免费的无信用卡支付的版本可用, 因此你可以获取一个来看看你的应用是否真的是在为你的用户运作的. 如果就本文你有任何的疑问，请将它们留在下面的评论中。

赞 (0)

相关推荐

  • 使用AngularJS编写较为优美的JavaScript代码指南

    使用AngularJS编写较为优美的JavaScript代码指南

    本文示例代码下载:modulePattern.zip - 所有的 4 个 HTML 文件  以及 panacea.js - 1.6 KB 介绍 AngularJS 的库里面有很多东西,但本文中我只想专注于小的,针对特定主题的库,我相信通过它们能对Angular有一个较好的介绍.  理解这篇文章并不需要你有任何Angular相关的,甚至是JavaScript的经验.希望你能从本文中看到一些使用Angular的好处,并乐于动手尝试. 背景 我使用Angular有一段时间了,而在学习Angular的时

  • 简介可以自动完成UI的AngularJS工具angular-smarty

    简介可以自动完成UI的AngularJS工具angular-smarty

    我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的主页上.这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方.它很有意思,也是用AngularJS构建的! 我们希望Smarty能够: 通过用户的给定输入 (一个前缀),通过一个HTTP请求后自动提供建议 显示一个建议的下拉列表 当用户输入时更新 足够快,能够跟得上用户的输入 导航直观且能够关闭 可重用 以往没有AngularJS的经验,这个项目是我使用这个框架的入门项目.它真的成为了一次宝贵的学

  • 使用JavaScript的AngularJS库编写hello world的方法

    本文展示了AngularJS框架实现的hello world代码示例. 如下是一些你在看Hello World 示例和接下来的代码示例时需要重点关注的方面. ng-app, ng-controller, ng-model 指令 带有两个大括弧的模板 步骤 1: 在<Head>部分包含Angular Javascript 将下面的代码包含入 <head></head> 中,以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库

  • 使用Raygun来自动追踪AngularJS中的异常

    Angular.js取得的巨大成就之一是实用的异常抛出,因为异常信息经常能够准确的表明你的代码为什么崩溃了.运行于世界各地的众多浏览器的大型客户端web应用会面临异常丢失的问题,而捕获它就有可能修复 bug并赢得用户. 当处理跨浏览器和设备的问题时,接收这些异常信息是很重要的,因为你的应用可能在你的开发机器上运行得正确可靠,但在你的用户的浏览器上却是另一番场景. 其解决方案是需要一个自动异常跟踪服务,而Raygun通过接收你的Angular web应用抛出的所有异常但不需要你做任何事,从而简化了

  • 详解AngularJs中$sce与$sceDelegate上下文转义服务

    一.严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct

  • AngularJS中处理多个promise的方式

    在使用AngularJS中处理promise的时候,有时会碰到需要处理多个promise的情况. 最简单的处理就是每个promise都then.如下: var app = angular.module("app",[]); app.controller("AppCtrl", function($q. $timeout){ var one = $q.defer(); var two = $q.defer(); var three = $q.defer(); $time

  • 浅谈Angularjs中不同类型的双向数据绑定

    Angularjs1.X中两种不同的双向数据绑定 聊聊 Angularjs1.x中那些活见鬼的事情. 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从html流向controller 也就是从 视图层 流向 模型层 ,原生html中需要使用表单元素(例如 input 标签)来收集用户输入信息,Angularjs中通过在表单元素上使用 ng-model

  • 使用AngularJS中的SCE来防止XSS攻击的方法

    使用AngularJS中的SCE来防止XSS攻击的方法

    这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险

  • AngularJS 中的数据源的循环输出

    AngularJS 中的数据源的循环输出 最近也是刚刚接触angular前端框架的,但使用的几天就感觉效果比较明显,尤其是在数据的输出效果上来看,比原生的js的编程效率要高许多,所以这也就是为什么许多公司都要求前端开发需要你熟悉使用前端框架了,可以更快的提高项目的效率.今天想要说的就是在使用angular前端框架的时候的数据源的循环输出. 把数组中的数据循环输出到页面上,如果使用的js的方法的话就是需要对数组进行for循环输出,并且在输出的时候是对页面中的DOM层中的节点进行操作的,而如果使用前

  • AngularJS中scope的绑定策略实例分析

    本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以

  • AngularJS中ng-class用法实例分析

    本文实例讲述了AngularJS中ng-class用法.分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式.重复的类不会添加.当表达式发生变化,先前添加的类会被移除,新类会被添加. 在angular中为我们提供了3种方案: ① 通过数据的双向绑定(不推荐使用) ② 通过对象数组. ③ 通过key/value 一.通过数据双向绑定: function changeClass(){ $scope.className = "chang

  • AngularJS中如何使用$http对MongoLab数据表进行增删改查

    主页面: <button ng-click="loadCourse()">Load Course</button> <button ng-click="toggleAddCourse(true)">Add New Course</button> <ng-includce src="'course_list.html'"></ng-include> <ng-include

  • 收藏AngularJS中最重要的核心功能

    以下是AngularJS中最重要的核心功能如下所述: •数据绑定: 模型和视图组件之间的数据自动同步. •适用范围: 这些对象参考模型.它们充当控制器和视图之间的胶水. •控制器: 这些Javascript函数绑定到特定的范围. •服务: AngularJS配有多个内置服务,例如 $http 可作为一个XMLHttpRequest请求.这些单一对象在应用程序只实例化一次. •过滤器: 从一个数组的条目中选择一个子集,并返回一个新的数组. •指令: 指令是关于DOM元素标记(如元素,属性,CSS等

随机推荐