前端逻辑错误或UI崩溃解决问题

全屏错误覆盖层或UI崩溃

Vue
React（错误边界）

Vue

Vue的全屏错误覆盖层解决，其实只需要配置Error就好，在开发服务器的client.overlay中设置关闭全屏覆盖层

module.exports = {devServer: {client: {overlay: {warnings: false,errors: false}}}
};

React（错误边界）

错误边界的使用目的为：捕获并处理那些在渲染、生命周期方法和构造函数中出现的错误，不至于让一个组件的崩溃使得整个程序跟着一起崩溃
比如，假设一个社交媒体应用中，用户的个人资料组件发生了错误，如果没有错误边界，整个应用可能会崩溃，但是，如果使用错误边界，可以将这个个人资料组件包裹在错误边界中，当组件出现错误时，错误边界可以渲染出备用的UI，比如一条错误提示信息或者一个默认的用户资料展示页面，而不会让整个应用崩溃

错误边界不能捕获以下几类错误：

事件处理器中的错误，因为它们在异步上下文中执行，超出了 React 渲染周期的范围
异步代码中的错误，比如 setTimeout 或 requestAnimationFrame 回调函数中的错误
服务端渲染期间的错误
自身抛出的错误

ErrorBoundary.jsx

/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import React, { Component } from 'react';class ErrorBoundary extends Component {constructor(props) {super(props);this.state = { hasError: false };}componentDidCatch(error, info) {this.setState({ hasError: true });console.error(error, info);}render() {if (this.state.hasError) {return <div>出错了？</div>;}return this.props.children;}
}export default ErrorBoundary;

模拟一个出错的程序

err.jsx

class Profile extends Component {render() {// 模拟一个会出错的组件// 假设这里的代码有bug导致渲染失败throw new Error('出错了!');// 正常情况下的 UI 渲染return (<div>{/* ... */}</div>);}
}

App.jsx

import Router from './router/index'
import ErrorBoundary from './components/ErrorBoundary'const App = () => {return (<div><h1>User Profile</h1><ErrorBoundary><Profile /></ErrorBoundary></div>)
}export default App