React中的错误边界

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

声明

import { PropsWithChildren, Component } from "react";

type FallbackRender = (props: { error: Error | null }) => React.ReactElement

export class ErrorBoundary extends Component<PropsWithChildren<{ fallbackRender: FallbackRender }>, any> {
    state = {
        error: null
    }

    static getDerivedStateFromError(error: Error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { error };
    }

    render() {
        const { error } = this.state

        const { fallbackRender, children } = this.props
        if (error) {
            // 你可以自定义降级后的 UI 并渲染
            return fallbackRender({ error })
        }

        return children;
    }
}

export const FullPageErrorFallback = ({ error }: { error: Error | null }) => {
    return (
        <Fullpage>
            {/* <Typography.Text type="danger">{error?.message}</Typography.Text> */}
            <ErrorBox error={error}></ErrorBox>
        </Fullpage>
    );
};

//类型守卫
const isError = (error: any): error is Error => error.meseage


const ErrorBox = ({ error }: { error: unknown }) => {
    if (isError(error)) {
        return <Typography.Text type="danger">{error?.message}</Typography.Text>
    }
    return null
}

应用

import React from 'react';
import { ErrorBoundary } from './components/error-bounray';
import { FullPageErrorFallback } from './components/libs';

function App() {

  return (
    <ErrorBoundary fallbackRender={FullPageErrorFallback} >
      {
       ....
      }
    </ErrorBoundary>
  );
}

export default App;