SENTRY异常监控系统搭建-Docker

前端部署到线上环境后，异常信息，报错情况，不是必现的情况这就很麻烦了，这里推荐一个sentry监控系统，这个还是挺牛逼的！
看看使用效果，以WEB项目的VUE为例

这是人为的两个报错，浏览器上的调试工具上打印的，

这是sentry监控到的异常信息！！！我这里也就只简单介绍，因为详细的我不会！！！
环境准备！

1. linux系统
2. docker
3. vue项目

系统搭建

1 docker拉取redis postsql 和sentry

docker pull redis

docker pull postgres 

docker pull sentry

2.启动redis postsql 和sentry

docker run -d --name sentry-redis redis 

docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry postgres 

docker run --rm sentry config generate-secret-key//这个命令运行后会生成一串密钥

docker run -it --rm -e SENTRY_SECRET_KEY='密钥' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade
//（这一步会提示输入邮箱和密码，当然后又确认密码咯）


docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='密钥' --link sentry-redis:redis --link sentry-postgres:postgres sentry

docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='密钥' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron 

docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='密钥' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker 

走到这里监控端就安装完毕了
访问这个控制台http://服务器地址:9000/回车即可
创建监控项目

使用刚才的邮箱密码登入

创建监控项目，右上角Add new…选择Project

选择你要监控的项目类型，我这里是WEB项目所以选择Browser的vue

然后点击Create Project，然后就会出现在Projects界面

点击进入到这个界面，这几个红框框是关键

VUE项目配置

打开事先准备好的vue项目，命令行输入上图中第一个红框中的命令

npm install @sentry/browser

然后等待安装完成后输入第二个框中的命令

npm install @sentry/integrations

打开main.js将第三个红框中的代码复制粘贴一下

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

Sentry.init({
  dsn: 'http://af7165b961fc44ec857be0c3234b4e34@192.168.0.177:9000/1',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

这里注意如果main中有import Vue from ‘vue’，请不要重复导入
这里需要在第三个红框代码中加入这行代码

   logError:true,
   release:'pro@1.0.0'

然后随便编写错误，启动即可！！！
然后就能在监控端看到详细的错误信息

线上环境区分

创建.sentryclirc文件，对没错就是一个这个.sentryclirc，

核心配置文件

[defaults]
url=http://服务器地址:9000/
org=组织名
project=监控端项目名

[auth]
token=...........................

token的获取



粘贴出来即可！！！，这里为了更好的区分，将版本改一下
也就是main中的release的上报版本切换成1.0.1，打包放到服务器中运行

完美！！！

大框中是报错的代码，小的是监控的版本号

这两个分别对应触发错误的个数，和触发个数的人数

设置中文

注意

前端项目启动访问后出现如下报错需要切换版本

我用之前刚整合SENTRY的时候就直接使用上面的命令安装相关依赖

npm install @sentry/browser
npm install @sentry/integrations

结果导致我下载的依赖版本过高，但是我拉的镜像也是最新的版本，但是还是出了如上问题，然后我就找到之前的项目查看了相关依赖的版本，然后更改版本后从新启动就好了！有点坑！
我的版本关系如下

sentry服务端：Sentry 9.1.2
package.json

"@sentry/browser": "^5.15.5",
"@sentry/integrations": "^5.15.5",

package-lock.json

"@sentry/browser": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.30.0.tgz",
      "integrity": "sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==",
      "requires": {
        "@sentry/core": "5.30.0",
        "@sentry/types": "5.30.0",
        "@sentry/utils": "5.30.0",
        "tslib": "^1.9.3"
      }
    },
    "@sentry/core": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.30.0.tgz",
      "integrity": "sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==",
      "requires": {
        "@sentry/hub": "5.30.0",
        "@sentry/minimal": "5.30.0",
        "@sentry/types": "5.30.0",
        "@sentry/utils": "5.30.0",
        "tslib": "^1.9.3"
      }
    },
    "@sentry/hub": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.30.0.tgz",
      "integrity": "sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==",
      "requires": {
        "@sentry/types": "5.30.0",
        "@sentry/utils": "5.30.0",
        "tslib": "^1.9.3"
      }
    },
    "@sentry/integrations": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-5.30.0.tgz",
      "integrity": "sha512-Fqh4ALLoQWdd+1ih0iBduANWFyNmFWMxwvBu3V/wLDRi8OcquI0lEzWai1InzTJTiNhRHPnhuU++l/vkO0OCww==",
      "requires": {
        "@sentry/types": "5.30.0",
        "@sentry/utils": "5.30.0",
        "localforage": "1.8.1",
        "tslib": "^1.9.3"
      }
    },
    "@sentry/minimal": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.30.0.tgz",
      "integrity": "sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==",
      "requires": {
        "@sentry/hub": "5.30.0",
        "@sentry/types": "5.30.0",
        "tslib": "^1.9.3"
      }
    },
    "@sentry/types": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
      "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
    },
    "@sentry/utils": {
      "version": "5.30.0",
      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
      "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
      "requires": {
        "@sentry/types": "5.30.0",
        "tslib": "^1.9.3"
      }
    },

如有以上问题，可以参考我的解决方案！