ant-design/components/alert/ErrorBoundary.tsx
afc163 59ad48476b
refactor: add boime lint and fix lint errrors ()
* chore: add boime lint

* fix lint

* use files ignore

* revert change

* ignore clarity.js

* fix some errors

* fix some errors

* fix some errors

* fix some errors

* add yml file

* Update clarity.js

Signed-off-by: afc163 <afc163@gmail.com>

* add npm run lint:biome

* add npm run lint:biome

* fix test case

* fix ts errors

* fix ts errors

* fix lint and add .lintstagedrc

* shorten prop name

* chore: update package.json

* update biome.json

* chore: remove stylelint

* chore: useOptionalChain

* fix lint

* biome format

* prettier all code

* prettier all code

* fix site test

---------

Signed-off-by: afc163 <afc163@gmail.com>
2024-06-22 21:59:12 +08:00

54 lines
1.2 KiB
TypeScript

import * as React from 'react';
import Alert from './Alert';
interface ErrorBoundaryProps {
message?: React.ReactNode;
description?: React.ReactNode;
children?: React.ReactNode;
id?: string;
}
interface ErrorBoundaryStates {
error?: Error | null;
info?: {
componentStack?: string;
};
}
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryStates> {
state = {
error: undefined,
info: {
componentStack: '',
},
};
componentDidCatch(error: Error | null, info: object) {
this.setState({ error, info });
}
render() {
const { message, description, id, children } = this.props;
const { error, info } = this.state;
const componentStack = info?.componentStack || null;
const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
const errorDescription = typeof description === 'undefined' ? componentStack : description;
if (error) {
return (
<Alert
id={id}
type="error"
message={errorMessage}
description={
<pre style={{ fontSize: '0.9em', overflowX: 'auto' }}>{errorDescription}</pre>
}
/>
);
}
return children;
}
}
export default ErrorBoundary;