10

sentry

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

官网

https://sentry.io

具体接入流程(简单体验, 不使用框架)
  1. 注册(登录)->创建团队->创建项目(这些不细讲, 官网对这些步骤的提醒很明确)

  2. 创建完之后sentry会指引我们怎么在代码层接入clipboard.png
    我这里选择的是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>
  3. 新建一个html文件, 并在head标签内粘贴以上代码, 然后添加一个可以点击的元素:

    <body>
        <button id="container">上报</button>
    </body>
  4. 新建一个test.ts(习惯性问题, 具体新建js/ts自行选择)文件, 简单写一个必然报错的事件:

    (() => {
      window.onload = () => {
        document.getElementById('container').addEventListener('click', e => {
          console.log(window['aaa'].aaa)
        }, false)
      }
    })()
  5. 编译并生成sourcemap(--inlineSources为保证sourcemap内有sourceContent, 如果没有sourceContent, sentry后台会报找不到test.ts的错误, 这个时候需要连同test.ts上传才能正常使用, 使用webpack时请参考):

    tsc test.ts --sourcemap --inlineSources
  6. 由于日常项目中静态资源都放在七牛, 为保证完整性, 也同样手动上传到七牛, 上传后的可访问地址为:

    https://mydomain/assets/test.js
  7. 在html>head标签结束前添加script标签引用tets.js(这里不需要加crossorigin, 使用fundebug不加的话会报错):

    <script src="https://mydomain/assets/tets.js"></script>

    部署html到服务器, 使其可访问

  8. 在sentry中用鼠标点击左下角API生成一个token:

    clipboard.png

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

     project:write
  9. 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的目录下, 这样就不用管有其他文件影响)

  10. 访问刚刚部署的这个html, 点击, 使其上报一次错误, network中会有这样的一个post请求:

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

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

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


jackple
835 声望6 粉丝

热衷于前端学习


21

引用和评论

21 条评论
头像
Cocokoon

https://segmentfault.com/q/10... <- 兄弟,你问的这个问题,最后有思路吗,如果有的吗,麻烦告知一下,谢谢啦!

2017-12-14
jackple(作者)

@Cocokoon @Cocokoon 后面自己写了一个,能维持光标位置,不过效果一般,会闪动

2017-12-14
Cocokoon

@Cocokoon 好吧,因为我搞成cordova的,所以想看看哪个地方可以设置一下,不是很想去动原生的,谢谢你了。
另外本来想直接私信你的,不过注册不满24小时,不能私信,只能在这里问,不好意思。

2017-12-14
头像
540240126

大佬你好,我的sourcemap为啥上传了但是sentry并无作用呀,错误还是压缩后的错误,没有联系起来,所以我觉得是不是路径出了问题。
我的打包后文件夹是这样的
dist
sourcemaps

static
  ...

static

...

然后我把static放到服务器上,再把sourcemap文件夹里面的static上传 --url-prefix 没有填写

2017-12-28
jackple(作者)

@540240126 --url-prefix 没有填写不行, 文章有说明

2017-12-29
540240126

@540240126 还是不行哎,是不是map文件要外网访问的到才行呀

2017-12-31
jackple(作者)

@540240126 不是, 反而是map文件不能被外网访问, 不然sourcemap我传去sentry的意义没了

2018-01-02
头像
Passerby

为啥你的后台是中文的啊

2018-03-02
头像
qianL93

urlPrefix 有没有试过 写成 //mydomain 这种相对协议形式,还是必须要指明协议?

2018-03-06
头像
Fundebug

Fundebug支持发送报警消息到第三方(钉钉、倍洽等)团队聊天工具,并且可以自定义报警规则。当然,Source Map也是支持的啦。还有热心的技术人员为您提供答疑服务。欢迎各位老铁试用!

2018-04-25
苏生不惑

@Fundebug 又看见你在sentry主题下评论,老铁

2018-10-26
2018-10-26
头像
小风哥

亲测有用,赞一个!

2018-08-16
头像
C_rown

为什么我的sentry-cli login 一直报http error: Invalid token (401)

2018-10-10

@C_rown 解决了吗

2022-03-02
头像
VictorCheney

@jackple 大佬请问下,使用sourcemap需要把源文件页传上去吗?

index.js index.js.map 两个文件都得传上去?

2018-12-25