头图

Sentry搭建流程(前端vue接入)

一、背景&&作用

  • 异常监控系统
  • 收集异常
  • 收集日志信息;接口时长信息
  • 及时警告;发送邮件
  • 展示统计信息
  • code review成本高;有时候只能发现语法或者代码风格问题;对于逻辑业务问题没有过多的时间深读
  • 兼容性问题不好测试。流程长逻辑复杂并不能100%覆盖到
  • 用户反馈问题不准确;不懂得一些专业术语;沟通成本高导致解决问题效率低

    二、服务器安装Sentry

    2.1 服务器环境要求

  • Docker 19.03.6+
  • Compose 1.28.1+
  • 4 CPU Cores
  • 8 GB RAM
  • 20 GB Free Disk Space
  • Python 3
docker 安装流程 https://docs.docker.com/engine/install/centos/
Compose 安装流程 https://docs.docker.com/compose/install/ (选择linux环境安装)
1. sudo yum install -y yum-utils
2. sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
3. sudo yum install docker-ce docker-ce-cli containerd.io
4. systemctl enable docker && systemctl start docker (启动docker)
5. sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
6. sudo chmod +x /usr/local/bin/docker-compose
7. docker info (成功查看信息)  

2.2 sentry部署

  1. 从 github 上获取 Sentry 最新代码

    git clone https://github.com/getsentry/onpremise.git
    这时候如果遇到超时的情况;可以将包先拉到本地;然后拷到服务器上 scp -r onpremise songxianling@182.92.84.242:/tmp 
    进到/tmp文件夹下找到拷贝的文件
  2. 进入 onpremise ,运行 install.sh 脚本。
    `cd onpremise
    ./install.sh`
  3. 手动运行 docker-compose up -d 以启动 Sentry。
    image.png
    当看到所有的服务都起来了;web也正常了;这时候访问域名对应的9000端口就能看到基础页面了🎉

    2.3 配置邮箱发送

  4. 修改 sentry/config.yml文件配置
    image.png

三、开始使用

3.1 创建项目

image.png
image.png

开启错误控制台;因为这个花费了1h+的时间;和版本有关系;网上其他人也没设置这个也没遇到我的问题
image.png

3.2 编辑配置文件

项目根目录下创建 .sentryclirc文件

[defaults]
project=mars # 创建的项目名称
org=sentry # 组名称
url=http://sentry.jpgk.com.cn/ # sentry服务url

[auth]
token=8e8eea22357843ac9480a2e3ed373ae01659315567914de4b62442d9041287c7 #手动生成的token;具体下图

image.png

3.3 跑起来测试错误

🔨在某个代码中随意制造一个错误信息;然后就能看到;控制台的network处发送了一条请求
image.png

🥚在sentry中就能看到对应的错误收集,面包屑、ajax请求、之前的错误信息等;这些信息都可以为当前这次错误提供上下文信息,重现发生错误的步骤;也能为复现和调试bug提供有效的信息

同时也可以自定义的上下文信息的有:user 用户信息、 tags事件标签信息 、 level 事件严重性错、fingerprint 事件的分组规则、 extra data附加数据。
image.png
image.png

3.4 上传source-map

  • webpack 手动上传 sentry/webpack-plugin(webpack插件)
  • sentry-cli 服务器安装
    网上大部分都是用webpack插件进行上传的方式;这个地方我就不在叙述了
    服务器安装 sentry-cli或者用Jenkins安装之后执行脚本(当前方案)
    Jenkins配置sentry-cli
    先在Jenkins下创建一个*变量* 供cli执行命令的时候使用;防止暴漏token关键信息

image.png
image.png

增加build打包之后的执行脚本;上传到sentry服务器

# 文档 https://docs.sentry.io/product/cli/releases/

curl -sL http://sentry.jpgk.com.cn/get-cli/ | bash || true

export SENTRY_ORG=sentry
export SENTRY_PROJECT=mars
export SENTRY_ENVIRONMENT=test # env环境变量
export SENTRY_RELEASE=v1.0.3 # 和main.js中init里面的版本号要一致对应
# 更新版本信息
/usr/local/bin/sentry-cli releases new -p $SENTRY_PROJECT $SENTRY_RELEASE
# 设置提交信息
/usr/local/bin/sentry-cli releases set-commits $SENTRY_RELEASE --auto --ignore-empty
# 删除所有已上传的文件
/usr/local/bin/sentry-cli releases files $SENTRY_RELEASE delete --all
# 上传sourceMap和打包后的项目文件
/usr/local/bin/sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps ./dist --ignore ./dist/node_modules ./dist/vue.config.js
# 设置发布
/usr/local/bin/sentry-cli releases finalize $SENTRY_RELEASE
# 设置环境信息
/usr/local/bin/sentry-cli releases deploys $SENTRY_RELEASE new -e $SENTRY_ENVIRONMENT

没有上传sourceMap错误如下
image.png

上传sourceMap后可以看到多出来两个「原始的、最小化」标签;同时也能定位到具体代码位置
image.png
image.png

至此;sentry部署基本完成;Sentry是一个开箱即用、兼容性较好、功能强悍、并且生态圈非常完善的监控工具。你值得拥有!! 🐂🍺

四、得到了什么

Sentry不是传统日志、监控系统的替代品;它更专注于「应用的异常信息」;从而让我们更快更方便的发现问题、定位问题、解决问题;减少影响面、给优化提供方向;相同的问题进行合并;丰富的数据体现影响数量;同时提供issue的时间流;可以设置状态跟进人;性能指标提供有力的数据支撑
  • 前端【使用前】运行到用户端客户端;除资源请求异常;其他的均无法追踪;出现无法复现。的问题只能依靠用户的反复回馈;效率低、复现难度大
  • 前端【使用后】 用户端客户端任何异常都可以上报;同时得到影响人数影响面;还能主动的触发一些上报(比如废弃的功能);有用户操作的上下文;有迹可循的复现问题;部分不影响使用的也能监控到;可以优化用户体验

Tips

  • 遇到docker-compose启动不起来的时候;查看版本是否是最新的;sentry要求是1.28版本以上;我安装的时候命令是1.29+;却安装出来一个1.18+的版本
  • 遇到自己执行 ./.install.sh 不可以的时候;可以让运维帮忙执行;是因为环境变量问题;而且暂时配置不了;整个安装过程可能20min左右;也有可能遇到安装不成功的时候;看运气;毕竟有墙
  • 遇到sourcemap上传成功了;依然不能定位到具体代码的(warning: could not determine a source map reference (Could not auto-detect referenced sourcemap);可以将vue的devtool修改为'source-map'打开;困扰时间最久的问题
  • 未出现「测试邮件」可以参考 【Sentry运维】基于Docker安装的Sentry配置邮箱_MacwinWin的博客-CSDN博客

当你不知道该选择哪条路的时候;可能你已经走了好一阵子了~

1.3k 声望
3.6k 粉丝
0 条评论
推荐阅读
Vue3项目配置 eslint + prettier
初衷: 在没有固定的项目模版之前;每次新建项目之后配置代码风格都需要来回粘贴;并且有时候粘贴了也不生效;故总结成文档;方便之后直接使用介绍ESLint 是JavaScript和JSX检查工具prettier 代码格式化工具安装依...

songxianling19924阅读 784

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木141阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图

当你不知道该选择哪条路的时候;可能你已经走了好一阵子了~

1.3k 声望
3.6k 粉丝
宣传栏