From 9d4e644c17b8a9f6dd09b957ec3e8197a2a5d843 Mon Sep 17 00:00:00 2001
From: Suejung Shin <suejung.shin@sentry.io>
Date: Sun, 22 Sep 2024 21:23:55 -0700
Subject: [PATCH] fix: Show header on global error

---
 .../NetworkErrorBoundary.jsx                  | 167 ++++++++++--------
 1 file changed, 93 insertions(+), 74 deletions(-)

diff --git a/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx b/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx
index 64969e3fa7..637f0f45f8 100644
--- a/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx
+++ b/src/layouts/shared/NetworkErrorBoundary/NetworkErrorBoundary.jsx
@@ -1,14 +1,11 @@
+import { useState, useEffect } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import { useHistory } from 'react-router-dom'
 import cs from 'classnames'
 import PropTypes from 'prop-types'
-import { Component, useEffect } from 'react'
-import { useHistory } from 'react-router-dom'
-
 import config from 'config'
-
 import A from 'ui/A'
 import Button from 'ui/Button'
-
 import openUmbrella from './assets/error-open-umbrella.svg'
 import upsideDownUmbrella from './assets/error-upsidedown-umbrella.svg'
 import styles from './NetworkErrorBoundary.module.css'
@@ -16,6 +13,11 @@ import {
   sendGraphQLErrorMetrics,
   sendNetworkErrorMetrics,
 } from './networkErrorMetrics'
+import { useUserAccessGate } from 'layouts/BaseLayout/hooks/useUserAccessGate'
+// import { useImpersonate } from '
+
+import GlobalBanners from 'shared/GlobalBanners'
+import GlobalTopBanners from 'shared/GlobalTopBanners'
 
 const errorToUI = {
   401: {
@@ -159,93 +161,110 @@ ResetHandler.propTypes = {
   logoutUser: PropTypes.bool,
 }
 
-class NetworkErrorBoundary extends Component {
-  constructor(props) {
-    super(props)
+const NetworkErrorBoundary = ({ children }) => {
+  const [hasNetworkError, setHasNetworkError] = useState(false)
+  const [hasGraphqlError, setHasGraphqlError] = useState(false)
+  const [error, setError] = useState(null)
 
-    this.state = {
-      hasNetworkError: false,
-      hasGraphqlError: false,
-      error: null,
-    }
-  }
-
-  static getDerivedStateFromError(error) {
-    // if the error is not a network error, we don't do anything and
-    // another error boundary will take it from there
-    if (Object.keys(errorToUI).includes(String(error.status))) {
-      sendNetworkErrorMetrics(error.status)
-      return { hasNetworkError: true, error }
-    }
+  const { isFullExperience, showDefaultOrgSelector } = useUserAccessGate()
+  // const { isImpersonating } = useImpersonate()
+  const isImpersonating = true
 
-    if (Object.keys(graphQLErrorToUI).includes(error.__typename)) {
-      sendGraphQLErrorMetrics(error.__typename)
-      return { hasGraphqlError: true, error }
-    }
-
-    return {}
+  const resetErrorBoundary = () => {
+    setHasNetworkError(false)
+    setHasGraphqlError(false)
+    setError(null)
   }
 
-  resetErrorBoundary = () => {
-    this.reset()
-  }
+  useEffect(() => {
+    // const errorHandler = (error) => {
+    //   if (Object.keys(errorToUI).includes(String(error.status))) {
+    //     sendNetworkErrorMetrics(error.status)
+    //     setHasNetworkError(true)
+    //     setError(error)
+    //   } else if (Object.keys(graphQLErrorToUI).includes(error.__typename)) {
+    //     sendGraphQLErrorMetrics(error.__typename)
+    //     setHasGraphqlError(true)
+    //     setError(error)
+    //   }
+    // }
 
-  reset() {
-    this.setState({
-      hasNetworkError: false,
-      hasGraphqlError: false,
-      error: null,
-    })
-  }
+    // Add your error handling logic here to trigger errorHandler
+  }, [])
 
-  renderGraphQLError() {
-    const { error } = this.state
+  const renderGraphQLError = () => {
     const { illustration, title } = graphQLErrorToUI[error.__typename]
 
     return (
-      <article className="mx-auto flex h-full flex-col items-center justify-center">
-        <img
-          alt="illustration error"
-          className={cs(styles.illustrationError, 'mx-auto')}
-          src={illustration}
-        />
-        <h1 className="mt-6 text-2xl">{title}</h1>
-        <NetworkErrorMessage />
-        <ResetHandler reset={this.resetErrorBoundary} />
-      </article>
+      <>
+        {isFullExperience || isImpersonating ? (
+          <>
+            <GlobalTopBanners />
+            <Header />
+          </>
+        ) : (
+          <Suspense fallback={null}>
+            {showDefaultOrgSelector && <InstallationHelpBanner />}
+          </Suspense>
+        )}
+        <article className="mx-auto flex h-full flex-col items-center justify-center">
+          <img
+            alt="illustration error"
+            className={cs(styles.illustrationError, 'mx-auto')}
+            src={illustration}
+          />
+          <h1 className="mt-6 text-2xl">{title}</h1>
+          <NetworkErrorMessage />
+          <ResetHandler reset={resetErrorBoundary} />
+        </article>
+      </>
     )
   }
 
-  renderError() {
-    const { status, data } = this.state.error
+  const renderError = () => {
+    const { status, data } = error
     const { illustration, title, description, showDocs } = errorToUI[status]
 
     return (
-      <article className="mx-auto flex h-full flex-col items-center justify-center">
-        <img
-          alt="illustration error"
-          className={cs(styles.illustrationError, 'mx-auto')}
-          src={illustration}
-        />
-        <h1 className="mt-6 text-2xl">{title}</h1>
-        {description ? <p className="mt-2">{description(data)}</p> : null}
-        {showDocs ? <NetworkErrorMessage /> : null}
-        <p>
-          <strong>Error {status}</strong>
-        </p>
-        <ResetHandler
-          logoutUser={status === 429}
-          reset={this.resetErrorBoundary}
-        />
-      </article>
+      <>
+        {isFullExperience || isImpersonating ? (
+          <>
+            <GlobalTopBanners />
+            <Header />
+          </>
+        ) : (
+          <Suspense fallback={null}>
+            {showDefaultOrgSelector && <InstallationHelpBanner />}
+          </Suspense>
+        )}
+        <article className="mx-auto flex h-full flex-col items-center justify-center">
+          <img
+            alt="illustration error"
+            className={cs(styles.illustrationError, 'mx-auto')}
+            src={illustration}
+          />
+          <h1 className="mt-6 text-2xl">{title}</h1>
+          {description ? <p className="mt-2">{description(data)}</p> : null}
+          {showDocs ? <NetworkErrorMessage /> : null}
+          <p>
+            <strong>Error {status}</strong>
+          </p>
+          <ResetHandler
+            logoutUser={status === 429}
+            reset={resetErrorBoundary}
+          />
+        </article>
+      </>
     )
   }
 
-  render() {
-    if (this.state.hasNetworkError) return this.renderError()
-    if (this.state.hasGraphqlError) return this.renderGraphQLError()
-    return <>{this.props.children}</>
-  }
+  if (hasNetworkError) return renderError()
+  if (hasGraphqlError) return renderGraphQLError()
+  return <>{children}</>
+}
+
+NetworkErrorBoundary.propTypes = {
+  children: PropTypes.node,
 }
 
 export default NetworkErrorBoundary