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

sentry

Sentry是一个日志平台, 支持多种语言多种框架, 在接入sentry的同时, 也接入了国内的fundebug, 相对而言, sentry的服务会比较完善, 比如上报控制, cross-original, 40M的sourcemap(如果自行搭建可以忽略), 支持自行搭建服务.... 当然了, 也很感谢fundebug的技术人员耐心为我解答了几个问题

官网

https://sentry.io

具体接入流程(简单体验, 不使用框架)

创建完之后sentry会指引我们怎么在代码层接入
我这里选择的是Vue,由于只是简单体验, 这里我不使用Vue, copy其中的:

<script src="https://cdn.ravenjs.com/3.20.0/vue/raven.min.js" crossorigin="anonymous"></script>
<script>
    Raven.config('https://xxxxxxxxxxxxx').install();
</script>

新建一个html文件, 并在head标签内粘贴以上代码, 然后添加一个可以点击的元素:
```
<body>
    <button id="container">上报</button>
</body>
```

新建一个test.ts(习惯性问题, 具体新建js/ts自行选择)文件, 简单写一个必然报错的事件:

(() => {
  window.onload = () => {
    document.getElementById('container').addEventListener('click', e => {
      console.log(window['aaa'].aaa)
    }, false)
  }
})()

编译并生成sourcemap(--inlineSources为保证sourcemap内有sourceContent, 如果没有sourceContent, sentry后台会报找不到test.ts的错误, 这个时候需要连同test.ts上传才能正常使用, 使用webpack时请参考):
```
tsc test.ts --sourcemap --inlineSources
```
由于日常项目中静态资源都放在七牛, 为保证完整性, 也同样手动上传到七牛, 上传后的可访问地址为:
```
https://mydomain/assets/test.js
```
在html>head标签结束前添加script标签引用tets.js(这里不需要加crossorigin, 使用fundebug不加的话会报错):
```
<script src="https://mydomain/assets/tets.js"></script>
```
部署html到服务器, 使其可访问
在sentry中用鼠标点击左下角API生成一个token:

生成时保证勾选了选项中的
```
 project:write
```
sentry-cli上传sourcemap(注意下载时不要过新的node版本, 当时用9.2.0报错, 切回到6.11.1正常下载):
```
sudo npm install sentry-cli-binary -g
```
登录(这样要使用到上面生成的token):
```
sentry-cli login
```
创建一个release
```
sentry-cli releases -o 团队名称 -p 项目名称 new release名称
```
注意"release名称"这个东东, 官方有明确声明, 在上传sourcemap到sentry这种做法下, 必须要在Raven初始化时匹配上release, 否则会sentry后台接收到错误上报之后会报找不到该sourcemap的错误, 所以, 需要修改script标签中的Raven.config为:
```
Raven.config('https://xxxxxxxxxxxxx', {
    release: 'release名称'
}).install();
```
上传
```
sentry-cli releases -o 团队名称 -p 项目名称 files release名称 upload-sourcemaps --url-prefix URL_PREFIX DIR
```
其中的URL_PREFIX必须你要与js文件访问的路径保持一致, 即:
```
https://mydomain/assets
```
DIR为你的本地sourcemap目录(我个人做法是把sourcemap提取到一个名为sourcemaps的目录下, 这样就不用管有其他文件影响)
访问刚刚部署的这个html, 点击, 使其上报一次错误, network中会有这样的一个post请求:

sentry控制台上会出现一个Unresolved Issues, 点击查看详细

sentry会根据sourcemap的内容去解析出这一个错误的位置

11.访问https://mydomain/assets/tets.... 确认我们的sourcemap没有被用户访问到

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

sentry

官网

具体接入流程(简单体验, 不使用框架)

jackple

引用和评论

一次TypeScript, React, Node, MongoDB的模板式前后端分离开发实践

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具