LogalDeveloper/owncast
0
Fork 0
Code Activity

Add error boundary to chat. For #2811

Browse Source
This commit is contained in:
Gabe Kangas
2023-03-12 21:53:02 -07:00
parent 593a7faa36
commit 4192482a4c
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/components/chat/ChatContainer/ChatContainer.tsx
View File

@@ -1,5 +1,6 @@
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react'; import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { import {
ConnectedClientInfoEvent, ConnectedClientInfoEvent,
FediverseEvent, FediverseEvent,
@@ -18,6 +19,7 @@ import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage';
import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage'; import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage';
import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage'; import { ChatNameChangeMessage } from '../ChatNameChangeMessage/ChatNameChangeMessage';
import { User } from '../../../interfaces/user.model'; import { User } from '../../../interfaces/user.model';
import { ComponentError } from '../../ui/ComponentError/ComponentError';
export type ChatContainerProps = { export type ChatContainerProps = {
messages: ChatMessage[]; messages: ChatMessage[];
@@ -266,14 +268,25 @@ export const ChatContainer: FC<ChatContainerProps> = ({
); );
return ( return (
<div id="chat-container" className={styles.chatContainer}> <ErrorBoundary
{MessagesTable} // eslint-disable-next-line react/no-unstable-nested-components
{showInput && ( fallbackRender={({ error, resetErrorBoundary }) => (
<div className={styles.chatTextField}> <ComponentError
<ChatTextField enabled={chatEnabled} /> componentName="ChatContainer"
</div> message={error.message}
retryFunction={resetErrorBoundary}
/>
)} )}
</div> >
<div id="chat-container" className={styles.chatContainer}>
{MessagesTable}
{showInput && (
<div className={styles.chatTextField}>
<ChatTextField enabled={chatEnabled} />
</div>
)}
</div>
</ErrorBoundary>
); );
}; };