基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...
背景
在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视。
所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测、QA测试、code review 等,以确保
应用能在生产上没有事故。
但是事以愿违,很多时候我们都会接受的客户的一些线上问题,这些问题有时候可能你是自己开发的原因本身存
在的问题,这样的问题一般能够在测试环境重现,我们很快的能定位到问题关键位置。但是,很多时候有一些问题,
我们在测试中并未发现,可是在线上却有部分人出现了,问题确确实实存在的,这个时候我们测试环境又不能重现,
还有一些偶现的生产的偶现问题,这些都是难以定位到问题的原因,让我们前端工程师头疼不已。
这时候,我们不得不借助一些功能来解决这一些列的头疼问题。
前端错误监控日志系统
当前端代码在生产运行中出现错误的时候,第一时间传递给监控系统,从而第一时间定位并且解决问题。
保证前端代码的稳定和安全,是项目可以健康的运行。
监控系统搭建方案
1、自行可以规划定义一套完善的监控系统。需要人力重新开发
2、借助第三方插件( 阿里ARMS、fundebug、BadJS,sentry 等 )
阿里ARMS :是阿里的一个前端数据监控的服务,似乎是收费的
fundebug :挺完善的前端错误日志服务,也是收费的
BadJS :腾讯团队的一个开源项目,没看过,应该很不错的
sentry :github 上面的一个开源项目,支持各端的错误监控 ( 本文就是基于 sentry 搭建的错误监控系统 )
系统的搭建与使用
sentry 简介
sentry 是一个开源的实时错误监控的项目,它支持很多端的配置,包括 web 前端、服务器端、移动端及其游戏端。
支持各种语言,例如 python、oc、java、node、javascript 等。也可以应用到各种不同的框架上面,如前端框架中的
vue 、angular 、react 等最流行的前端框架。
提供了github、slack、trello 的常见的开发工具的集成。可以自己安装并且搭建 sentry 应用。
支持的语言:
sentry 的部署
官网提供了两种部署方案:
docker
python
docker 是我第一次使用,看了下文档,感觉挺容易明白。
在这里为了操作方便考虑,我们选择使用docker来部署搭建 sentry。
这种方法的话需要安装 docker 和 docker - compose 。
1、docker 的部署 (mac版)
安装的话,可以直接去看看 docker 安装文档
docker 安装
mac 版的安装,docker-compose 已经一起安装好了。
2、部署 sentry
获取 sentry 代码
从 github 上面可以获取到最新的 sentry 代码
1
|
git clone https: //github.com/getsentry/onpremise.git
|
获取到本地之后,进入项目的目录。
按照项目的 readme.md 开始依照步骤搭建。
1
|
docker-compose run --rm web config generate-secret-key
|
这里是生产密钥,SENTRY_SECRET_KEY 这个需要添加到 docker-compose.yml 中。
最后一步:
1
|
docker-compose up -d
|
至此,我们监控系统的后端服务器已经跑起来了,访问本地的9000端口。
使用中途创建的 邮箱和密码登陆 我们的服务后端。
3、创建项目
登陆后我们会进入我们的监控项目的界面,如:
点击右上角的 add new project ,我们可以创建一个新的项目
这里可以选择项目的配置,语言以及框架,选择自己的项目类型
输入项目名称,点击 create project 。确定创建新项目。
点击红框框的,创建一个简单的日志。
错误信息页面,可以自行到官网上面去了解更多信息。
4、前端部署,注入监控代码
获取项目的链接:
在项目的首页点击 install 会进入当前图示页面
我们复制 sentry DSN 到我们前端配置中
引用 sentry ,注入配置到我们的应用中:
这里是以 react 为例,我们在 react 的根组建的 componentDidCatch 上面捕获错误,并且上传到我们监控系统中。
这里的我们用 sentry DSN 配置我们的 sentry 并且初始化 sentry 项目。
到这里我们基本,已经完成了我们的前端错误监控日志系统了。
sentry 操作界面介绍
项目操作页面:
1、项目的查看选项
Issue : 问题列表
overview : 概况纵览
userfeedback : 用户反馈
Resleases : 版本列表信息
setting : 项目设置
2、问题筛选
包括 : 指派自己的 、 标记列表 、需要分类的 、 今天的 、 未处理的
设置为 解决 、 忽略 、 合并 、标记 、实时监控
sentry 的api介绍和使用
1、javascript SDK 引用与配置
现在有两种方法引用 sentry SDK :
直接引用:
最快的方法就是通过 script 标签引用我们的 sdk
1
|
<script src= "https://browser.sentry-cdn.com/4.4.1/bundle.min.js" crossorigin= "anonymous" ></script>
|
然后就是配置了。
1
|
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>'
|
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题...相关推荐
- 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题 背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视 ...
- 京东如何建设基于云原生架构的监控 - 日志系统?
在这个人人都谈"云原生"的时代,企业在建设内部相关系统时常常会优先考虑云原生架构.那么,云原生架构的系统与传统架构系统有什么不同?又该如何建设呢?本文我们邀请京东架构师韩超老师分享 ...
- 搭建前端错误监控系统
当我们完成一个业务系统的上线时,总是要观察线上的运行情况,查看日志发现问题并进行优化迭代. 因为测试永远无法做到100%覆盖,用户也不会总是按照我们所预期的进行操作,因此我们需要在系统异常时主动对其进 ...
- 前端错误监控与错误日志
平时工作中没怎么接触到这部分,对它的了解也零零碎碎的.今天看了几篇文章,算是有个完整的认识了,在这里总结记录一下. 项目上线之后肯定无法避免所有的bug,有些bug出现后开发人员并不知道,有的知道了缺 ...
- 计算机毕业设计ssm基于Andriod的剪纸艺术平台3swaq系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于Andriod的剪纸艺术平台3swaq系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于Andriod的剪纸艺术平台3swaq系统+程序+源码+lw+远程部署 本源码技 ...
- 计算机毕业设计ssm基于B_S的汽车售后服务管理系统e48c4系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于B_S的汽车售后服务管理系统e48c4系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于B 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开发软件:id ...
- 计算机毕业设计ssm基于SSM框架的股票交易系统3cwg3系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于SSM框架的股票交易系统3cwg3系统+程序+源码+lw+远程部署 计算机毕业设计ssm基于SSM框架的股票交易系统3cwg3系统+程序+源码+lw+远程部署 本源码技术栈: ...
- 基于JAVA婚纱摄影管理计算机毕业设计源码+系统+mysql数据库+lw文档+部署
基于JAVA婚纱摄影管理计算机毕业设计源码+系统+mysql数据库+lw文档+部署 基于JAVA婚纱摄影管理计算机毕业设计源码+系统+mysql数据库+lw文档+部署 本源码技术栈: 项目架构:B/S ...
- 使用python监控NTP系统(时钟服务器)
使用python监控NTP系统(时钟服务器) 背景 需求 设计 实现 背景 背景很简单,内部NTP系统出现故障,时间不准确,且误差很大. 需求 监控NTP系统运行状态,与正确时间进行对比,并计算偏差值 ...
最新文章
- idea中的pom文件中的jar包下载不了,手动下载jar包的方法
- 题目1104:整除问题
- 吴裕雄 python 机器学习——数据预处理标准化StandardScaler模型
- phpstudy如何升级php,phpstudy如何升级phpmyadmin?
- python变量定义大全_详解python变量与数据类型
- 有关于iphone 音频 录制 播发
- 机械考计算机三级,机器人等级考试三级知识点汇总-20210706222922.pdf-原创力文档...
- securecrt 多窗口运行相同命令
- Jenkins 集成Ansible教程
- 安卓6.0的闹钟问题及解决
- 计算机精品在线开放课程申报书,精品在线开放课程申报书.doc
- 软件架构师的12项修炼4
- 西门子数控系统变量刀补输入——使用$TC_DP函数
- 计算机怎么看事件管理,如何打开事件查看器 win7事件查看器打开及使用方法介绍...
- 阿里P8大牛匠心独运,用图解的方式让繁杂的计算机网络一目了然
- ssdt函数索引号_shadow ssdt 服务表函数索引
- 什么叫无差别伤害_无差别伤害背后的差别
- 免费小说阅读器(Android版本)全站开源
- 大白菜U盘重装win7系统教程,PE重装win7系统教程
- Node.js:fs文件模块的替代品fs-extra
热门文章
- 项目——迁移/home分区
- python绘制折线图怎么样填充空白颜色_Python:填补两幅图之间的空白
- 嵌入式软件常见笔试面试题总结 .
- #ifndef #define #endif ”防止头文件被重复包 .
- java中序列化的serialVersionUID解释
- oracle大批量数据统计,加速Oracle大批量数据处理的2个好用方案
- android分辨率hdpi,Android资源 - 哪些分辨率应该进入hdpi,ldpi,mdpi和xhdpi目录
- php oracle 锁表,频繁使用的一张表经常好被锁死?怎样处理!
- vba动态二维数组_VBA实战技巧05: 动态调整数组以存储所需数据
- gulp html 压缩,gulp-gzip压缩