关于javascript:为网站接入前端异常监控系统-Sentry

49次阅读

共计 5304 个字符，预计需要花费 14 分钟才能阅读完成。

背景

家喻户晓，当初前端异样监控在理论生产环境中越来越重要了。通过给网站接入前端异样监控零碎，咱们能取得以下几个益处：

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

这对于晋升线上零碎品质，升高线上故障数量，都具备十分重要的意义。相比于期待用户反馈故障，通过接入异样监控零碎，能化被动为被动，缩短线上故障解决的流程和工夫。

<!–more–>

前端异样监控计划

  • 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 的服务端登录界面了。

网站端接入 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 是否接管到谬误，失常接管的异样上报是这样的

到这里尽管能监控到脚本异样谬误，然而咱们通常公布到生产环境的代码是通过压缩混同的，如果咱们还想要监控到具体是哪一行代码引起的脚本谬误，那就还须要上传 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 监控到报错脚本也无奈定位到具体的源码的。

上面看看监控脚本报错的成果：

结语

到这里，就实现了网站前端异样监控零碎 Sentry 的接入，本文也只是演示了 Sentry 最根本的性能，还有其余比拟高级用法打算在后续逐渐引入，包含网站 404 页面监控，接口性能监控等等。

正文完
javascript
发表至： javascript
2021-07-10
 0
React 16 升级总结
关于javascript:Vuev2614源码解毒一准备工作
使用vue2+Axios遇到的一些坑
JavaScript数组学习记录_11