Sentry 报错监控

文章目录

1. 1. 在线免费版
2. 2. 安装
3. 3. 插件
4. 4. 录制回放
5. 5. 一些细节处理
   1. 5.1. 自动上报注意跨域问题
   2. 5.2. 手动上报
   3. 5.3. 延时上报处理

在线免费版

• sentry在线免费版每月10k报错量
  • 开源版本可自行搭建
• fundebug在线免费版每月3k报错量

安装

参考资料1, 参考资料2

• at least 2.4GB RAM

  git clone https://github.com/getsentry/onpremise.git
  
  cd onpremise
  
  # 生成密钥 ，生成的结果复制到./sentry/config.yml
  docker-compose run --build --rm web config generate-secret-key
  
  # 会自动docker pull image 和 create volume
  # 假如重装时这些image已经下载过了，可以注释里面的pull逻辑，因为sentry几分钟就更新一次，导致每次都得pull新的image，很慢；
  ./install.sh
  
  docker-compose up -d
  
  # 关闭重装
  docker-compose down -v
  # 根据上面执行后的提示
  docker volume remove 所有external volume

• 访问http://127.0.0.1:9000
• 设置邮箱

  mail.backend: 'smtp'
  mail.host: 'smtp.qq.com'
  mail.port: 587
  mail.username: '547652008@qq.com'
  # 不是qq密码，需要在邮箱设置里生成
  mail.password: 'ikdgfdndpizcdddd'
  mail.use-tls: true
  mail.from: '547652008@qq.com'

• 测试邮件
• 测试客户端报错

插件

• sentry-webpack-plugin: webpack打包后自动上传sourcemap到sentry
• sentry-cli: 更灵活定制sourcemap上传
• 小程序SDK
  • https://github.com/lizhiyao/sentry-miniapp
  • https://github.com/youzan/raven-weapp

录制回放

• https://github.com/rrweb-io/rrweb/blob/master/README.zh_CN.md
• https://logrocket.com/

一些细节处理

参考资料

自动上报注意跨域问题

window.onerror采集错误时，跨域会导致错误信息不足Script Error

• Access-Control-Allow-Origin
• <script src="xxx.com/path/to/x.js" crossorigin></script>

手动上报

一些三方库会内部处理错误且不对外throw，此时需要借助captureException(error, { extra: errorInfo })和三方库的errorHandler手动上报

• vue: config.errorHandler
• react: componentDidCatch
• jquery
• defind
• 异步代码: 拦截代理
  • setTimeout, setInterval
  • promise: unhandledrejection
• 函数: webpack-plugin处理，使用try,catch包裹

延时上报处理

防止同时触发多次接口