使用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 相关文章推荐
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
vue使用openlayers实现移动点动画
Sep 24 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+javascript液晶时钟
2006/10/09 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jsTree使用记录实例
2016/12/01 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python post请求实现代码实例
2020/02/28 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
委托书样本
2014/04/02 职场文书
小学运动会演讲稿
2014/08/25 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
离婚上诉状范文
2015/05/23 职场文书
讲座新闻稿
2015/07/18 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
人民币符号
2022/02/17 杂记
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS