前言

前端开发时有没有遇见这种情况？

客户：为什么我这个页面看不到数据？？
我：（急忙打开网站），我这边数据显示正常！
客户：没有啊！我这边看不到！
我：（语无伦次），可我...我这边正常的呀
客户：BALABALA

我能怎么办？我也很绝望啊。。我也不知道客户咋玩出来的啊。。一脸蒙圈。。

现在你们的救星来了。。。sentry。。简单几步就能让你快速定位到用户报错位置本文结合vue-cli3一步一步教你配置属于你的项目的sentry

官网

学习一个框架，最好的就是先收藏他的官网链接（全是英文。。。脑袋疼）

官网链接：sentry

注册账户

首先注册一个账户（测试玩玩可以用自己的，公司项目还是用公司邮箱吧），注册时组织千万别乱填，这玩意很重要，后面很多地方都需要
注册账户完成后注册项目

项目名称也不能乱写后面也有用的，选择自己的语言（vue居然还要搜索，我大VUE为何沦落至此？）

注册完项目后你就做好了前置准备了

引入项目

简单引入的话

然后进入项目页面，继续选语言（其实这里可以改的，比如你项目从vue-react）

然后引入简单引入方式就出来了这时，为了某些童鞋懒我再整理了一下

cnpm install @sentry/browser

cnpm install @sentry/integrations

//在main.js中引入
import Vue from 'vue'import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
    dsn: 'https://32ad19d9b80448f593f1df2833256d23@o406425.ingest.sentry.io/5273959',
    integrations: [new VueIntegration({Vue, attachProps: true})],
 })

地址最后的是项目编码，如果你一个账户有多个项目，每个是不同的，不清楚的话就按这个顺序走一遍就出来。这时简单的错误收集机制就已经完成了，当你项目中前端报错时，你在请求里就会看到有一个请求将错误发向服务器,然后你能在项目中看到报错信息了，是不是非常简单？

高兴之余仔细一看，这特瞄的都报的啥错？完全看不懂啊？因为正式环境的代码都是进行了丑化，没有.map文件就是报错了你也不知道具体位置。这知道和没知道简直没有区别啊

这时候我们就要进入第二步，将.map文件上传到服务器

上传sourceMap

准备工作：

打包文件中首先需要用.map文件 vue-cli3中是在vue.config.js中

module.exports{
    XXXXX:XXXX,
    configureWebpack:{
        XXX:XXX
    },
    productionSourceMap: true//正式环境开启sourseMap
}

这时候打包看是否有.map文件了？如果有了，第一步就完成了

2.准备上传这时候我们需要一个webpack插件@sentry/webpack-plugin 首先就是安装插件

cnpm i @sentry/webpack-plugin --save-dev

然后在根节点处创建文件.sentryclirc（标准配置文件的命名方式）

[auth]
token="你的token"

[defaults]
url = https://sentry.io
org = 前面提到的组织名
project = 前面提到的项目名

token获取方式

如果没有token就注册一个

3.在全局环境变量中加入上传代码的版本号RELEASE_VERSION vue-cli3是在根目录下创建.env.production , .env.production文件（这里不知道的童鞋自己百度vue-cli3多环境配置这里不再赘述） .env.production 文件内容

NODE_ENV='production'
RELEASE_VERSION ="test002"//这里的版本号命名你开心就好，专业一点就v1.0.0这是测试

4.在vue.config.js中weapack的配置项plugins加入插件

const SentryCliPlugin = require('@sentry/webpack-plugin')

configureWebpack:{
    plugins:[
        new SentryCliPlugin({
            include: "./dist/", // 作用的文件夹，如果只想js报错就./dist/js
            release: process.env.RELEASE_VERSION, // 一致的版本号
            configFile: "sentry.properties", // 不用改
            ignore: ['node_modules', 'webpack.config.js'],
            urlPrefix: "~/",//这里指的你项目需要观测的文件如果你的项目有publicPath这里加上就对了
         })
    ]
}

在插件初始化的地方也要加上版本号所以main.js也要改成

Sentry.init({
  dsn: 'XXX',
  integrations: [new VueIntegration({Vue, attachProps: true})],
  release: process.env.RELEASE_VERSION
});

这时候再打正式包。。有点小慢。。抽根烟。。因为文件要穿服务器，速度也和网速挂钩，加上有.map文件所以很慢，如果实在太慢的同学，请移步我另一篇文章vue-webapck打包优化，就会秒秒钟解决问题

这就是打包上传成功了，美滋滋，实在心里没底可以登录我们管理平台看看到底有没有

这里我们看到这就是我们之前定义的项目名称，点击项目名称

点这里。没错就是点这里，屠龙宝刀点击就送，我们就看到了我们需要打.map文件，这时候我们部署上去（这里测试可以在本地跑个服务，做个简单的报错比如abdc(),就会报abcd不是方法），报个错看看

妈妈再也不用担心我找不到错了好好开心！！！！

留在后面

现在服务器所有报错我们都可以搜集了，但是还有许多问题，比如我开发调试的时候，我的报错也会发出来，那么多错，我看的岂不是头都大了？正式服务器开启了.map，别人拷贝我的网站不要太简单。。。。

预知后事如何，请听下回分解

手摸手教你搭建前端异常处理系统(下)