（react页面错误处理）react错误边界ErrorBoundary和react-use判断是否有网络

原创已于 2023-02-13 11:11:36 修改 · 930 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-09-01 20:54:09 首次发布

js基础专栏收录该内容

7 篇文章

订阅专栏

本文介绍了React中错误边界的使用，如何捕获并处理运行时错误，以及通过`react-use`库检测网络状态。同时，展示了针对不同错误状态的页面展示策略，包括断网、请求状态和数据处理。对于前端无法处理的断网问题，建议客户端在Webview中进行处理。

1，errorBoundary主要用于捕获运行中的dom中的错误，而不是静态类型检测的错误（这个时候typescript

比如window中没有定义a,b属性，以下代码编译不会爆红，但是页面是错误的，将页面做为Test组件放到错误边界class组件中，页面会返回一个something went wrong提示。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }


  componentDidCatch(error, errorInfo) {
    setState({hasError:true})
   }

  render() {
    if (this.state.hasError) {
       return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

const Test = ()=>{
        return <div>{(window as any).a.b}</div>
}


const PageStatus = ()=>{
    return <ErrorBoundary>
        <Test />
</ErrorBoundary>

提示：这里ErrorBoundary必须包裹一个组件，而不是直接包裹dom元素。下面这种写法就不行：

 <ErrorBoundary>
    <div>{(window as any).a.b}</div>
</ErrorBoundary>

2， react-use判断网络是否连接

import { useNetworkState } from 'react-use';


function Mall() {
    const state = useNetworkState();

 useEffect(() => {
        if (state?.online === false) {
             //如果断网了...
        }
      }, [state])

}

或者这样

window.addEventListener("online", function () {
  console.log("网络连接已恢复!");
});
      
window.addEventListener("offline", function () {
  console.log("网络连接已断开!");
});

3，网页错误处理（断网，请求中（加载状态），请求失败接口错误，请求成功数据为空，请求成功数据不为空）

import React from 'react';
import Empty from '@components/empty'
import InitLoading from "@components/initLoading";

interface PageStatusProps {
    isload: 'succeed' | 'error' | 'none' | 'empty';
    children: React.ReactNode;
}

const PageStatus = ({
    isload, children
}: PageStatusProps) => {

     let ele: React.ReactElement  = <React.Fragment>{children}</React.Fragment>;
     if (isload == 'none') {
        ele = <InitLoading />
    }
    if (isload == 'error') {
        ele = (
            <Empty fullPage type='error'>
                <p>可能由于网络状态等原因</p>
                <p>暂无数据</p>
            </Empty>
        )
    }

    if (isload == 'empty') {
        ele = <Empty fullPage />
    }

    return ele;

}
export default PageStatus;

将以上组件包裹在每个页面dom最外层即可：

如果在app中进入H5之前突然断网，因为此时无法访问到H5的页面，所以前端写任何代码都是无效的，此时需要客户端在webview中做处理：

友情链接：安卓webview断网处理 - Jymoon - 博客园

下面是一个开发环境中，使用的一个错误边界文件

import * as React from 'react';
import Empty from '../empty'

interface PropsType {
 children: React.ReactNode;
 hasHeader?:boolean;
 headerContent?:string;
 imgWidth?:number;
}

interface StateType {
 hasError: boolean,
 Error?: null | Error,
 ErrorInfo?: null | React.ErrorInfo,
}

export default class ErrorBoundary extends React.Component<PropsType, StateType> {
  constructor(props: PropsType) {
    super(props);
    this.state = {
      hasError: false,
      Error: null,
      ErrorInfo: null,
    };
  }

  // 控制渲染降级UI
  static getDerivedStateFromError(error: Error): StateType {
    return { hasError: true };
  }

  // 捕获抛出异常
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    this.setState((preState) => (
      { hasError: preState.hasError, Error: error, ErrorInfo: errorInfo }
    ));
  }

  render() {
    const { hasError, Error, ErrorInfo } = this.state;
    const {
      children, hasHeader, imgWidth, headerContent,
    } = this.props;

    // 如果捕获到异常，渲染降级UI
    if (hasError) {
      return (
        <div>
          <Empty type="error" hasHeader={hasHeader} imgWidth={imgWidth} headerContent={headerContent}>
            <p>页面出错了...</p>
            <h1>{`Error:${Error?.message}`}</h1>
            <details style={{ whiteSpace: 'pre-wrap' }}>
            { ErrorInfo?.componentStack}
            </details> 
          </Empty>
        </div>
      );
    }
    return children;
  }
}