LogalDeveloper/owncast
0
Fork 0
Code Activity

Add error boundary to system Modal. For #2811

Browse Source
This commit is contained in:
Gabe Kangas
2023-03-12 23:09:06 -07:00
parent 02ca54d810
commit 9162386495
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/ui/Modal/Modal.tsx
View File

@@ -1,5 +1,7 @@
import { Spin, Skeleton, Modal as AntModal } from 'antd'; import { Spin, Skeleton, Modal as AntModal } from 'antd';
import React, { FC, ReactNode, useState } from 'react'; import React, { FC, ReactNode, useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ComponentError } from '../ComponentError/ComponentError';
import styles from './Modal.module.scss'; import styles from './Modal.module.scss';
export type ModalProps = { export type ModalProps = {
@@ -70,6 +72,16 @@ export const Modal: FC<ModalProps> = ({
footer={null} footer={null}
centered centered
destroyOnClose destroyOnClose
>
<ErrorBoundary
// eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error, resetErrorBoundary }) => (
<ComponentError
componentName="Modal"
message={error.message}
retryFunction={resetErrorBoundary}
/>
)}
> >
<div id="modal-container" style={{ height: '100%' }}> <div id="modal-container" style={{ height: '100%' }}>
{loading && ( {loading && (
@@ -80,6 +92,7 @@ export const Modal: FC<ModalProps> = ({
{children && <div className={styles.content}>{children}</div>} {children && <div className={styles.content}>{children}</div>}
{loading && <Spin className={styles.spinner} spinning={loading} size="large" />} {loading && <Spin className={styles.spinner} spinning={loading} size="large" />}
</div> </div>
</ErrorBoundary>
</AntModal> </AntModal>
); );
}; };