Vue 项目中接入sentry

Vue 项目中接入sentry

最近在公司的内部Vue项目中接入sentry技术栈，跟踪运行时错误。
针对这件事分享下，有不完整或者错误的地方欢迎交流。 github

1、sentry 错误日志收集框架

Stop hoping your users will report errors
Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience.

若是项目容许，你能够在sentry申请一个免费帐户，管理你项目上传的运行时错误。也能够在公司搭建一个sentry。关于搭建sentry这块与本文无关就暂时不说了，能够查看。

一、sentry的原理（我的看法）

（1）sentry是一个收集项目运行时错误日志的框架，这个框架就要分为服务平台和客户端了。

服务平台： 能够本身本身搭建，也可使用官网的（免费、付费）
    客户端：从他的出发点是监控项目代码来理解就知道，须要嵌入项目中。做为前端的话第一个想到的就是插件了。复制代码

（2）、语言的多样化，开发使用语言是多样化的因此sentry支持的语言也比较多

（3）、错误日志的收集方式。代码中产生的错误日志怎样上传到sentry服务平台。

当你完成sentry配置的时候，你会获得一个称为“DSN”的值，看起来像一个标准的URL。
Sentry 服务支持多用户、多团队、多应用管理，每一个应用都对应一个 PROJECT_ID，以及用于身份认证的 PUBLIC_KEY 和 SECRET_KEY。
由此组成一个这样的 DSN：
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
PROTOCOL 一般会是 http 或者 https，HOST 为 Sentry 服务的主机名和端口，PATH 一般为空。复制代码

2、sentry服务平台配置

一、建立项目

二、获取SENTRY_DSN（也叫Client Keys）

To send data to Sentry you will need to configure an SDK with a client key (usually referred to as the SENTRY_DSN value). For more information on integrating Sentry with your application take a look at our documentation.

若是是使用的免费的sentry
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
PROTOCOL 一般会是 http 或者 https，HOST 为 Sentry 服务的主机名和端口，PATH 一般为空。
具体的能够在你的项目中“Project Setting”中查看

3、客户端设置

在客户端中接入是简单的，只须要配置插件就能够了。可是要注意的是，必须在Vue配置以前。每个的客户平台配置内容能够在官网查找。

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('https://60f9e820eb7b4a8f9beb62a314b1f80d@sentry.io/242345')
    .addPlugin(RavenVue, Vue)
    .install();复制代码

4、报错后

点击进去能够查看详情，且会将报错信息默认发送到注册邮箱。

5、sourceMap release version 上传

如今的前端项目基本都会使用工具进行编译打包压缩等（webpack）。那么，这样的代码在发布后一旦报错返回的源码可能你就很难找到具体位置在哪里了。

通常这种状况咱们能够选择在sentry中建立一个release版本，而且将sourceMap提交上去。产品发布时不发布sourceMap的。当出现报错时，提交错误到sentry，回去匹配相应版本的release版本的sourceMap而后你看见的代码就是报错源码了。

sourceMap怎样建立release、上传、删除等API能够从官方文档按需查看，都很 详细。