You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.7 KiB
65 lines
1.7 KiB
import { Button, Result } from 'antd'
|
|
import React, { ErrorInfo } from 'react'
|
|
|
|
export class ErrorBoundary extends React.Component<
|
|
Record<string, any>,
|
|
{ hasError: boolean; errorInfo: string }
|
|
> {
|
|
static getDerivedStateFromError(error: Error) {
|
|
return { hasError: true, errorInfo: error.message }
|
|
}
|
|
|
|
componentDidCatch(error: any, errorInfo: ErrorInfo) {
|
|
// You can also log the error to an error reporting service
|
|
// eslint-disable-next-line no-console
|
|
console.log(error, errorInfo)
|
|
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
// You can render any custom fallback UI
|
|
return (
|
|
<Result
|
|
style={{
|
|
height: '100%',
|
|
background: '#fff',
|
|
}}
|
|
title="错误信息"
|
|
extra={
|
|
<>
|
|
<div
|
|
style={{
|
|
maxWidth: 620,
|
|
textAlign: 'start',
|
|
backgroundColor: 'rgba(255,229,100,0.3)',
|
|
borderInlineStartColor: '#ffe564',
|
|
borderInlineStartWidth: '9px',
|
|
borderInlineStartStyle: 'solid',
|
|
padding: '20px 45px 20px 26px',
|
|
margin: 'auto',
|
|
marginBlockEnd: '30px',
|
|
marginBlockStart: '20px',
|
|
}}
|
|
>
|
|
<p>{this.state.errorInfo}</p>
|
|
</div>
|
|
<Button
|
|
danger
|
|
type="primary"
|
|
onClick={() => {
|
|
window.location.reload()
|
|
}}
|
|
>
|
|
刷新页面
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
return this.props.children
|
|
}
|
|
|
|
state = { hasError: false, errorInfo: '' }
|
|
}
|