当前位置: 首页>前端>正文

前端项目的监控与异常上报kibana 前端错误监控平台

一、sentry可以做什么

可以实时监控生产环境上的系统运行状态,一旦发生异常会第一时间把报错的路由路径、错误所在文件等详细信息以邮件形式通知我们,并且利用错误信息的堆栈跟踪快速定位到需要处理的问题。

优点:

支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web界面来展示输出错误。Sentry 分为服务端和客户端 SDK,前者可以直接使用它家提供的在线服务,也可以本地自行搭建;后者提供了对多种主流语言和框架的支持,包括 React、Angular、Node、Django、RoR、PHP、Laravel、Android、.NET、JAVA 等。同时它可提供了和其他流行服务集成的方案,例如 GitHub、GitLab、bitbuck、heroku、slack、Trello 等。

支持 SourceMap,可以在生产环境查看

价格:

自行搭建环境不收费,使用官网服务收费

官网收费价格:https://sentry.io/pricing/

安装环境要求:

Docker 19.03.6+

Compose 1.24.1+

4 CPU Cores

8 GB RAM

20 GB Free Disk Space

搭建步骤:

官网说明:https://develop.sentry.dev/self-hosted/

Linux搭建教程https://zhuanlan.zhihu.com/p/340937905

二、mac搭建步骤

1、Docker安装 

mac安装地址http://mirrors.aliyun.com/docker-toolbox/mac/docker-for-mac/

2、使用官方git仓库地址一键生成 (https://github.com/getsentry/onpremise)

git clone https://github.com/getsentry/onpremise.git
cd onpremise
./install.sh

3、中间过程特别慢,期间遇到的坑放在下面

配置客户端的账号和密码,之后运行如下命令,运行成功后则配置完成

docker-comose up -d

4、打开本地地址 http://localhost:9000,用刚才配置的客户端账号和密码登录

5、创建一个vue项目

前端项目的监控与异常上报kibana 前端错误监控平台,前端项目的监控与异常上报kibana 前端错误监控平台_前端项目的监控与异常上报kibana,第1张

6、在开发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: ‘’,//sentry生成的dsn
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
  logErrors: true,
  release: ‘’ //版本
});

此时在开发环境就可以看到错误日志了。

7、主动触发报错可以利用Sentry.captureException(https://www.npmjs.com/package/@sentry/browser)

try {
  doSomething(a[0])
} catch (e) {
  Sentry.captureException(e)
}

window.onerror 捕捉异常

window.onerror = function(e) {
  Sentry.captureException(e)
}

在 vue 里可以使用 Vue.config.errorHandler 钩子来捕捉

Vue.config.errorHandler = (err, vm, info) => {
  Sentry.captureException(err)
}

对于接口报错,可以在全局拦截里实现

request.interceptors.response.use(null, error => {
  console.error(error)
  Sentry.captureException(error)
  return Promise.reject(error)
})

8、生产环境利用Sourcemap上传

 1、 sentry 后台配置 authToken 用于上传sourcemap 使用,如下图注意勾选

前端项目的监控与异常上报kibana 前端错误监控平台,前端项目的监控与异常上报kibana 前端错误监控平台_Docker_02,第2张

2、下载webpack插件

npm i @sentry/webpack-plugin -D

然后在根目录下新建 .sentryclirc

[defaults]
### 你的域名
defaults.url='http://localhost:9000/'
### 组织团队名默认是 sentry
org=sentry
### 项目名称
project=vue
### 步骤1创建的
[auth]
token=cb1a446024b6437584fd5504061199b78f6a69a9a1be47d682053daff1358613

配置插件

const SentryWebpackPlugin = require('@sentry/webpack-plugin');
if (process.env.NODE_ENV !== 'development') { // 注意只在生成环境开启,不然npm run dev也会上传
    new SentryWebpackPlugin({
      release: Date.now(), // 唯一标识,可以用其他的比如 hash
      include: './build', // 要上传的文件夹 有的叫 dist
      ignoreFile: '.sentrycliignore', // 可不要
      ignore: ['node_modules', 'config-overrides.js'], 
      configFile: '.sentryclirc' // 默认同级,如果不一样需要用node path模块处理一下
    });
}

然后运行 npm run build,配置成功

三、安装遇到的坑

1、安装官网最新版本时,运行./install.sh命令时会报一个_lib.sh文件问题,解决方案降级安装其它版本。

前端项目的监控与异常上报kibana 前端错误监控平台,前端项目的监控与异常上报kibana 前端错误监控平台_javascript_03,第3张

2、运行./install.sh命令时,会报一个FAIL: Expected minimum RAM available to Docker to be 2400 MB but found 1989 MB的错误

其实不是sentry的问题,是ram内存的问题导致的,也就是需要给docker多分点内存,才能运行这个sentry项目。

前端项目的监控与异常上报kibana 前端错误监控平台,前端项目的监控与异常上报kibana 前端错误监控平台_javascript_04,第4张

如果会有Fetching and updating Docker images 等了几个世纪都没反应!实在是太慢了,所以我们要改成阿里云的镜像在执行 install 命令

https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

搜索 docker

前端项目的监控与异常上报kibana 前端错误监控平台,前端项目的监控与异常上报kibana 前端错误监控平台_Vue_05,第5张

配置镜像

前端项目的监控与异常上报kibana 前端错误监控平台,前端项目的监控与异常上报kibana 前端错误监控平台_Vue_06,第6张


https://www.xamrdz.com/web/2ca1957728.html

相关文章: