- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
众所周知,Vue
有一个配置Vue.config.errorHandler
,用于指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue
实例。可以借助这个函数,进行应用的错误日志记录并做一些自定义的处理,防止出现一些严重异常导致应用挂掉。
一般情况下错误日志可以在前端页面中展示,并且需要记录到数据库中。在异常发生时可以调用后台接口存储到后台,前端查询的实现可以使用状态管理(如果需要持久化存储就配合本地存储,但一般不太建议,因为异常太多的话会影响性能)
可以通过插件形式实现全局异常处理函数,并挂载到Vue.config.errorHandler
上。
首先,配置一个开关,用于控制在开发环境还是生产环境中启用日志。
settings.js
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;
至此,已经实现了全局的错误拦截和状态记录。
如果是uni-app
项目,也可以在App.vue
中定义生命周期钩子onError
执行$thow
,这样也能触发全局的错误处理函数。
App.vue
export default {
onLaunch() {
console.log('App-Launch');
},
onShow() {
console.log('App Show');
},
onHide() {
console.log('App Hide')
},
onError(err) {
this.$throw(err);
}
}
也可以在页面中使用errorCaptured
捕获页面中发生的异常。
errorCaptured (err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false
以阻止该错误继续向上传播。
// 当捕获一个来自子孙组件的错误时被调用
errorCaptured(err, vm, info) {
// 页面级异常处理
return false // 全局的config.errorHandler将无法捕获到这里的异常
}
这是真的: log(A) + log(B) = log(A * B) [0] 这也是真的吗? O(log(A)) + O(log(B)) = O(log(A * B)) [1] 据我了解 O(f
日志 日志是构建工具的主要界面。如果日志太多,真正的警告和问题容易被隐藏。另一方面,如果出了错,你需要找出相关的信息。Gradle 定义了6个日志级别,如表 18.1,“日志级别”所示。除了那些您通
日志 关键进程日志如下…(将 替换为启动服务的用户,将 替换为计算机名称) NameNode: $ HADOOP_HOME / logs / hadoop- -namenode- .log Da
我正在探索项目的 git 历史 FFMpeg .我在提交之间对每个文件执行了更改 517573a67088b5c7a25c18373434e3448892ee93和 80bb65fafab1d2f5f
我不知道如何在 loggly 中使用正则表达式进行搜索。例如,使用表达式 /24nonstop.+7554/ 记录我想查找的内容. { "level_name": "WARNING", "ex
有没有办法为 API 调用打开日志记录? 我们有一个第三方应用程序在使用我们的商店时遇到问题,希望获得一些调试信息。 ~我已经搜索了 bt 一无所获。 我正在使用 1.7 最佳答案 在一段受控的时间内
我正在尝试获取 SVN 中所有副本/移动/等的固定路径的日志历史记录(如果可能的话,递归地)。实际上,我试图避免 peg revisions ,并将日志应用于路径而不是对象。 svn 手册提出了这个问
如何在命令行中运行 NAnt 脚本并在日志文件中获取每个任务的时间? using nant task or NAnt -buildfile:testscript.build testnanttarg
是否有任何默认方式来记录哪些用户代理访问了您的服务器?我需要编制一份访问我们网站的浏览器列表,以便我们知道我们最能支持什么。 谢谢! 最佳答案 日志CGI.HTTP_USER_AGENT ,也许在 A
我在我的应用程序中使用 Spring 发送电子邮件。 我想在发送电子邮件时记录 imap 服务器操作。 我尝试按如下方式在我的 applicationContext.xml 中实现日志:
我已经运行一个 pod 一个多星期了,从开始到现在没有重启过。但是,我仍然无法查看自它启动以来的日志,它只提供最近两天的日志。容器是否有任何日志轮换策略以及如何根据大小或日期控制轮换? 我尝试了以下命
背景: 我正在设置我的第一个 flex 堆栈,尽管我将开始简单,但是我想确保我从良好的体系结构开始。我最终希望有以下解决方案:托管指标,服务器日志(expressjs APM),单页应用程序监视(AP
常规的 hg log 命令给出每个变更集至少 4 行的输出。例如 changeset: 238:03a214f2a1cf user: My Name date: Th
我在我的项目中使用 Spring iBatis 框架。然后使用 logback 进行记录。然后,在检查日志文件时,我可以看到系统正在使用的数据库...出于安全目的我想隐藏它 这是示例日志.. 12:2
我想使用 hg log 生成一个简短的变更日志,涵盖最新版本的变更。发行版标有“v”前缀,例如“v0.9.1”或“v1.0”。是否可以使用 revsets 选择以“v”开头的最后两个标签之间的范围,不
我是 PHP 的新手,所以如果有一个简单的答案,请原谅我。我在 stackoverflow 中搜索过任何类似的问题,但找不到任何帮助。 我正在开发一个现有的基于 php 的应用程序,我只需要能够将对象
我有一个名为 Radius 的程序可以验证用户登录。运行在CentOS服务器上 日志在/var/log/radius.log 中 它们如下 Mon Jul 24 22:17:08 2017 : Aut
我最近从使用“日志”切换到“日志”。 到目前为止,还不错,但我缺少一项关键功能——在运行时更改最低级别的能力。 在“logging',我可以调用 myLogger.setLevel(logging.I
假设我们有速度关键的系统(例如统计/分析、套接字编程等),我们如何设计跟踪和日志。 更具体地说,日志和跟踪通常会降低性能(即使我们有关闭机制或冗长的扩展机制)。在这种情况下,是否有任何关于如何“放置”
有人知道这个 don't panic 日志包含什么类型的信息吗? /data/dontpanic 然后,我该如何分析这个日志? 最佳答案 我发现这个文件夹在内核崩溃发生后包含了一些 apanic 文件
我是一名优秀的程序员,十分优秀!