mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 21:03:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add error boundaries to MobileContent. For #2811

Browse source
This commit is contained in:
Gabe Kangas 2023-03-12 21:40:36 -07:00
parent ebd3415c4b
commit 593a7faa36
No known key found for this signature in database
GPG key ID: 4345B2060657F330
1 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
web/components/ui/Content/MobileContent.tsx
View file

@ -1,6 +1,7 @@
import React, { ComponentType, FC } from 'react'; import React, { ComponentType, FC } from 'react';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { Skeleton, TabsProps } from 'antd'; import { Skeleton, TabsProps } from 'antd';
import { ErrorBoundary } from 'react-error-boundary';
import { SocialLink } from '../../../interfaces/social-link.model'; import { SocialLink } from '../../../interfaces/social-link.model';
import styles from './Content.module.scss'; import styles from './Content.module.scss';
import { CustomPageContent } from '../CustomPageContent/CustomPageContent'; import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
@ -9,6 +10,7 @@ import { ChatMessage } from '../../../interfaces/chat-message.model';
import { CurrentUser } from '../../../interfaces/current-user'; import { CurrentUser } from '../../../interfaces/current-user';
import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu'; import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
import { ExternalAction } from '../../../interfaces/external-action'; import { ExternalAction } from '../../../interfaces/external-action';
import { ComponentError } from '../ComponentError/ComponentError';
export type MobileContentProps = { export type MobileContentProps = {
name: string; name: string;
@ -61,6 +63,14 @@ type ChatContentProps = {
currentUser: CurrentUser; currentUser: CurrentUser;
}; };
const ComponentErrorFallback = ({ error, resetErrorBoundary }) => (
<ComponentError
message={error}
componentName="MobileContent"
retryFunction={resetErrorBoundary}
/>
);
const ChatContent: FC<ChatContentProps> = ({ showChat, chatEnabled, messages, currentUser }) => { const ChatContent: FC<ChatContentProps> = ({ showChat, chatEnabled, messages, currentUser }) => {
const { id, displayName } = currentUser; const { id, displayName } = currentUser;
@ -146,17 +156,24 @@ export const MobileContent: FC<MobileContentProps> = ({
); );
return ( return (
<div className={styles.lowerSectionMobile}> <ErrorBoundary
{items.length > 1 ? ( // eslint-disable-next-line react/no-unstable-nested-components
<Tabs fallbackRender={({ error, resetErrorBoundary }) => (
className={styles.tabs} <ComponentErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
defaultActiveKey="0"
items={items}
renderTabBar={replacementTabBar}
/>
) : (
aboutTabContent
)} )}
</div> >
<div className={styles.lowerSectionMobile}>
{items.length > 1 ? (
<Tabs
className={styles.tabs}
defaultActiveKey="0"
items={items}
renderTabBar={replacementTabBar}
/>
) : (
aboutTabContent
)}
</div>
</ErrorBoundary>
); );
}; };