Add error boundary to Auth modal. For #2811

web/components/modals/AuthModal/AuthModal.tsx

@@ -1,6 +1,7 @@
 import { Tabs } from 'antd';
 import { useRecoilValue } from 'recoil';
 import { FC } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { IndieAuthModal } from '../IndieAuthModal/IndieAuthModal';
 import { FediAuthModal } from '../FediAuthModal/FediAuthModal';
 
@@ -12,6 +13,7 @@ import {
   clientConfigStateAtom,
 } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
+import { ComponentError } from '../../ui/ComponentError/ComponentError';
 
 export type AuthModalProps = {
   forceTabs?: boolean;
@@ -66,6 +68,16 @@ export const AuthModal: FC<AuthModalProps> = ({ forceTabs }) => {
   ];
 
   return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="ChatContainer"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
       <div>
         <Tabs
           defaultActiveKey="1"
@@ -75,5 +87,6 @@ export const AuthModal: FC<AuthModalProps> = ({ forceTabs }) => {
           renderTabBar={fediverseEnabled || forceTabs ? null : () => null}
         />
       </div>
+    </ErrorBoundary>
   );
 };