为网站接入前端异常监控系统 Sentry

2023-11-01

背景

众所周知,现在前端异常监控在实际生产环境中越来越重要了。通过给网站接入前端异常监控系统,我们能获得以下几个好处:

  • 收集页面的错误信息
  • 辅助定位代码错误位置
  • 在用户报障前发现问题

这对于提升线上系统质量,降低线上故障数量,都具有非常重要的意义。相比于等待用户反馈故障,通过接入异常监控系统,能化被动为主动,缩短线上故障处理的流程和时间。

前端异常监控方案

  • badjs
  • fundebug
  • Sentry

目前比较流行的异常监控方案有以上几种,但从易用性、免费与否、以及项目是否开源等方面考虑,个人觉得 Sentry 是个非常不错的选择,服务端部署也非常简单,当然服务端也可以直接使用 Sentry 提供的,网站客户端引入 sentry sdk 并插入初始化 Sentry 的代码就可以实现对页面脚本异常的监控了。

Sentry 部署

安装 Docker
sudo yum remove docker  docker-common docker-selinux docker-engine
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
yum list docker-ce --showduplicates | sort -r
sudo yum install docker-ce
sudo systemctl start docker
sudo systemctl enable docker

Docker 安装 Sentry
  1. 拉取 Sentry 仓库
git clone https://github.com/getsentry/onpremise.git
  1. 创建 Sentry 服务
cd onpremise

新建docker本地数据库

docker volume create --name=sentry-data && 
docker volume create --name=sentry-postgres &&
docker volume create --name=sentry-redis &&
docker volume create --name=sentry-zookeeper &&
docker volume create --name=sentry-kafka &&
docker volume create --name=sentry-clickhouse &&
docker volume create --name=sentry-symbolicator

创建env配置文件

cp -n .env.example .env
COMPOSE_PROJECT_NAME=sentry_onpremise
SENTRY_EVENT_RETENTION_DAYS=90
# You can either use a port number or an IP:PORT combo for SENTRY_BIND
# See https://docs.docker.com/compose/compose-file/#ports for more
SENTRY_BIND=9000
SENTRY_IMAGE=getsentry/sentry:nightly
SNUBA_IMAGE=getsentry/snuba:nightly
RELAY_IMAGE=getsentry/relay:nightly
SYMBOLICATOR_IMAGE=getsentry/symbolicator:nightly
WAL2JSON_VERSION=latest

构建服务

docker-compose build

如果报错“-bash: docker-compose: command not found”,则需要先安装 docker-compose:

yum -y install epel-release
yum -y install python-pip
pip install docker-compose

生成秘钥

docker-compose run --rm web config generate-secret-key
...
Digest: sha256:de277fb0489fa674e28ce44a790840ece63dbacd696c990b95abdf0135ae5283
Status: Downloaded newer image for getsentry/sentry:nightly
4ghk9%xzwzg#e9yv5(w@rabcq626y&n*fygk=tzah%d!*la!1l

最后一行就是生成的秘钥,将生成的秘钥添加到.env 的 SENTRY_SECRET_KEY

COMPOSE_PROJECT_NAME=sentry_onpremise
SENTRY_EVENT_RETENTION_DAYS=90
SENTRY_SECRET_KEY="4ghk9%xzwzg#e9yv5(w@rabcq626y&n*fygk=tzah%d!*la!1l"
# You can either use a port number or an IP:PORT combo for SENTRY_BIND
# See https://docs.docker.com/compose/compose-file/#ports for more
SENTRY_BIND=9000
SENTRY_IMAGE=getsentry/sentry:nightly
SNUBA_IMAGE=getsentry/snuba:nightly
RELAY_IMAGE=getsentry/relay:nightly
SYMBOLICATOR_IMAGE=getsentry/symbolicator:nightly
WAL2JSON_VERSION=latest

创建数据库,创建超级管理员,作为登入sentry的账号,创建过程按提示一步步来

./install.sh

安装完成后,使用以下命令启动所有服务:

docker-compose up -d

然后在浏览器打开:http://服务器ip:9000 就能看到 Sentry 的服务端登录界面了。

image.png

网站端接入 Sentry
<script src="${staticDomain}/statics/lib/sentry/bundle.tracing.min.js?v=1.0" crossorigin="anonymous"></script>
<script>
    Sentry.init({
        dsn: "http://054e5400ae8d407eb8927804f0011e70@192.168.4.60:9000/2",
        // this assumes your build process sets "npm_package_version" in the env
        // release: "my-project-name@" + process.env.npm_package_version,
        integrations: [new Sentry.Integrations.BrowserTracing()],

        // We recommend adjusting this value in production, or using tracesSampler
        // for finer control
        // tracesSampleRate: 1.0,
        release: "0.0.1",
    });
</script>

页面可以写一行测试异常代码,验证 Sentry 能否接收到错误,正常接收的异常上报是这样的
image

