Vue生产环境运行状态监控的一次实践-CSDN博客

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

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

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

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

打开Sentry的官网

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

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

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

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

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

project:write
复制代码

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

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

首先全局安装sentry-cli

npm install sentry-cli -g
复制代码

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的项目

vue init webpack sentry-demo
cd sentry-demo
yarn add raven-js
// 这里的raven-js是什么，你可以理解成是Sentry为了支持JavaScript做的SDK
复制代码

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

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. 构建生产环境的代码

yarn build
复制代码

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

9. 上传sourcemap文件

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

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

http://127.0.0.1：6324/static/js
// 支持cdn
复制代码

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

 ./dist/static/js
复制代码

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

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

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。

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

博客地址