vue项目错误日志收集--sentry 爬坑

sentry能够记录报错日志，定位错误位置，对于辅助快速定位线上问题有很大的帮助，话不多说，申请个服务器（centOs，内存 > 3.2G），开始爬坑

准备环境，下载docker

管理员更新并安装docker：

sudo su -
yum update
yum install docker
service docker start

配套docker-compose

curl -L "https://github.com/docker/compose/releases/download/1.23.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

 Tip：centos python版本是2.7 注意更新

拉取onpremise，进入目录，执行，

sh -x  ./install.sh

 中间需要添加管理者账号

配置.env (主要是加入邮箱推送，爬坑)

SENTRY_SERVER_EMAIL=xxxx

SENTRY_EMAIL_HOST=emailhost

SENTRY_EMAIL_PORT=587（腾讯企业邮箱485是个坑）

SENTRY_EMAIL_USER=xxxx

SENTRY_EMAIL_PASSWORD=xxxx

tip: 这种方式需要注释docker-compose.yml中env的smtp，当然也可以直接更改config.yml中的配置

配置到此完成了，启动服务

docker-compose up -d

启动完毕网页访问服务器的9000端口，能够看到sentry后台，登录进去，查看邮箱配置，检查邮件是否能够正常发出

 当然还要配置https，nginx走起

拉取nginx

docker pull nginx

增加docker services

nginx:  restart: always  image: nginx  ports:    - 80:80    - 8080:8080    - 443:443  volumes:    - ./nginx/conf.d:/etc/nginx/conf.d    - ./nginx/log:/var/log/nginx    - /root/onpremise/crt:/www/crt

 配置nginx conf

vim nginx/conf.d/sentry.conf：

server {  listen 443 ssl;  server_name xxx.xxx.com;


  ssl_certificate /www/crt/xx.crt;  ssl_certificate_key /www/crt/xx.key;  keepalive_timeout 3600;  client_max_body_size 200m;  client_body_buffer_size 128k;  proxy_connect_timeout 6000;  proxy_read_timeout 600;  proxy_send_timeout 6000;  # proxy_buffer_size 2M;  # proxy_buffers 8 1M;  # proxy_busy_buffers_size 2M;  # proxy_temp_file_write_size 4M;  # proxy_buffering off;
  ##### ##### ##### ##### ##### ##### ##### ##### ##### ##### ##### #####  proxy_buffer_size 64k;  proxy_buffers 4 64k;  proxy_busy_buffers_size 64k;  proxy_temp_file_write_size 64k; location / {   proxy_set_header X-Real-IP $remote_addr;   # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   proxy_set_header X-Forwarded-Proto $scheme;   proxy_set_header Host $host;   proxy_connect_timeout 180;   proxy_pass http://xx.xx.xxx.xx:9000/; }}server {  listen 80;  server_name xx.xx.com;  rewrite ^/(.*)$ https://xx.xx.com/$1 permanent;  #return 301 https://xx.xx.com$request_uri;}

nginx也是弱鸡，中间也是因为sourceMap老是上传不了踩坑不少, 最好参照官网配置， 传送门

重启下docker，把nginx跑起来， ok，https就配置完毕了。

前戏完成，该项目错误收集上报了～ 官网传送门

1.sentry后台创建vue项目

2.vue项目依赖安装

npm i @sentry/browser  @sentry/integrations

入口文件配置收集代码（需要vue的production mode， 不是使用vue-cli搭建的项目此处注意爬坑）

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'https://<key>@xx.xx.com/<project>', // 查看sentry后台项目指引安装
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
  // release: process.env.gitHEAD //如果需要上传git的版本号
});

此时打包上传的代码报错就能收集到了。但是上线的代码都是经过混淆压缩的，报错只能看到压缩的代码，定位问题依然是个困难～OK，sourceMap的作用来了

3. 上传sourceMap，官网传送门

安装sentry-webpack 插件 （官网也有通过命令行手动上传的例子）

npm i --save-dev @sentry/webpack-plugin

配置vue.config.js

const execa = require('execa')process.env.gitHEAD = execa.sync('git', ['rev-parse', 'HEAD'], { cwd: './' }).stdout.toString().trim() // git 提交版本
chainWebpack: config => {        if (process.env.NODE_ENV === 'production') {            config.plugin('sentry').use(SentryCliPlugin, [{                include: './dist/', // 主要上传打包的文件                ignoreFile: '.sentrycliignore', // 忽略文件                ignore: ['node_modules', 'webpack.config.js'],                configFile: './.sentryclirc', 
                 release: process.env.gitHEAD          }])      } }

配置.sentryclirc文件

[defaults]
url= https://xx.xx.com/ # sentry后台地址
project=xx # vue项目名
org=sentry # 组织名

[auth]
token=xxxxx # api key

配置完成，可以写个错误代码，打包上传，可以看到打包过程中增加了上传sourceMap的过程。访问我们的打包资源，此时进入后台就能看到我们的报错了。定位一目了然，还有其他的一些用户信息，完事～

（第一次写文章，亲喷）