基于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 安装文档
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>' |
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
java学习路线图(2018年最新版)
java学习路线图(2018年最新版) 最近有些网友问我如何自学 Java 后端,还有些是想从别的方向想转过来,但都不太了解 Java 后端究竟需要学什么,究竟要从哪里学起,哪些是主流的 Java 后端技术等等,导致想学,但又很迷茫,不知从何下手。我就以过来人的经历,写在这篇博客里,不一定都对,但都是我根据自己的经历总结出来的,供你们的参考。 Java 基础 Java 是一门纯粹的面向对象的编程语言,所以除了基础语法之外,必须得弄懂它的 oop 特性:封装、继承、多态。此外还有泛型、反射的特性,很多框架的技术都依赖它,比如 Spring 核心的 Ioc 和 AOP,都用到了反射,而且 Java 自身的动态代理也是利用反射实现的。此外还有 Java 一些标准库也是非常常见,比如集合、I/O、并发,几乎在 Web 开发中无处不在,也是面试经常会被问到的,所以在自学 Java 后端之前,不妨先打好这些基础,另外还有 Java8 的一些新特性,也要重点关注,比如 Lambda 表达式、集合的 Stream 流操作、全新的 Date API 等等,关于新特性,我也写了几篇关于这方面的博客,请自行...
- 下一篇
CICD从Gitlab到Coderun
背景 我们是一个10人小团队,因为本人之前接触过Docker和Drone,所有项目开发阶段开始的时候就确定使用CICD和Docker的方式进行开发与部署。前期为了方便我们直接使用Gitlab.com(不是私有部署)进行代码仓库的存储于Gitlab CI进行构建,然后通过Gitlab Runner部署到阿里云的开发服务器上。 没有自己部署Gitlab的原因是不想去管理Gitlab,比如保证Gitlab的可用,数据安全等,对于我们这样的小团队减少自己部署产品可以节省不少时间和精力,而且Gitlab.com也基本是免费的。 前期因为产品开发阶段所以我们只考虑了直接在服务器上通过Gitlab Runner部署开发环境和测试环境。但近期在准备产品的上线,我们需要将镜像推送到阿里云的Kubernetes(我们是使用托管版)上进行部署。在准备使用Gitlab CI部署时发现阿里云K8s(托管版)不支持token连接。后来与阿里云相关工作人员联系后告知可以通过service和endpoint间接通过token访问k8s api。这种方式kubectl可以使用,但是配置到Gitlab.com上依然无效。...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Hadoop3单机部署,实现最简伪集群
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果