LogalDeveloper/owncast
0
Fork 0
Code Activity

Add error boundary to BrowserNotifyModal. For #2811

Browse Source
This commit is contained in:
Gabe Kangas
2023-03-12 23:05:21 -07:00
parent 02e937c351
commit 170a3ecde1
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/modals/AuthModal/AuthModal.tsx
View File

@@ -72,7 +72,7 @@ export const AuthModal: FC<AuthModalProps> = ({ forceTabs }) => {
// eslint-disable-next-line react/no-unstable-nested-components // eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error, resetErrorBoundary }) => ( fallbackRender={({ error, resetErrorBoundary }) => (
<ComponentError <ComponentError
componentName="ChatContainer" componentName="AuthModal"
message={error.message} message={error.message}
retryFunction={resetErrorBoundary} retryFunction={resetErrorBoundary}
/> />

31
web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
View File

@@ -1,6 +1,7 @@
import { Row, Spin, Typography, Button } from 'antd'; import { Row, Spin, Typography, Button } from 'antd';
import React, { FC, useState } from 'react'; import React, { FC, useState } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { ErrorBoundary } from 'react-error-boundary';
import { accessTokenAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore'; import { accessTokenAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
import { import {
registerWebPushNotifications, registerWebPushNotifications,
@@ -8,6 +9,7 @@ import {
} from '../../../services/notifications-service'; } from '../../../services/notifications-service';
import styles from './BrowserNotifyModal.module.scss'; import styles from './BrowserNotifyModal.module.scss';
import isPushNotificationSupported from '../../../utils/browserPushNotifications'; import isPushNotificationSupported from '../../../utils/browserPushNotifications';
import { ComponentError } from '../../ui/ComponentError/ComponentError';
const { Title } = Typography; const { Title } = Typography;
@@ -109,14 +111,25 @@ export const BrowserNotifyModal = () => {
} }
return ( return (
<Spin spinning={browserPushPermissionsPending}> <ErrorBoundary
<Row className={styles.description}> // eslint-disable-next-line react/no-unstable-nested-components
Get notified right in the browser each time this stream goes live. fallbackRender={({ error, resetErrorBoundary }) => (
<a href="https://owncast.online/docs/notifications/#browser-notifications">Learn more</a> <ComponentError
&nbsp; about Owncast browser notifications. componentName="BrowserNotifyModal"
</Row> message={error.message}
<Row>{error}</Row> retryFunction={resetErrorBoundary}
<PermissionPopupPreview start={() => startBrowserPushRegistration()} /> />
</Spin> )}
>
<Spin spinning={browserPushPermissionsPending}>
<Row className={styles.description}>
Get notified right in the browser each time this stream goes live.
<a href="https://owncast.online/docs/notifications/#browser-notifications">Learn more</a>
&nbsp; about Owncast browser notifications.
</Row>
<Row>{error}</Row>
<PermissionPopupPreview start={() => startBrowserPushRegistration()} />
</Spin>
</ErrorBoundary>
); );
}; };