nuxt 项目使用sentrycst群友们之前在群里讨论sentry的匹配问题，自己不懂，就去找了一下是个什么东西。找了

项目背景

cst群友们之前在群里讨论sentry的匹配问题，自己不懂，就去找了一下是个什么东西。找了之后发现是个日志监控系统，自己以前也想弄一个，但是碍于多种原因，只实现了一个简易版的，功能没有sentry这么全，后来就废弃掉了这个项目。目前公司内部，在前端并没有一个日志监控的系统，线上报错也不知道，只能通过测试测bug，然后修，有些线上问题就不太清楚。所以，打算弄一个前端日志监控的系统，鉴于群友们对sentry有了解，就打算用这个了。

sentry 部署

部署详细文档后续补上，有几个大坑要记录一下

不能用window下的ubuntu 部署，那是个阉割版的ubuntu，功能不全。我自己安装了一个ubuntu系统来弄
安装ubuntu的时候要给主分区分多点空间分配个20G就差不多了

新建一个sentry项目

点击右上角的创建project

输入vue搜索，选择vue项目
点击创建project 就可以创建好一个项目。
记录下当前的dsn地址待会会用到
项目创建完成

nuxt项目内引入sentry

网上找到一个nuxt下用的sentry库--@nuxtjs/sentry，直接使用就好。

引入@nuxtjs/sentry库

yarn add @nuxtjs/sentry -D
#或者
npm install @nuxtjs/sentry --save-dev

在nuxt配置文件加入@nuxtjs/sentry

// nuxt.config.js
export nuxtCOndig = {
		// **** 省略其他配置
  	  modules: [
      '@nuxtjs/sentry',
    ],

    sentry: {
      dsn: '', // 创建完项目获取的dsn地址填入这里就好
      config: {}, // Additional config
    }
}

然后运行项目就可以测试了，我写了一小段代码抛出一个错误 #如何在本地测试生产环境项目，可以看另外一篇文章

setTimeout(function(){
	var a=undefined;
  a.b = "type error"
}, 1000);

触发了这个错误就会想sentry上报
在管理端查看日志 Project=>(项目名称)-> issue 就可以查看到日志

但是这是经过压缩的，并不知道具体的代码是什么，于是我们需要把sourcemap上传到sentry当中

上传sourcemap

上传sourcemap 现在也有现成的插件可以使用，有两个插件可以使用：

@sentry/webpack-plugin
webpack-sentry-plugin

这两个插件的主要区别在于后一个插件可以在上传之后讲sourcemap文件删除，因为我一开始是用@sentry/webpack-plugin的所以我采用@sentry/webpack-plugin这个插件。后续通过命令行删除sourcemap。

安装@sentry/webpack-plugin插件, 一般会同时安装@sentry/cli

yarn add @sentry/cli -D
yarn add @sentry/webpack-plugin -D

# vim .sentryclirc

[defaults]
# 这边是sentry的地址 比如说我在本地启动的服务
url = http://127.0.0.1:9000/ 
org = sentry
# 刚才创建的项目名字
project = vue

[auth]
# 身份令牌 在sentry服务端 setting-》accout->api->auth Tokens 创建一个新的就好
# 注意这里要有project:write 权限 下面我会给出具体页面，看着上面路径进去就好。
token = your token

在nuxt.config.js 文件里面加入这个插件

// nuxt.config.js
export nuxtCOndig = {
		// **** 省略其他配置
    build:{
			// **** 省略其他配置
    	extend(config, {isDev, isClient}) {
      webpacExtend(config);
      // **** 省略其他配置
      isProd && (config.output.publicPath = publicPath);
      if (isClient && !isDev) {
          config.devtool = 'source-map'   // 处理client 增加sourcemap
          const release = 'demo-test23'; // 可以根据package.json的版本号或者Git的tag命名
          const SentryPlugin = require('@sentry/webpack-plugin')
          config.plugins.push(new SentryPlugin({
            include: '.nuxt/dist/client', // 要上传的文件夹 不能写为 ./dist 因为dist文件夹是编译好再复制出来的
            release,
            configFile: 'sentry.properties',// 这里就是默认读取根目录下的 .sentryclirc文件
            debug: true,// 这个是开启调试 出了错也可以看见
            ignore: ['node_modules', 'webpack.config.js'],
						// 比如说我网站的js文件地址为为 http://plinghuang.cn/[hash].js 就是下面的配置
            urlPrefix: '~/' // ~/为网站根目录，后续路径须对应source
          }))
      }
    },
    },
  	  modules: [
      '@nuxtjs/sentry',
    ],

    sentry: {
      dsn: '', // 创建完项目获取的dsn地址填入这里就好
      config: {}, // Additional config
    }
}

删除sourcemap，这个后续加入到构建脚本当中即可，在构建完之后删除

rm -rf ./dist/ *.map

运行项目，测试，看看是否成功。成功的界面如下图：存在sourcemap
可以将错误解析

上传sourcemap遇到的坑

上传sourcemap失败，可以创建release 但是内部没有sourcemap文件

参考资料

sentry上传sourcemap