增加 ajax 错误的捕捉示例

Former-commit-id: ff8cda0e301b59db9ed6ebae34acac7b03e890ba [formerly ff8cda0e301b59db9ed6ebae34acac7b03e890ba [formerly ff8cda0e301b59db9ed6ebae34acac7b03e890ba [formerly ff8cda0e301b59db9ed6ebae34acac7b03e890ba [formerly dbf242544733fb012f7539d174519b6ba1c19d3e [formerly 2a164f6c59e772be2699ea07d9a41b84cdaf97ff]]]]]
Former-commit-id: 40e977135b0c8bfbd51e87b534eefbb6f6d386ea
Former-commit-id: 68e6984ade3df1b6102792f11d3530ff06691261
Former-commit-id: b8fc000ad260dcf9ab15304df1fabd8ec45dbd51 [formerly eb154d14e358458e6dc1aa8d11b71a9dd77f693b]
Former-commit-id: 28aa0b81492e52f381255159bde81f9a79c00f00
Former-commit-id: 8e5a82c22f0db8e4d758254c8622b96ec83aa33b
Former-commit-id: 6eb4f8c3bc381e3180f7ee22eaa5766fc2fcf12c
Former-commit-id: 652a133e3a31b44af5e2e4aa2d4a71730e5470c1
Former-commit-id: 2dde2e26c765600d57e31f31b445baff7628c581

src/api/demo.playground.log.ajax.js

@@ -0,0 +1,8 @@
+import request from '@/plugin/axios'
+
+export function getInvalidUrl () {
+  return request({
+    url: '/invalid-url',
+    method: 'get'
+  })
+}

src/menu/modules/demo-playground.js

@@ -93,6 +93,7 @@ export default {
       children: [
         { path: `${pre}log/log`, title: '日志记录', icon: 'dot-circle-o' },
         { path: `${pre}log/error`, title: '错误捕捉', icon: 'bug' },
+        { path: `${pre}log/ajax`, title: 'Ajax 错误', icon: 'bug' },
         { path: `${pre}log/console`, title: '控制台日志', icon: 'lightbulb-o' }
       ]
     },

src/router/modules/playground.js

@@ -33,9 +33,10 @@ export default {
     { path: 'db/page-user', name: `${pre}db-page-user`, component: _import('demo/playground/db/page-user'), meta: { ...meta, title: '私有路由存储' } },
     { path: 'db/page-snapshot-public', name: `${pre}db-page-snapshot-public`, component: _import('demo/playground/db/page-snapshot-public'), meta: { ...meta, title: '路由快照' } },
     { path: 'db/page-snapshot-user', name: `${pre}db-page-snapshot-user`, component: _import('demo/playground/db/page-snapshot-user'), meta: { ...meta, title: '私有路由快照' } },
-    { path: 'log/log', name: `${pre}log-log`, component: _import('demo/playground/log/log'), meta: { ...meta, title: '日志记录' } },
-    { path: 'log/error', name: `${pre}log-error`, component: _import('demo/playground/log/error'), meta: { ...meta, title: '错误捕捉' } },
+    { path: 'log/ajax', name: `${pre}log-ajax`, component: _import('demo/playground/log/ajax'), meta: { ...meta, title: 'Ajax 错误' } },
     { path: 'log/console', name: `${pre}log-console`, component: _import('demo/playground/log/console'), meta: { ...meta, title: '控制台日志' } },
+    { path: 'log/error', name: `${pre}log-error`, component: _import('demo/playground/log/error'), meta: { ...meta, title: '错误捕捉' } },
+    { path: 'log/log', name: `${pre}log-log`, component: _import('demo/playground/log/log'), meta: { ...meta, title: '日志记录' } },
     { path: 'env', name: `${pre}env`, component: _import('demo/playground/env'), meta: { ...meta, title: '环境信息' } }
   ])('demo-playground-')
 }

src/views/demo/playground/log/ajax/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">Ajax 错误</template>
+    <p class="d2-mt-0">请打开浏览器控制台，然后点击下面的按钮，尝试访问一个不存在的网络地址</p>
+    <el-button type="danger" @click="handleClick">请求错误的地址</el-button>
+    <p>此错误已经被记录在日志页面，并在页面右上"日志按钮"区域显示提示信息</p>
+  </d2-container>
+</template>
+
+<script>
+import { getInvalidUrl } from '@api/demo.playground.log.ajax.js'
+export default {
+  data () {
+    return {
+      filename: __filename
+    }
+  },
+  methods: {
+    handleClick () {
+      getInvalidUrl()
+    }
+  }
+}
+</script>

src/views/demo/playground/log/error/index.vue

@@ -3,6 +3,7 @@
     <template slot="header">捕获错误信息</template>
     <p class="d2-mt-0">请打开浏览器控制台，然后点击下面的按钮</p>
     <el-button type="danger" @click="handleNewError">触发一个错误</el-button>
+    <p>此错误已经被记录在日志页面，并在页面右上"日志按钮"区域显示提示信息</p>
   </d2-container>
 </template>
 

src/views/demo/playground/log/log/index.vue

@@ -8,6 +8,7 @@
       class="d2-mr-10"
       style="width: 200px;"/>
     <el-button type="primary" @click="handleAdd">记录</el-button>
+    <p>此信息已经被记录在日志页面，并在页面右上"日志按钮"区域显示提示信息</p>
   </d2-container>
 </template>