feat: better UX when Sentry disabled (#5695)

* feat: disable sentry

* chore: update error page

* chore: use continue on error instead

* chore: wrap in trans

* flip check

.env

@@ -4,6 +4,7 @@ REACT_APP_AWS_API_REGION="us-east-2"
 REACT_APP_AWS_API_ENDPOINT="https://beta.api.uniswap.org/v1/graphql"
 REACT_APP_TEMP_API_URL="https://temp.api.uniswap.org/v1"
 REACT_APP_SENTRY_DSN="https://a3c62e400b8748b5a8d007150e2f38b7@o1037921.ingest.sentry.io/4504255148851200"
+REACT_APP_SENTRY_ENABLED=false
 ESLINT_NO_DEV_ERRORS=true
 REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_MOONPAY_API="https://api.moonpay.com"

.github/workflows/release.yaml

@@ -113,6 +113,7 @@ jobs:
 
       - name: Upload source maps to Sentry
         uses: getsentry/action-release@bd5f874fcda966ba48139b0140fb3ec0cb3aabdd
+        continue-on-error: true
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}

src/components/ErrorBoundary/index.tsx

@@ -6,6 +6,7 @@ import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useState } from 'react'
 import { Copy } from 'react-feather'
 import styled from 'styled-components/macro'
+import { isSentryEnabled } from 'utils/env'
 
 import { CopyToClipboard, ExternalLink, ThemedText } from '../../theme'
 import { Column } from '../Column'
@@ -85,6 +86,7 @@ const CodeTitle = styled.div`
   display: flex;
   gap: 14px;
   align-items: center;
+  justify-content: space-between;
   word-break: break-word;
 `
 
@@ -92,49 +94,87 @@ const Fallback = ({ error, eventId }: { error: Error; eventId: string | null })
   const [isExpanded, setExpanded] = useState(false)
   const isMobile = useIsMobile()
 
-  const errorId = eventId || 'unknown-error'
-
   // @todo: ThemedText components should be responsive by default
   const [Title, Description] = isMobile
     ? [ThemedText.HeadlineSmall, ThemedText.BodySmall]
     : [ThemedText.HeadlineLarge, ThemedText.BodySecondary]
 
+  const showErrorId = isSentryEnabled() && eventId
+
+  const showMoreButton = (
+    <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
+      <ThemedText.Link color="textSecondary">
+        <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
+      </ThemedText.Link>
+      <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
+    </ShowMoreButton>
+  )
+
+  const errorDetails = error.stack || error.message
+
   return (
     <FallbackWrapper>
       <BodyWrapper>
         <Column gap="xl">
+          {showErrorId ? (
+            <>
               <Column gap="sm">
                 <Title textAlign="center">
                   <Trans>Something went wrong</Trans>
                 </Title>
                 <Description textAlign="center" color="textSecondary">
                   <Trans>
-                Sorry, an error occured while processing your request. If you request support, be sure to provide your
-                error ID.
+                    Sorry, an error occured while processing your request. If you request support, be sure to provide
+                    your error ID.
                   </Trans>
                 </Description>
               </Column>
               <CodeBlockWrapper>
                 <CodeTitle>
-              <ThemedText.SubHeader fontWeight={500}>Error ID: {errorId}</ThemedText.SubHeader>
-              <CopyToClipboard toCopy={errorId}>
+                  <ThemedText.SubHeader fontWeight={500}>
+                    <Trans>Error ID: {eventId}</Trans>
+                  </ThemedText.SubHeader>
+                  <CopyToClipboard toCopy={eventId}>
                     <CopyIcon />
                   </CopyToClipboard>
                 </CodeTitle>
                 <Separator />
                 {isExpanded && (
                   <>
-                <Code>{error.stack}</Code>
+                    <Code>{errorDetails}</Code>
                     <Separator />
                   </>
                 )}
-            <ShowMoreButton onClick={() => setExpanded((s) => !s)}>
-              <ThemedText.Link color="textSecondary">
-                <Trans>{isExpanded ? 'Show less' : 'Show more'}</Trans>
-              </ThemedText.Link>
-              <ShowMoreIcon $isExpanded={isExpanded} secondaryWidth="20" secondaryHeight="20" />
-            </ShowMoreButton>
+                {showMoreButton}
+              </CodeBlockWrapper>
+            </>
+          ) : (
+            <>
+              <Column gap="sm">
+                <Title textAlign="center">
+                  <Trans>Something went wrong</Trans>
+                </Title>
+                <Description textAlign="center" color="textSecondary">
+                  <Trans>
+                    Sorry, an error occured while processing your request. If you request support, be sure to copy the
+                    details of this error.
+                  </Trans>
+                </Description>
+              </Column>
+              <CodeBlockWrapper>
+                <CodeTitle>
+                  <ThemedText.SubHeader fontWeight={500}>Error details</ThemedText.SubHeader>
+                  <CopyToClipboard toCopy={errorDetails}>
+                    <CopyIcon />
+                  </CopyToClipboard>
+                </CodeTitle>
+                <Separator />
+                <Code>{errorDetails.split('\n').slice(0, isExpanded ? undefined : 4)}</Code>
+                <Separator />
+                {showMoreButton}
               </CodeBlockWrapper>
+            </>
+          )}
           <StretchedRow>
             <SmallButtonPrimary onClick={() => window.location.reload()}>
               <Trans>Reload the app</Trans>

src/index.tsx

@@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { HashRouter } from 'react-router-dom'
-import { isProductionEnv } from 'utils/env'
+import { isSentryEnabled } from 'utils/env'
 
 import Web3Provider from './components/Web3Provider'
 import { LanguageProvider } from './i18n'
@@ -33,7 +33,7 @@ if (window.ethereum) {
   window.ethereum.autoRefreshOnNetworkChange = false
 }
 
-if (isProductionEnv()) {
+if (isSentryEnabled()) {
   Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_DSN,
     release: process.env.REACT_APP_GIT_COMMIT_HASH,

src/utils/env.ts

@@ -14,3 +14,7 @@ export function isStagingEnv(): boolean {
 export function isProductionEnv(): boolean {
   return process.env.NODE_ENV === 'production' && !isStagingEnv()
 }
+
+export function isSentryEnabled(): boolean {
+  return process.env.REACT_APP_SENTRY_ENABLED === 'true'
+}