04月06, 2017

浅聊前端异常监控

先放几篇干货文章吧:

上面文中,我抽取两个比较重要的东西,来详细说说。

  • js跨域,得不到具体的错误信息
  • js被压缩成一行,没办法得到知道到底是在哪一行出错了

js跨域,导致得不到错误信息

html放在一个域下面,js等其他静态文件放在cdn上。window.onerror写在html中,这样一来只能得到Script error

解决手段:

将js文件的Access-Control-Allow-Origin设置为"*"  && 在script标签中加入crossorigin属性

前者如果是用nginx的话,可以简单配置如下:

location / {
     root /Users/**;
     index  index.html index.htm;
     add_header "Access-Control-Allow-Origin" "*";
}

这里我偷了一个懒,对所有的文件都加上了头。得到的结果如下:

header cross

js被压缩成一行的问题

我们都知道sourceMap这个玩意,可以通过它来调试原有代码。

这里说一下简单的生成souceMap文件的方式:

uglifyjs --source-map 最终生成的map名称 --output 压缩文件名称 原文件名称

uglifyjs是全局安装的模块,这里map名称建议后缀为json(其实它生成的就是json文件),后面会说到原因。

一般线上是不会有sourceMap的,因为之前知乎有暴露sourceMap,结果被人扒了代码。所以当线上的js报错时,我们能得到的,只能是行和列。

截图如下:

line and cloumn

github上有一个项目,可以通过行和列来定位到源文件的真实行数。代码如下:

var sourceMap = require("source-map");
var mapData = require("./test2.json");
var consumer = new sourceMap.SourceMapConsumer(mapData);
var numInfo = consumer.originalPositionFor({ line: 1, column: 102 })
console.log(numInfo)

注意,这个test2.json就是map文件。因为require会将map后缀识别为text文本,所以后缀必须是"json"。

得到的结果如下:

{ source: "test2.js", line: 7, column: 4, name: "a" }

问题

以上说的都是些比较简单的demo。在webpack的年代,拆分成n个模块,然后处理起来,肯定会麻烦一些的。

因此,我试图找一个工具,知乎上有人推荐sentry

因为mac自带python,所以手贱地去搭了一个本地环境,找了很多资料,拼凑着看,查了N个资料,在stackoverflow的帮助下,终于搭建成功,过程省略。

sentry run web

启动服务后,打开localhost:9000,便可以看到登录界面,随后登录,新建一个project。

根据它提供的配置,我在自己的html中加入下面两段代码:

<script src="https://cdn.ravenjs.com/3.12.0/raven.min.js"></script>
<script>
    Raven.config("http://9c8f5205384e4a0f957b2dce78af29a6@localhost:9000/2").install()
</script>

可是测试了,发现根本没有event触发。随后测试了一下线上的,发现可以跑通。。要知道我的内心是相当崩溃的,于是提了一个issue

早上过来一看,发现该作者也是蛮犀利的,哎~还是得靠自己。。可能早上脑子清醒了一些,猛然发现top处提示:

Background workers haven"t checked in recently.

于是google搜索,终于让我找到了:Background workers haven't checked in recently.

随后,在iTerm启动 sentry run worker and sentry run cron。终于监听成功,截图如下:

sentry page

当然,这个只是一小步而已,后面还有很多的功能,我还没尝试。比如说map的功能等。

等尝试了再来反馈吧。。

本文链接:www.my-fe.pub/post/talk-fe-watching-error.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。