使用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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 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
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
销售业务员岗位职责
2014/01/29 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
公司经理任命书
2014/06/05 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
安全责任协议书范本
2016/03/23 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
Java使用HttpClient实现文件下载
2022/08/14 Java/Android