跨平台应用开发进阶(十八) ：全局异常日志处理方案探究_uniapp 获取后台抛出的异常(1)

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

export default {
    /\*\*
 \* @type {string | array} 'production' | ['production', 'development']
 \* @description 在什么环境中记录日志，生产环境还是开发环境
 \* 默认生产环境写入错误日志，避免在开发环境调试期间错误日志过多且影响性能
 \* 如果需要在开发环境中记录错误日志，可以修改为 ['production', 'development']
 \*/
	errorLog: ['production', 'development']
}

然后，准备一个状态管理相关文件，用于记录日志。

errorLog.js

const state = {
	logs: []
}
 
const mutations = {
	ADD_ERROR_LOG: (state, log) => {
		state.logs.push(log)
	},
	CLEAR_ERROR_LOG: (state) => {
		state.logs.splice(0)
	}
}
 
const actions = { 
	addErrorLog({
		commit
	}, log) {
		commit('ADD_ERROR_LOG', log)
	},
	clearErrorLog({
		commit
	}) {
		commit('CLEAR_ERROR_LOG')
	}
}
 
export default {
	namespaced: true,
	state,
	mutations,
	actions
}

在store/index.js中引入errorLog模块

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import errorLog from './modules/errorLog'
 
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
 
export default new Vuex.Store({
	modules: {
		errorLog 
	},
	// 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
	strict: debug
})

然后写一个插件，将全局异常处理函数挂载在Vue.config.errorHandler上。

utils/error-log.js

import store from '@/store'
import {
	isString,
	isArray
} from './util'
 
import config from '@/setting'
 
const install = function (Vue) {
	const {
		errorLog: needErrorLog
	} = config;
	
	function checkNeed() {
		const env = process.env.NODE_ENV;
		
		if (isString(needErrorLog)) {
			return env === needErrorLog
		}
		
		if (isArray(needErrorLog)) {
			return needErrorLog.includes(env)
		}
		
		return false
	}
	
	function writeErrorLog({
		err,
		route
	}) {
		// ajax 调用后台接口去记录日志
	}
	
	function errorHandler(err, vm, info, a) {
		// route： uni-app路由，这里可以修改成自己的内容或去掉
		let pages = getCurrentPages(),
			route = '';
		if (pages.length) {
			route = pages[pages.length - 1].route;
		}
		console.error('globalError', err);
		vm && console.error('globalError-vm', vm);
		info && console.error(info);
		route && console.error('page', route); // route： uni-app路由，这里可以修改成自己的内容或去掉
		
		if (checkNeed()) {
			// Don't ask me why I use Vue.nextTick, it just a hack.
			// detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
			Vue.nextTick(() => {
				store.dispatch('errorLog/addErrorLog', {
					err,
					info,
					route // route:uni-app路由，这里可以修改成自己的内容或去掉
				})
				
				writeErrorLog({
					err,
					info,
					route // route:uni-app路由，这里可以修改成自己的内容或去掉
				})
			})
		}
	}
	
	// 挂载在原型上，即可以在其他页面中使用this.$throw
	Vue.prototype.$throw = errorHandler
	Vue.config.errorHandler = errorHandler
}
 
export default install;
#### 结束  

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)