错误日志
This commit is contained in:
ZSEN
parent
15cd0e20da
commit
6ab137122a
@ -1,18 +1,14 @@
|
||||
<template>
|
||||
<div v-if="errorLogs.length > 0">
|
||||
<el-badge
|
||||
:is-dot="true"
|
||||
style="line-height: 25px;margin-top: -5px;"
|
||||
@click="dialogTableVisible = true"
|
||||
>
|
||||
<div v-if="errorLogs.length > 0" class="errLog-container">
|
||||
<el-badge :is-dot="true" @click="dialogTableVisible = true">
|
||||
<el-button style="padding: 8px 10px;" size="small" type="danger">
|
||||
<svg-icon name="bug" />
|
||||
</el-button>
|
||||
</el-badge>
|
||||
|
||||
<el-dialog v-model="dialogTableVisible" width="80%">
|
||||
<el-dialog v-model="dialogTableVisible" width="80%" append-to-body>
|
||||
<template #title>
|
||||
<span style="padding-right: 10px;">Error Log</span>
|
||||
<span style="padding-right: 10px;">错误日志</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@ -23,36 +19,43 @@
|
||||
</template>
|
||||
<el-table :data="errorLogs" border>
|
||||
<el-table-column label="Message">
|
||||
<template v-slot="{ row }">
|
||||
<div>
|
||||
<span class="message-title">Msg:</span>
|
||||
<el-tag type="danger">
|
||||
{{ row.err.message }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="message-title" style="padding-right: 10px;"
|
||||
>Info:
|
||||
</span>
|
||||
<el-tag type="warning">
|
||||
<!-- {{ row.vm.$vnode.tag }} error in {{ row.info }} -->
|
||||
</el-tag>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<template #default="{ row }">
|
||||
<div style="margin-bottom:10px">
|
||||
<span class="message-title" style="padding-right: 16px;"
|
||||
>Url:
|
||||
>页面:
|
||||
</span>
|
||||
<el-tag type="success">
|
||||
{{ row.url }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:10px">
|
||||
<span class="message-title">事件源:</span>
|
||||
<el-tag type="primary">
|
||||
{{ row.info && row.info }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom:10px">
|
||||
<span class="message-title">错误提示:</span>
|
||||
<el-tag type="danger">
|
||||
{{ row.err && row.err.message }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div v-if="row.err && row.err.config">
|
||||
<span class="message-title" style="padding-right: 16px;"
|
||||
>接口地址:
|
||||
</span>
|
||||
<el-tag type="info">
|
||||
{{ row.err && row.err.config && row.err.config.url }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Stack">
|
||||
<template v-slot="scope">
|
||||
{{ scope.row.err.stack }}
|
||||
<template #default="{ row }">
|
||||
{{ row.err && row.err.stack }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -61,32 +64,33 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { defineComponent, ref, computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ErrorLog',
|
||||
data() {
|
||||
setup() {
|
||||
const dialogTableVisible = ref(false)
|
||||
const store = useStore()
|
||||
const errorLogs = computed(() => store.state.errorLog.logs)
|
||||
const clearAll = () => {
|
||||
dialogTableVisible.value = false
|
||||
store.dispatch('errorLog/clearErrorLog')
|
||||
}
|
||||
|
||||
return {
|
||||
dialogTableVisible: false,
|
||||
dialogTableVisible,
|
||||
errorLogs,
|
||||
clearAll,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
errorLogs() {
|
||||
const logs = this.$store.state.errorLog.logs
|
||||
logs.forEach(log => {
|
||||
console.log(11, log.vm)
|
||||
})
|
||||
return logs
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clearAll() {
|
||||
this.dialogTableVisible = false
|
||||
this.$store.dispatch('errorLog/clearErrorLog')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.errLog-container {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.message-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import { nextTick } from 'vue'
|
||||
import store from '@/store'
|
||||
|
||||
export default app => {
|
||||
// 判断环境，决定是否需要监控错误，一般生产环境才需要进行错误上报
|
||||
// import.meta.env.DEV代表开发环境
|
||||
// import.meta.env.PROD代表生产环境
|
||||
// 判断环境，决定是否开启错误监控
|
||||
// - import.meta.env.DEV 布尔值，代表开发环境
|
||||
// - import.meta.env.PROD 布尔值，代表生产环境
|
||||
|
||||
// if (import.meta.env.PROD) {
|
||||
// const flag = import.meta.env.PROD // 生产环境才进行错误监控
|
||||
const flag = true // 为了演示，默认开启错误监控。如果你的项目不需要错误监控，请设为false
|
||||
|
||||
export default app => {
|
||||
if (flag) {
|
||||
app.config.errorHandler = function(err, vm, info) {
|
||||
nextTick(() => {
|
||||
store.dispatch('errorLog/addErrorLog', {
|
||||
err,
|
||||
vm,
|
||||
// vm, // 这里不保存vm，否则渲染错误日志的时候控制台会有警告
|
||||
info,
|
||||
url: window.location.href,
|
||||
id: Date.now(),
|
||||
@ -19,5 +22,5 @@ export default app => {
|
||||
console.error(err, info)
|
||||
})
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<breadcrumbs />
|
||||
</div>
|
||||
<div class="action">
|
||||
<error-log class="errLog-container right-menu-item hover-effect" />
|
||||
<error-log />
|
||||
<userinfo />
|
||||
</div>
|
||||
</div>
|
||||
@ -49,6 +49,10 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.mobile {
|
||||
padding-right: 0;
|
||||
|
||||
@ -78,15 +78,6 @@ export default [
|
||||
noCache: true, // 不缓存页面
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'error-log',
|
||||
name: 'test-error-log',
|
||||
component: ErrorLog,
|
||||
meta: {
|
||||
title: '测试错误日志',
|
||||
roles: ['admin', 'visitor'],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'nest',
|
||||
name: 'nest',
|
||||
@ -117,6 +108,15 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'error-log',
|
||||
name: 'test-error-log',
|
||||
component: ErrorLog,
|
||||
meta: {
|
||||
title: '测试错误日志',
|
||||
roles: ['admin', 'visitor'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@ -13,6 +13,10 @@ const mutations = {
|
||||
|
||||
const actions = {
|
||||
addErrorLog({ commit }, log) {
|
||||
// 可以根据需要将错误上报给服务器
|
||||
// ....code.......
|
||||
|
||||
// 触发mutations
|
||||
commit('ADD_ERROR_LOG', log)
|
||||
},
|
||||
clearErrorLog({ commit }) {
|
||||
|
||||
@ -2,21 +2,35 @@
|
||||
<div class="errPage-container">
|
||||
<ErrorA />
|
||||
<ErrorB />
|
||||
<h3>这个页面是测试错误上报功能的</h3>
|
||||
<h2>这个页面是测试错误日志功能的</h2>
|
||||
<h4>
|
||||
本页面主动抛出了错误（任何页面报错都会记录到错误日志中），现在你可以点击右上角的`debugger`图标查看错误日志
|
||||
</h4>
|
||||
<div>
|
||||
本页面主动抛出了错误，你现在可以点击右上角的`debugger`图标查看错误日志
|
||||
你可以在`store/modules/errorLog.js`的`addErrorLog`方法中将错误上报到服务器
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
如果你的项目不需要错误日志功能，你需要把`src/error-log.js`中的flag变量设为false
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, onMounted } from 'vue'
|
||||
import ErrorA from './components/ErrorTestA.vue'
|
||||
import ErrorB from './components/ErrorTestB.vue'
|
||||
import { TestError } from '@/api/test'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'test-error-log',
|
||||
components: { ErrorA, ErrorB },
|
||||
}
|
||||
setup() {
|
||||
onMounted(async () => {
|
||||
await TestError() // 该接口抛出500错误
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user