因为今天老大给说有个需求，要监控生产环境中项目的代码运行状态。翻了几下，找到个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
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，想起那个梗了，
最简单的错误，给一个按钮绑定一个click事件，事件里面调用一个根本不存在的函数。那么肯定会报错。 8. 构建生产环境的代码问：如何说一句话让程序员感到愤怒？ 答：哟，写了一天的bug了，累了吧。
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工作里面看到之前你传上去的文件
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服务
Sentry官网