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,14 +68,25 @@ export const AuthModal: FC<AuthModalProps> = ({ forceTabs }) => {
   ];
 
   return (
-    <div>
+    <ErrorBoundary
-      <Tabs
+      // eslint-disable-next-line react/no-unstable-nested-components
-        defaultActiveKey="1"
+      fallbackRender={({ error, resetErrorBoundary }) => (
-        items={items}
+        <ComponentError
-        type="card"
+          componentName="ChatContainer"
-        size="small"
+          message={error.message}
-        renderTabBar={fediverseEnabled || forceTabs ? null : () => null}
+          retryFunction={resetErrorBoundary}
-      />
+        />
-    </div>
+      )}
+    >
+      <div>
+        <Tabs
+          defaultActiveKey="1"
+          items={items}
+          type="card"
+          size="small"
+          renderTabBar={fediverseEnabled || forceTabs ? null : () => null}
+        />
+      </div>
+    </ErrorBoundary>
   );
 };