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

fsmStudy 发布于2019-08-21 17:41 / 3018人阅读

摘要：是一个日志平台支持多种语言多种框架在接入的同时也接入了国内的相对而言的服务会比较完善比如上报控制的如果自行搭建可以忽略支持自行搭建服务当然了也很感谢的技术人员耐心为我解答了几个问题官网具体接入流程简单体验不使用框架注册登录创建团队创建

sentry

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

官网

https://sentry.io

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

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

新建一个html文件, 并在head标签内粘贴以上代码, 然后添加一个可以点击的元素:

新建一个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不加的话会报错):

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

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

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

 project:write

sentry-cli上传sourcemap(注意下载时不要过新的node版本, 当时用9.2.0报错, 切回到6.11.1正常下载):

sudo npm install sentry-cli-binary -g

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没有被用户访问到

云服务器 GPU云服务器对阿里云服务器频繁访问而被屏蔽的情况只删除小米云服务器的视频而不删除本机视频 sourcemap Sentry

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89866.html

Sentry前端部署拓展篇（sourcemap关联、issue关联、release控制）

摘要：本地应用回到前端项目中，在添加对应的，指定版本后，每次上报的异常就会分类到该版本下。管理目前来说，前端项目基本都会压缩混淆代码，这样导致捕捉到的异常堆栈无法理解。下篇打算写一下前端异常监控的分类，也就是需要监控哪些异常，敬请期待原文首发于我的个人博客： https://lonhon.top/ 之前的《基础篇》主要介绍了Sentry和基本部署流程，在实际使用过程中你会发现Sentr...

Bamboy 2019-08-26 11:52 评论0 收藏0
Sentry异常监控方案部署-前端攻略

摘要：故而，我们需要在项目出现异常时主动对其进行收集上报，分析原因和影响后制定下一步解决方案。所以，我们需要一款成熟的异常监控系统来协助我们。最近在公司项目中部署了，用于项目中异常监控，涵盖了前端后端。原文首发于我的个人博客： https://lonhon.top/ 凡事只要有可能出错,那就一定会出错对于任何一个项目而言，本地测试肯定做不到100%覆盖，而且，我们也不能保证用户能按照我们...

Lorry_Lu 2019-08-22 16:31 评论0 收藏0
JS错误监控总结

摘要：前言做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。一个变通方案是单独处理，告知错误详情仅能通过浏览器控制台查看，无法通过访问。前言做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。目前开源的比较好的前端监控有 https://docs.sentry.io/ 那前端监控是怎么实现的呢？要想了解这个，需要知道前端错误大概分为哪些以及如...

wqj97 2019-08-26 11:51 评论0 收藏0
高效利用Sentry追踪日志发现问题

摘要：对我们来说最大的便利就是利用日志进行错误发现和排查的效率变高了。面临的问题程序运行的日志是一个必不可少的东西，可能是一些系统信息，比如 gc 的情况；可能是一些正常的模块处理信息，比如最近更新的配置；还可能是一些在程序运行中，我们不希望出现的错误所带来的信息。通过日志，可以知道我们的程序是不是在正常地运行，看到错误日志，我们还需要利用日志排查错误。我们知道日志如此重要，并乐于记录...

icyfire 2019-07-25 11:14 评论0 收藏0