28 lines
898 B
Vue
28 lines
898 B
Vue
<script setup lang="ts">
|
|
import { onErrorCaptured, ref } from 'vue'
|
|
import FallbackPage from './FallbackPage.vue'
|
|
|
|
/**
|
|
* 渲染错误边界：捕获子树（布局 + 页面）的未处理错误，就地渲染 500 缺省页，替代白屏。
|
|
*
|
|
* 移植自 fms-vue 的 src/views/fallback/ErrorBoundary.vue。
|
|
* 500 页的「重新加载」按钮即恢复手段（整页刷新重置一切状态）。
|
|
*
|
|
* onErrorCaptured 返回 false 的语义：
|
|
* 标记该错误「已处理」，阻止它继续向上冒泡到 app.config.errorHandler。
|
|
* 但这里仍保留 console.error —— 兜底页只是让用户不白屏，排查线索不能丢。
|
|
*/
|
|
const hasError = ref(false)
|
|
|
|
onErrorCaptured((error) => {
|
|
hasError.value = true
|
|
console.error('[ErrorBoundary]', error)
|
|
return false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<FallbackPage v-if="hasError" status="500" />
|
|
<slot v-else />
|
|
</template>
|