在React 16中引入了错误边界概念来处理javascript错误并显示后备UI。
通过在终端中运行以下命令来创建新的react应用程序：
yarn global add create-react-app
create-react-app react-error-boundary
cd react-error-boundary
App.js在您喜欢的编辑器中打开文件，并用以下内容替换所有内容：
import React, { useState } from "react";
export function App() {
const [counter, setCounter] = useState(0);
if (counter === 5) {
throw new Error("Counter is reached at its maximum value :)");
}
return (
<>
<p>{counter}</p>
<button onClick={() => setCounter(counter + 1)}>Add</button>
</>
);
}
让我们看看如果我们创建一个构建并从那里提供服务会发生什么：
yarn run build
serve -s build
运行serve命令后，两个URL将出现在终端内，在浏览器中打开其中一个。如果持续按下Add按钮，它将增加计数器变量的值，并且当计数器值达到5一段时间后，您的应用程序将变得无响应，并且将发生以下情况：
要解决上述问题，请创建一个新组件，您可以将其命名为任意名称，但是ErrorBoundary在创建文件后，我将其重命名为其中，并在其中放置以下内容：
import React, { Component } from "react";
export class ErrorBoundary extends Component {
state = {
error: null,
errorInfo: null
};
componentDidCatch(error, errorInfo) {
this.setState({
error,
errorInfo
});
}
render() {
// If there are no errors render
// the child components
if (!this.state.errorInfo) {
return this.props.children;
}
// Display custom UI if there are errors
// in our application
return (
<div>Something went wrong</div>
);
}
}
让我们打开index.js并包装App组件ErrorBoundary：
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { ErrorBoundary } from "./ErrorBoundary";
ReactDOM.render(
<ErrorBoundary>
<App />
</ErrorBoundary>,
document.getElementById("root")
);
我们必须再次创建一个新的构建，然后重新启动构建服务器：
yarn run build
serve -s build
运行serve命令后，打开出现在终端内部的链接。
