vue项目前端错误收集之sentry教程详解

sentry简介

Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。

sentry官网： https://sentry.io/

sentry安装

sentry 是一个开源的工具，可以自行搭建。

官方支持两种安装和运行 Sentry 服务器的方法， Docker 和 Python 。推荐使用 Docker 。

当然，对于刚开始接触 sentry 的同学，也可以直接使用官方提供的免费服务，但是有一些限制。

下面先来介绍一下利用官方的免费服务，在前端项目中如何使用 sentry 。

如何在项目中使用sentry

1.首先需要在 sentry 的官网注册一个账号。注册完选择新建一个项目， sentry 支持多种框架，在其中选择 vue 创建项目。我创建了一个名为test的项目。

 1. 创建项目页面会自动跳转到如何配置vue项目页面。接下来就按照指引在vue代码里引入 sentry 。可以通过 cdn 或者 npm 引入。我们采用 npm 引入。引入的时候需要给 init 函数传递一个 dsn 参数。这个参数唯一指定了我们刚才创建的项目，在创建项目的时候系统会自动生成。如果不传这个参数， sentry 不会发送错误。

// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
// 在生产环境中让sentry报错
process.env.NODE_ENV === "production" && Sentry.init({
 dsn: 'https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
 integrations: [
 new Integrations.Vue({
  Vue,
  attachProps: true,
 }),
 ],
});

在项目跟目录下增加.sentryclirc文件，其中的token可以在左上角头像里的api keys里面获取。

[auth]token="your token"
[defaults]url = https://sentry.io
org = "your org"
project = test

然后我们在代码里制造一个错误，就可以让 sentry 捕获了。本地如何模拟线上环境访问dist下的文件呢？需要装一个 http-server ，在dist文件夹下启动一个http服务就可以了。

npm i http-server
cd dist
http-server -p 8888

注意：sentry捕获到的错误不会在打印在控制台中。

在network中可以看到， sentry 发送了一个错误请求，请求参数如下：

接下来我们就可以在后台看到刚才上传的错误信息，同时 sentry 也会给你的邮箱发送一封错误邮件。