海南第四建设工程有限公司网站,网站开发 模板 c,wordpress文章类插件,如何网推全屏错误覆盖层或UI崩溃 VueReact#xff08;错误边界#xff09; Vue Vue的全屏错误覆盖层解决#xff0c;其实只需要配置Error就好#xff0c;在开发服务器的client.overlay中设置关闭全屏覆盖层 module.exports {devServer: {client: {overlay: {warnings: false,error… 全屏错误覆盖层或UI崩溃 VueReact错误边界 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/ErrorBoundaryconst App () {return (divh1User Profile/h1ErrorBoundaryProfile //ErrorBoundary/div)
}export default App当 Profile 组件抛出错误时错误边界会捕获这个错误并展示备用的 UI而不会影响整个应用的渲染~
