Vue 3 + Laravel单体应用：如何避免JS导致前端整体崩溃？

一、全局错误捕获与处理 #

1. Vue 全局错误处理器 #

在Vue应用初始化时配置app.config.errorHandler，覆盖组件渲染、生命周期钩子中的未处理错误：

// main.js（Vue 3 组合式API场景）
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Vue 全局错误捕获
app.config.errorHandler = (err, instance, info) => {
  console.error('Vue 全局错误:', err, instance, info)
  // 上报错误到后端
  reportErrorToLaravel(err, info)
  // 触发全局错误状态，切换备用UI
  window.$vueAppState.setGlobalError(err)
}

app.mount('#app')

2. 原生JS错误与Promise拒绝捕获 #

捕获Vue未覆盖的全局JS错误和未处理的Promise拒绝：

// main.js 中追加
// 捕获全局JS错误
window.addEventListener('error', (event) => {
  console.error('全局JS错误:', event.error)
  reportErrorToLaravel(event.error, 'global_js_error')
  window.$vueAppState.setGlobalError(event.error)
})

// 捕获未处理Promise拒绝
window.addEventListener('unhandledrejection', (event) => {
  console.error('未处理Promise拒绝:', event.reason)
  reportErrorToLaravel(event.reason, 'unhandled_promise')
  window.$vueAppState.setGlobalError(event.reason)
})

二、错误上报到Laravel后端 #

编写上报函数，通过Axios将错误信息发送到Laravel API：

// utils/errorReporter.js
import axios from 'axios'

export function reportErrorToLaravel(error, type = 'vue_error') {
  // 开发环境跳过上报，避免干扰调试
  if (import.meta.env.DEV) return

  try {
    axios.post('/api/errors/report', {
      message: error.message,
      stack: error.stack,
      type: type,
      url: window.location.href,
      user_agent: navigator.userAgent,
      user_id: window.authUser?.id || null // 若前端已获取用户信息
    })
  } catch (reportErr) {
    // 上报失败时存入localStorage，后续页面加载时重试
    console.error('错误上报失败:', reportErr)
    const pendingErrors = JSON.parse(localStorage.getItem('pending_errors') || '[]')
    pendingErrors.push({ error, type, timestamp: Date.now() })
    localStorage.setItem('pending_errors', JSON.stringify(pendingErrors))
  }
}

Laravel端对应路由与控制器：

// routes/api.php
Route::post('/errors/report', [ErrorReportController::class, 'store']);

// app/Http/Controllers/ErrorReportController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\ErrorReport;

class ErrorReportController extends Controller
{
    public function store(Request $request)
    {
        ErrorReport::create([
            'message' => $request->message,
            'stack' => $request->stack,
            'type' => $request->type,
            'url' => $request->url,
            'user_agent' => $request->user_agent,
            'user_id' => auth()->id() ?? null
        ]);
        
        return response()->json(['status' => 'ok']);
    }
}

三、优雅展示备用UI #

用Pinia维护全局错误状态，在根组件中根据状态切换备用页面：

// stores/appState.js（Pinia示例）
import { defineStore } from 'pinia'

export const useAppStateStore = defineStore('appState', {
  state: () => ({
    globalError: null
  }),
  actions: {
    setGlobalError(error) {
      this.globalError = error
    },
    clearGlobalError() {
      this.globalError = null
    }
  }
})

根组件App.vue实现：

<template>
  <div v-if="globalError" class="global-error-fallback">
    <h2>页面出现异常</h2>
    <p class="error-message">{{ globalError.message }}</p>
    <button @click="resetApp">重新加载页面</button>
  </div>
  <router-view v-else />
</template>

<script setup>
import { useAppStateStore } from '@/stores/appState'
import { storeToRefs } from 'pinia'

const appState = useAppStateStore()
const { globalError } = storeToRefs(appState)

const resetApp = () => {
  appState.clearGlobalError()
  window.location.reload()
}

// main.js中需挂载Pinia并暴露全局引用：
// import { createPinia } from 'pinia'
// const pinia = createPinia()
// app.use(pinia)
// window.$vueAppState = useAppStateStore()
</script>

<style scoped>
.global-error-fallback {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  color: #dc3545;
}

.error-message {
  margin: 16px 0;
  max-width: 600px;
  text-align: center;
}
</style>

四、组件级错误边界（可选） #

如果需要隔离单个组件崩溃对全局的影响，可在父组件中使用onErrorCaptured钩子：

<script setup>
import { onErrorCaptured } from 'vue'

onErrorCaptured((err, instance, info) => {
  console.error('组件级错误:', err, instance, info)
  // 返回true阻止错误向上传播，仅在当前组件处理
  return true
})
</script>

五、额外防护措施 #

• 异步操作兜底：给Axios添加全局响应拦截器，捕获请求错误避免静默失败
• 开发环境提示：在dev模式下，全局错误处理器可弹出提示框，快速定位问题
• 代码预校验：启用ESLint或TypeScript，提前发现潜在语法、类型错误

内容的提问来源于stack exchange，提问作者Sanja