前言

如果你是一名前端开发工程师，那么你多少会遇到一些线上问题，并且在没有任何辅助的情况下很难去定位到问题，它不像后端可以去查日志，大多数前端的项目可以理解为在“裸奔”。

并且测试永远无法做到100%覆盖，用户有可能也不会按照我们预期的那样操作，因此我们需要在系统异常时主动对其收集上报，快速制定解决方案。以往前端大多情况下只记录接口请求之后发生的错误，随着web应用越来越强大，代码越来越复杂，很多不可预期的错误发生在前端，因此前端更需要一个错误监控系统。

Why

是一个开源的实时错误报告工具，支持 web 前后端、移动应用以及游戏，支持 、OC、Java、Go、Node.js、、RoR 等主流编程语言和框架，还提供了 、Slack、 等常见开发工具的集成。

并且好多大公司也都在使用，总结起来，就是免费、开源、好用

架构

安装注意事项

安装环境

Mac：10.14.6

-ce ：19.03.8

- ：1.25.5

安装方式

搭建有两种方式：

这里我们通过安装（通过安装比较简单）

安装

已安装过的可以忽略这一步了，我是根据官网教程，注册账号，一步一步过来的，当然官网文档也给了很明确的安装步骤，如果没有安装过可以参考这篇文章在Mac上安装：

最后可以通过 info查看是否安装成功，并且Mac版的安装，-已经一起安装好了。

安装

第一步：拉取官方仓库并安装

git clone https://github.com/getsentry/onpremise.git

因为官方已经通过./.sh脚本封装好了安装的步骤，所以只需要cd到相应目录，执行脚本就OK了。

# 安装配置cd onpremise && ./install.sh

如果执行了上面的命令，没有发生错误，那么可以忽略这个了，笔者在运行的时候，就遇到了第一个错免费加速器ip代理，报内存不够。

Checking minimum requirements...FAIL: Expected minimum RAM available to Docker to be 2400 MB but found 1998 MB

使用 info 发现最大内存只有1G多

翻了半天墙，发现也没有说怎么设置内存的，最后在一个技术群问了一嘴，发现Mac直接通过桌面版设置里可以直接更改内存大小，如下图那样设置就好了。

然后接着重新运行那个脚本，中间会让你输入账号和密码

# ./install.sh...Created internal Sentry project (slug=internal, id=1)
Would you like to create a user account now? [Y/n]: yEmail: 123456@qq.comPassword:Repeat for confirmation:User created: 123456@qq.comAdded to organization: sentry

接着有可能会遇到下面这种问题，如果没有这种可以直接跳过。就是下载远端的镜像服务，下载不下来，一般像这种都会默认走代理，我不知道什么原因，困扰了我很久。

各种查资料，翻墙搜、看文档、提，也按照网上说的，配置了好几个镜像加速器也不行

最终判定原因肯定是代理造成的，请教了一个运维大佬，为 for Mac 配置 HTTP 代理就好了，使用 for Mac 时，让 pull/push 走本地的代理端口。

1、在 for Mac 里设置代理，也就是里面的代理IP设置成本机的IP地址，通过查看192.168.100.118为我本机的IP地址

2、另一个需要设置的就是VPN代理的IP地址，都设置成本机IP地址，其实设置成127.0.0.1也是可以的，我这个因为 对于 127.0.0.1 支持不够好，经常访问不到代理程序，所以才改的指定IP。

接下来，激动的先用 pull 命令尝试了一下，可以拉下来，之前都拉不下来的然后再运行./.sh脚本，全部顺利都下载下来了✌️

生成秘钥

# 生成秘钥
$ docker-compose run --rm web config generate-secret-key

# 复制秘钥(即最后一行)，编辑 .env 文件，将 SENTRY_SECRET_KEY 对应的 value 修改为刚才复制下来的秘钥
$ vi .env

最后安装完会有个提示，运行- up -d 命令就启动了，在浏览器中输入:9000就进入 的登录页面了，使用上面创建的管理员用户名和密码登录系统。

集成客户端SDK

经过以上步骤，已经正式搭建完毕，接下来就是创建项目，集成客户端SDK，用来监控项目进行错误上报。

登录系统后，首先会进入配置页面

设置语言

创建项目

配置好之后，开始创建项目，这里以Vue为例，点击 New 创建新项目，然后按照指引可以看到 让安装@/插件。

在我们的前端项目中引入监控的模块，注意监控模块要在 Vue 之后引入，步骤就是先安装，再引入。安装就如上图所示要么用yarn，要么用npm安装，引入就按下面所示在main.js中引入即可

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
  dsn: 'http://c537d65d66a14976bc2642fc22e0f965@localhost:9000/3',
  integrations: [new VueIntegration({Vue, attachProps: true})],
});

验证

我们可以制造点错误免费加速器ip代理，写点bug，来验证下是否符合预期，触发错误，可以在中看到错误上报的请求，同时在 会看到这个错误。可以直接打印一个未声明的变量触发错误。

// main.js// 使用一个未声明过的变量触发错误console.log(hello)

主动捕获错误

现在我们已经可以监测程序中大多数错误，但是无法捕获异步错误（比如定时器、接口请求错误）此时可以利用.()进行主动上报

try {      aFunctionThatMightFail();    } catch (err) {      Sentry.captureException(err);    }    Sentry.captureException(new Error("test"));

邮箱设置

完成上面的步骤，基本可以使用了，但是我们想有更好的监控服务，出现问题能立马收到提醒，这个时候就要搭建邮件服务。我这里使用的是qq邮箱，需要开启pop3/smtp权限。

在搭建好的系统上是无法添加smtp信息，我们需要到.yml配置文件中修改。

找到.yml文件，开始填入配置信息，注意一般那个为生成的授权码，不是你的邮箱密码。还有在服务器上搭建邮件服务一定要使用 TLS，因为一般的 linux 服务器并不会开放 SMTP:25 端口，而且使用 TLS 也更安全。

################ Mail Server ################
# mail.backend: 'smtp'  # Use dummy if you want to disable email entirelymail.host: 'smtp.qq.com'mail.port: 25         // 开启 TLS，不开的话邮件服务默认 25mail.username: 'your-email-address'  // 你的邮箱地址mail.password: 'your smtp secret'    // 这里是你的 SMTP 授权码mail.use-tls: false                   // 开启 TLS# The email address to send on behalf of mail.from: 'your-email-address'       // 发件人是谁，一般和 mail.username 一致

按照上面配置好之后，重启服务，在这里笔者出现了一个小插曲，就是配置完之后，死活不生效，邮件发送不成功

，最好经过细心的发现，竟然是前面的注释忘去掉了，当然不会生效了，真是尴尬

$ docker-compose up

重启好了服务之后，然后点击发送邮件测试一下，看是否能成功，最终发现发送成功，并且能收到测试短信，说明邮件服务已成功设置好了

本文主要围绕如何搭建监控系统和使用，以及如何在项目中使用，和在安装过程中遇到的一些坑，做个记录方便以后查找。至此一个基本的监控系统已经搭建完成，关于更多的介绍和玩法，可以去官网查询，官网也介绍的比较详细。