qc-EnterpriseWeChat-Pro/src/Hoc/HocError.tsx

import React, { Component } from 'react'
const xhh = require('@/public/xhh.jpeg')
/**错误边界捕获*/
function HocError(Element: any) {
    return class ErrorBoundary extends Component<any> {
        constructor(props:any){
            super(props)
        }
        state = { hasError: false }
        static getDerivedStateFromError(error: any) {
            return { hasError: true }
        }
        componentDidCatch(...err: any) {
            // 你同样可以将错误日志上报给服务器
            console.log(...err);
        }
        render() {
            let { hasError } = this.state
            if (hasError) {
                return <>
                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexFlow: 'column', height: '100%', background: '#fff' }}>
                        <div style={{ fontSize: 25 }}>恭喜你发现了一个BUG，请保护BUG现场，钉钉联系沈武！</div>
                        <img src={xhh} />
                    </div>
                </>
            }
            return <Element {...this.props} />
        }
    }
}
export default HocError