到这里虽然能监控到脚本异常错误,但是我们通常发布到生产环境的代码是经过压缩混淆的,如果我们还想要监控到具体是哪一行代码引起的脚本错误,那就还需要上传 sourcemaps 到 Sentry 服务器。

Sentry 上传 sourcemaps

Sentry 上传 sourcemaps 的方式有两种,一种是通过 webpack 插件上传,另一种是通过 sentry cli 上传。两种方式配置都不复杂
,取决于你的项目使用的是什么构建工具,如果你的项目是使用webpack打包的自然是使用webpack插件上传会方便一点,如果是使用 gulp 等其他构建工具的,那就是使用 sentry cli 会方便一点。

  • webpack 插件上传 sourcemaps

安装 @sentry/webpack-plugin 和 clean-webpack-plugin

npm install @sentry/webpack-plugin clean-webpack-plugin -D

获取 authToken

API keys -> Auth Tokens -> Create New Token

在 webpack.config.js 中添加以下代码:

const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  plugins: [
      new SentryWebpackPlugin({
          url: "http://192.168.4.60:9000/",
          authToken: "9d332444a2804384b38cce5d11664294c9eea7a41aea4e71ae2daaa4c9b5bd7f",
          org: "sentry",
          project: "pc-web",
          // 本地 sourcemap 所在目录
          include: ".",
          // js 访问路径,如果使用了cdn,则需要写上完整域名和路径
          urlPrefix: "http://src.test.com/statics/js/dist"
      }),
  ],
};
  • sentry cli 上传 sourcemaps

安装 sentry cli

npm install @sentry/cli@16.7.1 -D

如果安装失败,报如下错误:

Downloading from https://downloads.sentry-cdn.com/sentry-cli/1.67.1/sentry-cli-Windows-x86_64.exe Error: Unable to download sentry-cli binary from https://downloads.sentry-cdn.com/sentry-cli/1.67.1/sentry-cli-Windows-x86_64.exe. Error code: ECONNRESET

可以修改拉取地址为淘宝镜像地址:

npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/

配置代码打包时生成 sourcemaps, 我的项目是基于 gulp 打包的,所以使用 gulp-sourcemaps 插件生成 sourcemaps:

var sourcemaps = require('gulp-sourcemaps');
// 省略其他代码
pump([
    gulp.src(path.join(build_path, paths.optimize + '/' + dir + '/' + versiondir + '/*.js')),
    sourcemaps.init(),
    babel(),
    concat(versiondir + '.js'),
    uglify(),
    sourcemaps.write('./'),
    gulp.dest(distPath)
])
// 省略其他代码

执行构建任务后,就会在 dist 目录同时生成 sourcemap 文件。

上传 Sourcemaps 到 Sentry,先在项目根目录新建一个.sentryclirc文件,代码如下:

[defaults]
url = http://192.168.4.60:9000/
org = sentry
project = pc-web
 
[auth]
token = 9d332444a2804384b38cce5d11664294c9eea7a41aea4e71ae2daaa4c9b5bd7f

然后在生产打包的脚本增加 上传 sourcemaps 的命令:

gulp js --env pro // 生产打包
sentry-cli releases -o sentry -p pc-web new 0.0.1
sentry-cli releases files 0.0.1 upload-sourcemaps statics/js/dist --url-prefix http://src.test.com/statics/js/dist

这里有个要注意的地方,就是 sourcemaps 的版本号(前文示例的 0.0.1)一定要与网站初始化 sentry 时的 release 参数一致,否则 Sentry 监控到报错脚本也无法定位到具体的源码的。

下面看看监控脚本报错的效果:
image

结语

到这里,就完成了网站前端异常监控系统 Sentry 的接入,本文也只是演示了 Sentry 最基本的功能,还有其他比较高级用法计划在后续逐步引入,包括网站 404 页面监控,接口性能监控等等。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为网站接入前端异常监控系统 Sentry 的相关文章

  • Nginx:防盗链原理和配置

    目录 一 防盗链概念 二 Nginx防盗链的具体实现 配置 三 验证和验证时的问题 真正的验证 没有none的验证 加上none参数的验证 让报错返回的是一张图片 注意事项 一 防盗链概念 防盗链简单来说就是存在我们服务中的一些资源 只有我
  • simplis汉化包_Simtrix.simplis仿真_中文教程

    Simetrix Simplis 仿真基础 近 4 年开发电源的过程 在使用仿真软件的过程中 对仿真渐渐有了个了解 仿真不能代替 实验 仿真软件显示电路不能工作 而实际确能工作 仿真不收敛 而实际电路永远不会不 收敛 但是仿真软件可以测试未

