使用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 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js+css实现select的美化效果
Mar 24 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
使用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
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python3库numpy数组属性的查看方法
2018/04/17 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python简单验证码识别的实现方法
2019/05/10 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
C语言开发工程师测试题
2016/12/20 面试题
县优秀教师事迹材料
2014/01/31 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
个人承诺书格式
2014/06/03 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
家电创业计划书
2019/08/05 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书