因为今天老大给说有个需求,要监控生产环境中项目的代码运行状态。翻了几下,找到个sentry,感觉应该可以满足老大的需求了吧,fundebug没用过。

sentry 是什么?中文翻译过来是 哨兵 的意思,从字面中可以知道 『站岗、放哨、巡逻、稽查的士兵』,不错,Sentry 是程序的 哨兵 ,它可以监控我们在生产环境中项目的运行状态,一旦某段代码运行报错,或者异常,会第一时间把报错的 路由,异常文件,请求方式 等一些非常详细的信息以消息或者邮件给我们,让我们第一时间知道:程序出错了,然后我们可以从 Sentry 给我们的详细的错误信息中瞬间找到我们需要处理的代码。

你如果试用 Sentry 官方提供给你的服务是需要收费的,不过可以免费试用,如果以后觉得好用的话,那再买吧。

好吧,现在来看下如何接入Vue项目配合sourcemap快速在源文件中找到bug的所在位置。

打开Sentry的官网

  1. 注册(登录)->创建团队->创建项目(这些不细讲, 官网对这些步骤的提醒很明确)
  2. 如果英文不好,Sentry的官网是支持中文的。

点击页面右下角的头像,然后弹出一个选择框,选择Account

在这里选择好语言和时区,(时区还是很重要)。点击保存。然后再返回到之前的页面。就可以看见Sentry的Dashboard页面是中文了。 3. 点击新建项目,Sentry是可以支持Vue项目

DSN的官方英文解释 这里的DSN,你就理解成Sentry的给每个项目唯一标识符。它看起来很像一个标准的url,但实际上它只是Sentry的sdks所需配置的表示。它由几个部分组成,包括协议,公钥和密钥,服务器地址和项目标识符。 4. 生成一个token,类似于第二步。但是是点击api

生成时保证勾选了选项中的

1
project:write

最后会生成一个token。 5. 接下来就打开我们之前创建的sentry-demo项目

在这里我们使用的是cli的形式。官网上面的文档其实是支持webpack插件的形式的。暂时不考虑智能,先跑起来就行。那么下次就准备撸个插件出来,cli方式的文档。下次撸个webpack的插件出来吧。(理论上应该早就有这种插件了吧,npm就完事儿了。)

首先全局安装sentry-cli

1
npm install sentry-cli -g

登录sentry

1
sentry-cli login

根据提示,它会叫你复制token。这时你就把第4步生成的token填入进去

创建一个release

sentry-cli releases -o 团队名称 -p 项目名称 new release名称

注意”release名称”, 官方有明确声明, 在上传sourcemap到sentry这种做法下,必须要指定一个release。在这里我们就当发布了我们的项目的第一个版本名叫vue-demo-v1。 然后点开你在sentry中vue项目里面的里面你就会发现存在这个版本号了。

6. 首先是用vue-cli生成一个vue的项目

1
2
3
4
vue init webpack sentry-demo
cd sentry-demo
yarn add raven-js
// 这里的raven-js是什么,你可以理解成是Sentry为了支持JavaScript做的SDK

好的,现在建立了一个Vue最基本的项目。

1
2
3
4
5
6
7
8
import Raven from "raven-js"
import RavenVue from "raven-js/plugins/vue"

Raven.config("你的这个项目的DSN,也就是你第在第二步中生成的DSN", {
release: "你这个项目其中的一个版本,也就是上一步中的vue-demo-v1"
})
.addPlugin(RavenVue, Vue)
.install()

修改main.js 7. 这个时候我们来创造点错误 在App.vue文件里面,写点小bug,想起那个梗了,

问:如何说一句话让程序员感到愤怒? 答:哟,写了一天的bug了,累了吧。

最简单的错误,给一个按钮绑定一个click事件,事件里面调用一个根本不存在的函数。那么肯定会报错。 8. 构建生产环境的代码

1
yarn build

vue 构建出的生成环境的代码是在根目录下面的dist文件下面,(vue-cli是的build指令默认是会生成sourcemap,就是下面的map文件) 9. 上传sourcemap文件

1
sentry-cli releases -o 团队名称 -p 项目名称 files release名称 upload-sourcemaps --url-prefix URL_PREFIX DIR

其中的URL_PREFIX必须你要与js文件访问的路径保持一致, 即:

1
2
http://127.0.0.1:6324/static/js
// 支持cdn

其中的DIR就是你要上传的sourcemap的js文件的位置, 即:

1
./dist/static/js

然后在你的在sentry的vue-demo项目中的vue-demo-v1release工作里面看到之前你传上去的文件

image

10. 然后全局安装一个http服务器,然后再根据刚才生成的静态文件起一个http服务,验证我们是否监控错误成功。

1
2
3
npm i -g http-server 
cd dist
http-server -p 6324

这个时候你打开http://127.0.0.1:6324就能看到刚才我们写的vue项目,然后点击页面上的那个button,果不其然就会报错。这里是因为我们浏览器当你打开调试的时候,默认会去加载sourcemap,Chrome就是这样的,所以你也一样能看到出错的位置的源文件。但是用户不会去打开调试工作台啊。 然后你仔细看你的network面板会发现页面向sentry.io发送了一个请求,里面就详细的记录了你这次报错的信息。 然后你点开看你的sentry的Dashboard,会发现出现了一个错误。

点进去就能看见这个页面。这下子就详细的标记了你写出bug的地方。

同时你的邮箱里面也会受到一封邮件

that’s all。

这是自己写的第一篇文章,高中语文几乎没及格过。欢迎各位大大多多提意见。首先讨论写作技巧,然后再讨论下里面的写错的地方。所以悄悄的给自己的文章加了一个钓鱼的标签。

参考链接

简单而完整地体验一遍sentry的sourcemap服务 官网