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;
}
}