Error Boundaries组件相信大家不陌生，通常会用在react的根节点。其又叫错误边界组件。是在 React 16 中引入的，具体来说是 React 16.0.0，发布于 2017 年 9 月。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染可以显示回退 UI
return { hasError: true };
}
componentDidCatch(error, info) {
// 可以在这里记录错误日志，比如发送到日志服务
console.log(error, info);
}
render() {
if (this.state.hasError) {
// 渲染出错时的备用 UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
function MyComponent() {
throw new Error('This is an error!');
return <div>My Component</div>;
}
在 React 16 之前，如果组件渲染过程中发生错误，整个 React 组件树会因此崩溃，并且错误会传播到根组件，导致整个应用不可用。React 16 引入了错误边界后，开发者能够更好地控制错误，防止应用的崩溃，并通过显示备选 UI 来提升用户体验。
错误边界是 React 团队为增强健壮性和稳定性做出的重要改进之一，尤其是在构建大型应用时，能够极大提高对错误的容错能力。
Error Boundaries
举个例子，假设你有一个组件负责从API获取用户数据。如果网络出现问题，请求可能会失败。如果没有错误边界，这可能会导致整个React组件树崩溃。但有了错误边界，你就可以将错误限制在那个组件内部，并提供一个备用的用户界面，比如显示一个错误消息。
错误边界主要依赖两个生命周期方法：
static getDerivedStateFromError(error)：当子组件抛出错误时，这个方法会被调用，允许你更新组件的状态，以便渲染一个备用的用户界面。
componentDidCatch(error, info)：这个方法用于记录错误信息，方便调试。
错误边界的限制 • 错误边界无法捕获事件处理器中的错误。需要手动在事件处理器中使用 try-catch 。 • 它不能捕获异步代码中的错误（例如 setTimeout、Promise 中的错误）。 • 服务端渲染期间发生的错误也不会被错误边界捕获。
如何在Next.js中使用错误边界
首先，我们创建一个错误边界组件：
// components/ErrorBoundary.js
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 当捕获到错误时，更新状态以显示备用UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// 将错误信息记录到控制台或外部服务
console.error("Error occurred:", error, errorInfo);
}
render() {
if (this.state.hasError) {
// 如果捕获到错误，渲染备用UI
return <h1>出了点问题，请稍后再试。</h1>;
}
// 否则，正常渲染子组件
return this.props.children;
}
}
export default ErrorBoundary;
然后，我们可以在Next.js的页面中使用这个错误边界：
// pages/index.js
import ErrorBoundary from '../components/ErrorBoundary';
import FaultyComponent from '../components/FaultyComponent';
export default function Home() {
return (
<div>
<h1>欢迎使用Next.js错误边界示例</h1>
<ErrorBoundary>
<FaultyComponent />
</ErrorBoundary>
</div>
);
}
接下来，我们可以在一个组件中模拟一个错误：
// components/FaultyComponent.js
import React from 'react';
const FaultyComponent = () => {
// 模拟一个错误
throw new Error("这是一个模拟的错误！");
return <div>你永远不会看到这段文字。</div>;
}
export default FaultyComponent;
当你访问主页时，应用不会崩溃，而是会显示错误边界提供的备用UI：“出了点问题，请稍后再试。”
改进备用UI
备用UI只是一个简单的错误消息。你可以使其更加友好和有用，比如添加重试按钮、错误日志服务，或者建议用户联系支持。
这里是一个改进后的备用UI示例：
// components/ErrorBoundary.js
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error("错误:", error, errorInfo);
// 你也可以将错误信息发送到外部服务
}
handleRetry = () => {
this.setState({ hasError: false });
};
render() {
if (this.state.hasError) {
return (
<div>
<h2>哎呀，出错了。</h2>
<p>请尝试刷新页面或联系支持。</p>
<button onClick={this.handleRetry}>重试</button>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
处理异步错误
错误边界不会自动捕获异步代码中的错误。如果你在使用异步函数或Promises，你需要在这些代码中手动处理错误。
这里是一个处理异步错误的示例：
// components/AsyncComponent.js
import React, { useState, useEffect } from 'react';
const AsyncComponent = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const res = await fetch('/api/data');
if (!res.ok) {
throw new Error("网络响应不正常");
}
const json = await res.json();
setData(json);
} catch (err) {
setError(err);
}
};
fetchData();
}, []);
if (error) {
return <div>错误：{error.message}</div>;
}
return data ? <div>{data.message}</div> : <div>加载中...</div>;
};
export default AsyncComponent;
在这个例子中，如果在获取数据时发生错误，我们会显示一个用户友好的错误消息，而不是让整个应用崩溃。
Next.js中的服务器端错误处理
Next.js提供了内置的服务器端错误页面。例如，你可以通过自定义pages/_error.js文件来更优雅地处理服务器端错误：
// pages/_error.js
function Error({ statusCode }) {
return (
<p>
{statusCode
? `服务器发生了错误 ${statusCode}`
: '客户端发生了错误'}
</p>
);
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
return { statusCode };
};
export default Error;
通过这种方式，Next.js会为服务器端错误显示一个自定义的错误页面，而你可以使用错误边界来处理客户端渲染错误。
结束
以上就是Next.js中处理异常的方式，希望对你有用。