随机推荐

  • [webpack-cli] Error: Cannot find module ‘webpack/lib/rules/DescriptionDataMatcherRulePlugin‘

    Laravel8用mix引入vue 但是出现错误 npm install 然后npm run dev 或者是npm run watch poll 出现以下错误 前两个月还没有报错 网上只有其他插件丢失报错 没有这个插件 使用npm 和vue
  • OpenGL ES 2.0编程基础

    http blog csdn net sunqunsunqun article details 7649628http blog csdn net sunqunsunqun article details 7649628 http blog
  • java的double类型比较相等

    当double类型数据当以带小数自增时出现的问题 public class test public static void main String args double a 0 while a lt 100 a 1 2 System ou
  • svn下载以及操作

    目录 第一步下载SVN及SVN汉化包 SVN下载 SVN汉化语言包下载网址 第二步安装SVN及汉化包 使用说明检出项目 导入项目 关于项目的提交 更新 解决冲突有三种选择 如何降低冲突解决的复杂度 查看日志 版本回滚 版本控制 创建分支合并
  • AIX下中文字符集问题

    1 来自IBM网站 http www 01 ibm com support do 82448256d650040768f2 aix中文字符集 如图 3 如何看到已安装的字符集 locale a4 查看当前的语言环境 env grep LAN
  • 关于ubuntu 64位 android studio 运行时,gradle卡住的问题

    主要是因为缺少相关的32位依赖库 可通过一下方法解决 终端输入以下命令 安装完成后 重启as即可 sudo dpkg add architecture i386 sudo apt get update sudo apt get instal
  • mybatis 3.4.5 常用配置标签 02

    1 properties
  • Pycharm 集成python3 的Qt Designer

    第一步 点击 File Settings 第二步 Tools External Tools 点击 号 第三步 设置Qt Designer 修改三个地方 其他地方默认 Name Qt Designer Programs D python3 6
  • 二线制、三线制、四线制,PT100,电桥(转)

    在工业现场 传感器距离控制器往往很长 所以导线电阻就不能忽略了 于是延伸出热敏电阻或远传压力表的二线 三线 四线制接法 li class tool item tool active is like a href a li
  • 15 Python数据可视化_作业

    Author Nimo Ding Seaborn数据集自带了car crashes数据集 这是一个国外车祸的数据集 1 请对这个数据集进行成对关系的探索 2 请用Seaborn画二元变量分布图 scatter kde hex import
  • python中的base64加密解密

    介绍 Base64是网络上最常见的用于传输8Bit 字节码的编码方式之一 Base64就是一种基于64个可打印字符来表示 二进制数据的方法 可查看RFC2045 RFC2049 上面有MIME的详细规范 Base64编码是从二进制到字符的过
  • C语言中的exit与return的区别

    exit 结束当前进程 当前程序 在整个程序中 只要调用 exit 就结束 exit 0 表示进程正常退出 返回 0 exit 1 表示进程非正常退出 返回 1 exit与return的区别 exit 函数与return语句的最大区别在于
  • 【博客689】监控进程的自愿与非自愿上下文切换

    监控进程的自愿与非自愿上下文切换 场景 有时候遇到机器没有性能瓶颈 但是进程出现性能瓶颈 这时候往往需要进程级别的监控 监控手段 process exporter https github com ncabatoff process exp
  • Python工程师常见的30个基础面试题

    一 Python 的特点和优点是什么 Python 是一门动态解释性的强类型定义语言 编写时无需定义变量类型 运行时变量类型强制固定 无需编译 在解释器环境直接运行 优点 1 解释性 Python 语言写的程序 不需要编译成二进制代码 可以
  • 字库制作和烧写

    文章目录 资源获取 一 介绍字库 1 GB2312 2 GBK 二 生成字库 1 打开字库生成软件 2 软件介绍 3 生成bin字库 三 烧录字库 1 打开串口烧录软件 2 配置软件 3 打开字库文件 4 将烧录程序下载到开发板 5 开始烧
  • MacOs 执行命令行报:permission denied:

    当前目录没有可执行权限 解决方案 代表文件目录 sudo chmod R 777
  • docker安装nacos2.0.3并配置mysql

    1 拉取镜像 docker pull nacos nacos server 2 0 3 2 创建数据目录 mkdir p mydata nacos2 0 3 logs mkdir p mydatadata nacos2 0 3 conf 3
  • Java 包(package)

    为了更好地组织类 Java 提供了包机制 用于区别类名的命名空间 包的作用 1 把功能相似或相关的类或接口组织在同一个包中 方便类的查找和使用 2 如同文件夹一样 包也采用了树形目录的存储方式 同一个包中的类名字是不同的 不同的包中的类的名
  • linux安装virtualbox命令,如何在CentOS 7.5上安装VirtualBox

    VirtualBox是一款开源的跨平台虚拟化软件 允许您同时运行多个客户操作系统 虚拟机 在本教程中 我们将向您展示如何从CentOS 7系统上的Oracle存储库安装VirtualBox 前提条件 在继续本教程之前 请确保以具有sudo权
  • 为网站接入前端异常监控系统 Sentry

    背景 众所周知 现在前端异常监控在实际生产环境中越来越重要了 通过给网站接入前端异常监控系统 我们能获得以下几个好处 收集页面的错误信息 辅助定位代码错误位置 在用户报障前发现问题 这对于提升线上系统质量 降低线上故障数量 都具有非常重要的