Skip to content

Commit f9aaaa9

Browse files
PanJiaChenPanJiaChen
committed
perf[errorLog]:optimized error-log
1 parent 85492f1 commit f9aaaa9

File tree

8 files changed

+118
-74
lines changed

8 files changed

+118
-74
lines changed

‎src/components/ErrLog/index.vue

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎src/components/ErrorLog/index.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<el-badge :is-dot="true" style="line-height: 30px;" @click.native="dialogTableVisible=true">
4+
<el-button size="small" type="danger" class="bug-btn">
5+
<svg t="1492682037685" class="bug-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863"
6+
xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
7+
<path d="M969.142857 548.571429q0 14.848-10.861714 25.709714t-25.709714 10.861714l-128 0q0 97.718857-38.290286 165.705143l118.857143 119.442286q10.861714 10.861714 10.861714 25.709714t-10.861714 25.709714q-10.276571 10.861714-25.709714 10.861714t-25.709714-10.861714l-113.152-112.566857q-2.852571 2.852571-8.557714 7.424t-23.990857 16.274286-37.156571 20.845714-46.848 16.566857-55.442286 7.424l0-512-73.142857 0 0 512q-29.147429 0-58.002286-7.716571t-49.700571-18.870857-37.705143-22.272-24.868571-18.578286l-8.557714-8.009143-104.557714 118.272q-11.446857 11.995429-27.428571 11.995429-13.714286 0-24.576-9.142857-10.861714-10.276571-11.702857-25.417143t8.850286-26.587429l115.419429-129.718857q-33.133714-65.133714-33.133714-156.562286l-128 0q-14.848 0-25.709714-10.861714t-10.861714-25.709714 10.861714-25.709714 25.709714-10.861714l128 0 0-168.009143-98.852571-98.852571q-10.861714-10.861714-10.861714-25.709714t10.861714-25.709714 25.709714-10.861714 25.709714 10.861714l98.852571 98.852571 482.304 0 98.852571-98.852571q10.861714-10.861714 25.709714-10.861714t25.709714 10.861714 10.861714 25.709714-10.861714 25.709714l-98.852571 98.852571 0 168.009143 128 0q14.848 0 25.709714 10.861714t10.861714 25.709714zM694.857143 219.428571l-365.714286 0q0-75.995429 53.430857-129.426286t129.426286-53.430857 129.426286 53.430857 53.430857 129.426286z"
8+
p-id="1864"></path>
9+
</svg>
10+
</el-button>
11+
</el-badge>
12+
13+
<el-dialog title="Error Log" :visible.sync="dialogTableVisible" width="80%">
14+
<el-table :data="logsList" border>
15+
<el-table-column label="Message">
16+
<template slot-scope="scope">
17+
<div>
18+
<span class="message-title">Msg:</span>
19+
<el-tag type="danger">{{ scope.row.err.message }}</el-tag>
20+
</div>
21+
<br/>
22+
<div>
23+
<span class="message-title" style="padding-right: 10px;">Info: </span>
24+
<el-tag type="warning">{{scope.row.vm.$vnode.tag}} error in {{scope.row.info}}</el-tag>
25+
</div>
26+
<br/>
27+
<div>
28+
<span class="message-title" style="padding-right: 16px;">Url: </span>
29+
<el-tag type="success">{{scope.row.url}}</el-tag>
30+
</div>
31+
</template>
32+
</el-table-column>
33+
<el-table-column label="Stack">
34+
<template slot-scope="scope">
35+
{{ scope.row.err.stack}}
36+
</template>
37+
</el-table-column>
38+
</el-table>
39+
</el-dialog>
40+
41+
</div>
42+
</template>
43+
44+
<script>
45+
export default {
46+
name: 'errorLog',
47+
props: {
48+
logsList: {
49+
type: Array
50+
}
51+
},
52+
data() {
53+
return {
54+
dialogTableVisible: false
55+
}
56+
}
57+
}
58+
</script>
59+
60+
<style scoped>
61+
.bug-btn.el-button--small {
62+
padding: 9px 10px;
63+
}
64+
.bug-svg {
65+
width: 1em;
66+
height: 1em;
67+
vertical-align: -0.15em;
68+
fill: currentColor;
69+
overflow: hidden;
70+
}
71+
.message-title {
72+
font-size: 16px;
73+
color: #333;
74+
font-weight: bold;
75+
padding-right: 8px;
76+
}
77+
</style>

‎src/errorLog.js

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import Vue from 'vue'
2-
import errLog from '@/store/errLog'
2+
import errLog from '@/store/errorLog'
33

4-
// 生产环境错误日志
5-
if (process.env.NODE_ENV === 'production') {
6-
Vue.config.errorHandler = function(err, vm) {
7-
console.log(err, window.location.href)
8-
errLog.pushLog({
9-
err,
10-
url: window.location.href,
11-
vm
12-
})
13-
}
4+
// you can set only in production env show the error-log
5+
// if (process.env.NODE_ENV === 'production') {
6+
Vue.config.errorHandler = function(err, vm, info) {
7+
errLog.pushLog({
8+
err,
9+
vm,
10+
info,
11+
url: window.location.href
12+
})
13+
console.error(err, info)
1414
}
15+
// }

‎src/store/errLog.js renamed to ‎src/store/errorLog.js

File renamed without changes.

‎src/views/errorLog/errcode.vue renamed to ‎src/views/errorLog/errorTestA.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,9 @@
55
<!--error code-->
66
</div>
77
</template>
8+
9+
<script>
10+
export default {
11+
name: 'errorTestA'
12+
}
13+
</script>

‎src/views/errorLog/errorTestB.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div></div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
created() {
8+
this.b = b // eslint-disable-line
9+
}
10+
}
11+
</script>

‎src/views/errorLog/index.vue

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
<template>
22
<div class="errPage-container">
3-
<err-code></err-code>
3+
<errorA></errorA>
4+
<errorB></errorB>
45

56
<h3>请点击右上角bug小图表</h3>
67
<code>
7-
现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在Vue官网提供了一个方法来捕获处理异常
8+
现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常.
9+
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">文档介绍</a>
810
</code>
9-
<a href="#"><img src='http://panjiachen.github.io/images/errHandler.png'></a>
11+
<a href="#">
12+
<img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>
13+
</a>
1014
</div>
1115
</template>
1216

1317
<script>
14-
import errCode from './errcode'
18+
import errorA from './errorTestA'
19+
import errorB from './errorTestB'
1520
1621
export default {
1722
name: 'errorLog',
18-
components: { errCode }
23+
components: { errorA, errorB }
1924
}
2025
</script>
2126

‎src/views/layout/components/Navbar.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ import Breadcrumb from '@/components/Breadcrumb'
5757
import Hamburger from '@/components/Hamburger'
5858
import ThemePicker from '@/components/ThemePicker'
5959
import Screenfull from '@/components/Screenfull'
60-
import ErrorLog from '@/components/ErrLog'
61-
import errLogStore from 'store/errLog'
60+
import ErrorLog from '@/components/ErrorLog'
61+
import errLogStore from '@/store/errorLog'
6262
6363
export default {
6464
components: {

0 commit comments

Comments
 (0)