前端本地搭建Sentry 上报错误信息注：以下是针对 mac 配置配置要求 Docker Compose CPU 内

简介

Sentry是一个实时事件的日志聚合平台。它专门监测错误并提取所有有用信息用于分析。现在支持的平台还是很多的，支持语言和框架都很多，支持语言可以查看官网，对我们前端来说相当有用，因为前端上线后如果不使用错误日志上报，在线上环境出了问题我们是不知道的（只能单一的靠用户反馈获取）。这显然是不合适的。所以我们需要错误日志上报，这种我们就能完善我们的程序。使我们的程序更加健全。

虽然在之前的项目中我们也用windo.onerror、window.addEventListener('error', function(event) { ... }, true)、errorHandler和ErrorBoundary的方式来上报，但是那种弊端也很明显，这种需要后端配合，要写接口来支持、还有一个是这种监听的数据信息不全面（要全面需要写很多功能，如监听ip设备型号等等）还有错误不会自动归类（要归类也是需要自己处理）等等，然而sentry都帮我们做好了，直接拿来用就行了，在这里不得不感慨，有轮子真好 u=2423448120,3352929264&fm=26&fmt=auto&gp=0.gif 。

Sentry原理实现

具体参考：Sentry原理（转载）

好家伙，说了那么多就是想夸夸Sentry嘛，没错，就是想夸他，那么多大厂都在应用sentry，我一个十八线程序员有何理由不夸他呢，哈哈。
下面进入正题。

注：以下是针对 mac 配置（Centos也差不多，只是安装docker和python3方式不同而已，自行百度就行了）

配置要求

Docker	Compose	CPU	内存	硬盘	python
19.03.6+	1.24.1+	4 核	8GB	20GB	Python3

Docker 相关

安装 docker docker 下载地址点击下载后直接打开
设置虚拟机大小

docker设置大小

Python 相关

注：mac 系统自带 python 环境，不过都是 2.x 版本。sentry 目前只支持 Python3，官网有说明

To get started with all the defaults, simply clone the repo and run ./install.sh in your local check-out. Sentry uses Python 3 by default since December 4th, 2020 and Sentry 21.1.0 is the last version to support Python 2.

安装 Python3

brew install python3

安装完成会有安装的路径，如果没有用

brew info Python3

查询位置

配置环境变量（默认还是 python 2.x）

终端输入

open .bash_profile
加入

PATH="/Library/Frameworks/Python.framework/Versions/3.9/bin:${PATH}"
alias python="/usr/local/bin/python3"
export PATH

刷新配置
source ~/.bash_profile

Sentry 相关

Sentry 下载安装 Sentry 仓库地址

克隆后进入项目执行

./install.sh
安装过程中会出现设置账号和密码（就是进入http://localhost:9000后的登录账号和密码，自行设置）

注：如果在执行安装过程中，出现 ./install/_lib.sh: line 15: realpath: command not found 错误
解决办法--issue 地址

brew install coreutils
安装 coreutils 后，再执行 ./install.sh。

等 intsall.sh 安装完成后（安装./install.sh 要等很久）

启动 Sentry

注：需要自行配置的请自己修改“.env”文件

docker-compose up -d

等启动完成后输入(默认 9000 端口)

http://localhost:9000

Sentry 设置

语言设置点击用户头像 >> User settings >> Account Details >> Language
项目设置 Projects >> 点击右上角 Create Project >> 选择类型（以 Vue 举例）点击创建项目后会出现提示,在项目中根据提示安装和配置

Vue2.0 中配置

安装@sentry/vue 和 @sentry/tracing

yarn add @sentry/vue @sentry/tracing

在 vue 中 main.js 中加入

Sentry.init({
  Vue,
  dsn: "http://ec05fe497334416692ed755543c7e592@localhost:9000/6",
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

在其他页面建一个报错测试例如在App.vue中

 mounted() {
    window.a.b
  }

查看错误进入sentry网页，点击issue
列表就能查看错误了

错误详情

Vue3.0配置

安装@sentry/browser和@sentry/integrations

yarn add @sentry/browser @sentry/integrations

在main.ts中加入

const app = createApp(App);
Sentry.init({
  dsn: "http://4256328425014205ade9d8c462d071fb@localhost:9000/5",
  integrations: [new VueIntegration({ Vue: app as any })],
});

前端 本地搭建Sentry 上报错误信息

简介