sentry上传source-map

没有上传时

哨兵已经能告诉我们报错了

不过报错信息价值不大，因为混淆之后的代码对人类阅读毫无友好可言。
所以我们如果要定位到问题所在还需要上传map文件。

上传的步骤

1.获取一个Token

可以按照下图的步骤查找已有的token或是新建一个。


#注意！！！：新建时记得勾选project:write

2.安装依赖

npm install @sentry/webpack-plugin --save
npm install @sentry/cli --save

3.配置

（1）在vue.config.js文件中添加以下代码

configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.plugins.push(
                new SentryCliPlugin({
                    cleanArtifacts: true,//每次先清除已经存在的文件，再上传
                    release: 'performance@1.0.0', // 版本号
                    include: path.join(__dirname, './dist/js/'), // 需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
                    urlPrefix: '~/performance/js/', //  线上对应的url资源的相对路径
                }),
            );
        }
    },

（2）在根目录下创建名为.sentryclirc的文件，内容如下

[defaults]
url=你要上传到的地址
org=组织名
project=项目名

[auth]
token=第一步获得的token

url：上传的服务器根目录
org：组织
project：项目
token：第一步获得的token
找不到的话可以看看下面这张图

（3）注意！！！

特别注意以下两点，否则可能会出现map文件上传成功，但是报错定位依然失败的情况。
①此处release的版本号记得和main.js中Sentry.init中填写的版本号保持一致
②urlPrefix填写的路径要和线上对应的url资源的相对路径一致，比如
我的线上资源的路径是 ip:端口/performance/js/xxxx.js
那么我此处填写的是~/performance/js/

4.成功后的效果

经过以上配置，当我们的项目进行构建的时候会自动把dist/js路径下的map文件和js文件进行上传。
首先可以找到上传成功的文件们


其次，当发生报错的时候，能够成功定位