Add error boundary to chat. For #2811

This commit is contained in:
Gabe Kangas 2023-03-12 21:53:02 -07:00
parent 593a7faa36
commit 4192482a4c
No known key found for this signature in database
GPG key ID: 4345B2060657F330

View file

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