共计 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
- 拉取 Sentry 仓库
git clone https://github.com/getsentry/onpremise.git- 创立 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 .envCOMPOSE_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 页面监控，接口性能监控等等。