新时代的前端系统上线之后,通常会遇到以下几个问题
前端报错,用户使用功能异常,没有通知开发人员的渠道
了解到报错后,因为前端做代码混淆和压缩,删除 source map,没有办法准确定位错误位置
不清楚用户的操作系统、浏览器、请求内容和存储等信息,无法进行问题复现
上述问题目前有统一的解决方案,就是使用 web bug 埋点追踪系统,目前开源免费好用的系统,就是今天要介绍的 sentry
sentry 的特性
在使用上,sentry 既可以直接在其网站https://sentry.io/
中查看 bug 追踪信息,也支持企业进行内部搭建
在功能上,sentry 支持
发送错误通知
给出客户端相关信息,包括浏览器版本、操作系统和请求内容等
代码版本(release 版本号)
上传代码源文件(source map)
如何使用 sentry
下面将以一个 React 项目为例,讲解如何使用 sentry
1、注册账号并创建项目
访问 sentry 的官网: https://sentry.io/
注册的时候会创建 组织 ,注册完成后新建项目,选择 React 创建即可
创建后会有一个官方指导,该如何使用代码
按照步骤操作即可,其中要注意 dsn 的添加,这个是每个项目特有的,不要放错
其中默认界面是英文的,并且时区不是中国的时区,会有 8 个小时的时差,建议更改过来,更改位置在用户设置的具体项目设置中