vue3 webpack sourceMap 前端监控

简介

webpack 打包生成js代码，.map文件。在线上代码报错时，准确快速的定位问题。
而.map文件是源码映射，不能像开发环境一样展示源码，定位问题过程比较繁琐。
也不能将map文件直接上传到生产环境中，否则源码会暴露。
项目地址：https://gitee.com/cyyu/source-map
启动命令: yarn;yarn dev | npm install;npm run dev

效果图

vue3+express环境搭建

利用脚手架自行搭建

• 目录列表

.
├── README.md
├── babel.config.js
├── dist vue 打包生成文件
│ ├── css
│ ├── favicon.ico
│ ├── index.html
│ └── js
├── express express 相关文件
│ ├── 1.json 存放错误内容
│ ├── app.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ └── main.js
├── vue.config.js
└── yarn.lock

前端，错误收集上报

raven-js + axios
参考 前端错误监控之SourceMap还原Vue Demo 实现(知乎)

目录介绍

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
const app = createApp(App)
import Raven from "raven-js";
const _ravenConfig = {
	// 项目版本号
	release: "staging@2.0.0"
}
// 修改xxx 为 自己项目的名字
const raven = Raven.config("http://localhost:3000/xxx", _ravenConfig)
raven.install();
raven.setTransport(function(option) {
	let data = {
		stack: option.data,
		msg: (() => {
			let res = []
			let data = option.data
			data.exception && data.exception.values && data.exception.values.length && res.push(`${data.exception.values[0].type}:${data.exception.values[0].value}`)
			return res.join(';')
		})(),
	}
	axios.post('http://localhost:3000/api/uploadErrInfo', data);
	option.onSuccess();
});
function formatComponentName(vm) {
	if (vm.$root === vm) {
		return 'root instance';
	}
	var name = vm._isVue ? vm.$options.name || vm.$options._componentTag : vm.name;
	return (
		(name ? 'component <' + name + '>' : 'anonymous component') +
		(vm._isVue && vm.$options.__file ? ' at ' + vm.$options.__file : '')
	);
}

app.config.productionTip = false;
const _oldOnError = app.config.errorHandler;
app.config.errorHandler = function(error, vm, info) {
	const metaData = {};
	if (Object.prototype.toString.call(vm) === '[object Object]') {
		metaData.componentName = formatComponentName(vm);
		metaData.propsData = vm.$options.propsData;
	}

	if (typeof info !== 'undefined') {
		metaData.lifecycleHook = info;
	}

	Raven.captureException(error, {
		extra: metaData
	});

	if (typeof _oldOnError === 'function') {
		_oldOnError.call(this, error, vm, info);
	}
}

app.use(ElementPlus)
app.mount('#app')

抛错文件

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <el-button type="primary" @click="makeErr">make Err</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    makeErr() { 

	// 此位置为了掩饰 准确的行号定位



      
      console.log(process.env.NODE_ENV);
      throw new Error('自定义')
    }
  }
}
</script>

错误展示文件

src/components/Detail.vue

node+express

利用 fs + path + source-map 读取解析文件内容
访问localhost:3000 ,自动解析打好包后的dist/index.html文件

Feature

在开发过程中，项目目录不可能像这个Demo这样简单，webpack添加自定义插件，实现向后台上传.map文件，并自动删除.map文件。
还有用户行文记录，更加高效的定位问题，但TOC的高并发🙂