From 358f6ec3cd7951cb507e8863f34772f2880d2b7c Mon Sep 17 00:00:00 2001
From: Suejung Shin <suejung.shin@sentry.io>
Date: Fri, 20 Dec 2024 09:05:45 -0800
Subject: [PATCH] fix: Fix rendered header error (#3590)

---
 src/layouts/BaseLayout/BaseLayout.test.tsx | 28 ++++++++++++++++++++++
 src/layouts/BaseLayout/BaseLayout.tsx      |  5 ++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/layouts/BaseLayout/BaseLayout.test.tsx b/src/layouts/BaseLayout/BaseLayout.test.tsx
index f914fa9e27..822a362686 100644
--- a/src/layouts/BaseLayout/BaseLayout.test.tsx
+++ b/src/layouts/BaseLayout/BaseLayout.test.tsx
@@ -208,6 +208,11 @@ beforeAll(() => {
   server.listen({ onUnhandledRequest: 'warn' })
 })
 
+beforeEach(() => {
+  vi.resetModules()
+  vi.restoreAllMocks()
+})
+
 afterEach(() => {
   queryClient.clear()
   queryClientV5.clear()
@@ -588,4 +593,27 @@ describe('BaseLayout', () => {
       expect(errorMainAppUI).toBeInTheDocument()
     })
   })
+
+  describe('When Header has a network call error', async () => {
+    it('renders nothing for the errored header', async () => {
+      vi.spyOn(
+        await import('layouts/Header'),
+        'default'
+      ).mockImplementationOnce(() => {
+        throw new Error('Simulated Header Error')
+      })
+
+      setup({ currentUser: userHasDefaultOrg })
+      render(<BaseLayout>hello</BaseLayout>, { wrapper: wrapper() })
+
+      const header = screen.queryByText(/Header/)
+      expect(header).not.toBeInTheDocument()
+
+      const mainAppContent = await screen.findByText('hello')
+      expect(mainAppContent).toBeInTheDocument()
+
+      const footerContent = await screen.findByText(/Footer/)
+      expect(footerContent).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/layouts/BaseLayout/BaseLayout.tsx b/src/layouts/BaseLayout/BaseLayout.tsx
index 9a086e9da4..6aed3fb9fe 100644
--- a/src/layouts/BaseLayout/BaseLayout.tsx
+++ b/src/layouts/BaseLayout/BaseLayout.tsx
@@ -7,6 +7,7 @@ import Header from 'layouts/Header'
 import ErrorBoundary from 'layouts/shared/ErrorBoundary'
 import { EmptyErrorComponent } from 'layouts/shared/ErrorBoundary/ErrorBoundary'
 import NetworkErrorBoundary from 'layouts/shared/NetworkErrorBoundary'
+import SilentNetworkErrorWrapper from 'layouts/shared/SilentNetworkErrorWrapper'
 import ToastNotifications from 'layouts/ToastNotifications'
 import { RepoBreadcrumbProvider } from 'pages/RepoPage/context'
 import { useImpersonate } from 'services/impersonate'
@@ -110,7 +111,7 @@ function BaseLayout({ children }: React.PropsWithChildren) {
         {/* Header */}
         <Suspense>
           <ErrorBoundary errorComponent={<EmptyErrorComponent />}>
-            <NetworkErrorBoundary>
+            <SilentNetworkErrorWrapper>
               {isFullExperience || isImpersonating ? (
                 <>
                   <GlobalTopBanners />
@@ -121,7 +122,7 @@ function BaseLayout({ children }: React.PropsWithChildren) {
                   {showDefaultOrgSelector ? <InstallationHelpBanner /> : null}
                 </>
               )}
-            </NetworkErrorBoundary>
+            </SilentNetworkErrorWrapper>
           </ErrorBoundary>
         </Suspense>