From 170a3ecde1f1aa1a65354a5577d69a5469370bf6 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 12 Mar 2023 23:05:21 -0700
Subject: [PATCH] Add error boundary to BrowserNotifyModal. For #2811

---
 web/components/modals/AuthModal/AuthModal.tsx |  2 +-
 .../BrowserNotifyModal/BrowserNotifyModal.tsx | 31 +++++++++++++------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/web/components/modals/AuthModal/AuthModal.tsx b/web/components/modals/AuthModal/AuthModal.tsx
index 26ec66720..2e78229c5 100644
--- a/web/components/modals/AuthModal/AuthModal.tsx
+++ b/web/components/modals/AuthModal/AuthModal.tsx
@@ -72,7 +72,7 @@ export const AuthModal: FC<AuthModalProps> = ({ forceTabs }) => {
       // eslint-disable-next-line react/no-unstable-nested-components
       fallbackRender={({ error, resetErrorBoundary }) => (
         <ComponentError
-          componentName="ChatContainer"
+          componentName="AuthModal"
           message={error.message}
           retryFunction={resetErrorBoundary}
         />
diff --git a/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx b/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
index cb7d78d41..96ee7c3d4 100644
--- a/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
+++ b/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
@@ -1,6 +1,7 @@
 import { Row, Spin, Typography, Button } from 'antd';
 import React, { FC, useState } from 'react';
 import { useRecoilValue } from 'recoil';
+import { ErrorBoundary } from 'react-error-boundary';
 import { accessTokenAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
 import {
   registerWebPushNotifications,
@@ -8,6 +9,7 @@ import {
 } from '../../../services/notifications-service';
 import styles from './BrowserNotifyModal.module.scss';
 import isPushNotificationSupported from '../../../utils/browserPushNotifications';
+import { ComponentError } from '../../ui/ComponentError/ComponentError';
 
 const { Title } = Typography;
 
@@ -109,14 +111,25 @@ export const BrowserNotifyModal = () => {
   }
 
   return (
-    <Spin spinning={browserPushPermissionsPending}>
-      <Row className={styles.description}>
-        Get notified right in the browser each time this stream goes live.
-        <a href="https://owncast.online/docs/notifications/#browser-notifications">Learn more</a>
-        &nbsp; about Owncast browser notifications.
-      </Row>
-      <Row>{error}</Row>
-      <PermissionPopupPreview start={() => startBrowserPushRegistration()} />
-    </Spin>
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="BrowserNotifyModal"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
+      <Spin spinning={browserPushPermissionsPending}>
+        <Row className={styles.description}>
+          Get notified right in the browser each time this stream goes live.
+          <a href="https://owncast.online/docs/notifications/#browser-notifications">Learn more</a>
+          &nbsp; about Owncast browser notifications.
+        </Row>
+        <Row>{error}</Row>
+        <PermissionPopupPreview start={() => startBrowserPushRegistration()} />
+      </Spin>
+    </ErrorBoundary>
   );
 };