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

Vue

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

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

React（错误边界）

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

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

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

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

当 Profile 组件抛出错误时，错误边界会捕获这个错误并展示备用的 UI，而不会影响整个应用的渲染~