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


Posted in Javascript onJune 23, 2015

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天免费的无信用卡支付的版本可用, 因此你可以获取一个来看看你的应用是否真的是在为你的用户运作的. 如果就本文你有任何的疑问,请将它们留在下面的评论中。

Javascript 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 #Javascript
浅谈setTimeout 与 setInterval
Jun 23 #Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 #Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
You might like
javascript 类方法定义还是有点区别
2009/04/15 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python分割和拼接字符串
2013/11/01 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python 类的特殊成员解析
2018/06/20 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
社区党员先进事迹
2014/01/22 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
餐馆开业致辞
2015/08/01 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android