feat: attach eventId to error page (#7364)

Author: kernelwhisperer

apps/cowswap-frontend/src/legacy/components/ErrorBoundary/ChunkLoadError.tsx

@@ -10,6 +10,7 @@ import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import { AutoColumn } from 'legacy/components/Column'
+import CopyHelper from 'legacy/components/Copy'
 
 // eslint-disable-next-line import/no-internal-modules -- Direct import to avoid circular dependency (barrel re-exports App which imports ErrorBoundary)
 import { Title } from 'modules/application/pure/Page'
@@ -36,6 +37,7 @@ function preloadNoConnectionImg(): void {
     .then((img) => {
       cowNoConnectionIMGCache = img
     })
+    .catch(() => {})
 }
 
 preloadNoConnectionImg()
@@ -85,7 +87,22 @@ const AutoRowWithGap = styled(AutoRow)`
   gap: 16px;
 `
 
-export const ChunkLoadError = (): ReactNode => {
+const IdText = styled(ThemedText.Main)`
+  opacity: 0.7;
+`
+
+const IdRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`
+
+interface ChunkLoadErrorProps {
+  eventId: string
+}
+
+export const ChunkLoadError = ({ eventId }: ChunkLoadErrorProps): ReactNode => {
   const reloadPage = useCallback(() => {
     window.location.reload()
   }, [])
@@ -108,6 +125,12 @@ export const ChunkLoadError = (): ReactNode => {
                 This could have happened due to the lack of internet or the release of a new version of the application.
               </Trans>
             </p>
+            {eventId && (
+              <IdRow>
+                <IdText fontSize={14}>Event ID:</IdText>
+                <CopyHelper toCopy={eventId}>{eventId}</CopyHelper>
+              </IdRow>
+            )}
           </NoConnectionDesc>
           {cowNoConnectionIMGCache && <NoConnectionImg src={cowNoConnectionIMGCache} alt={t`CowSwap no connection`} />}
         </NoConnectionContainer>

apps/cowswap-frontend/src/legacy/components/ErrorBoundary/ErrorWithStackTrace.tsx

@@ -11,6 +11,7 @@ import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import { AutoColumn } from 'legacy/components/Column'
+import CopyHelper from 'legacy/components/Copy'
 
 // eslint-disable-next-line import/no-internal-modules -- Direct import to avoid circular dependency (barrel re-exports App which imports ErrorBoundary)
 import { Title } from 'modules/application/pure/Page'
@@ -61,12 +62,28 @@ const LinkWrapper = styled.div`
   padding: 6px 24px;
 `
 
+const IdText = styled(ThemedText.Main)`
+  opacity: 0.7;
+`
+
+const IdRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`
+
 function truncate(value?: string): string | undefined {
   return value ? value.slice(0, 1000) : undefined
 }
 
-export const ErrorWithStackTrace = ({ error }: { error: Error }): ReactNode => {
-  const encodedBody = encodeURIComponent(issueBody(error))
+interface ErrorWithStackTraceProps {
+  error: Error
+  eventId: string
+}
+
+export const ErrorWithStackTrace = ({ error, eventId }: ErrorWithStackTraceProps): ReactNode => {
+  const encodedBody = encodeURIComponent(issueBody(error, eventId))
 
   return (
     <>
@@ -77,6 +94,12 @@ export const ErrorWithStackTrace = ({ error }: { error: Error }): ReactNode => {
         <img src={CowError} alt={t`CowSwap Error`} height="125" />
       </FlexContainer>
       <AutoColumn gap={'md'}>
+        {eventId && (
+          <IdRow>
+            <IdText fontSize={14}>Event ID:</IdText>
+            <CopyHelper toCopy={eventId}>{eventId}</CopyHelper>
+          </IdRow>
+        )}
         <CodeBlockWrapper>
           <code>
             <ThemedText.Main fontSize={10}>
@@ -91,7 +114,7 @@ export const ErrorWithStackTrace = ({ error }: { error: Error }): ReactNode => {
               href={
                 CODE_LINK +
                 `/issues/new?assignees=&labels=🐞 Bug,🔥 Critical&body=${encodedBody}&title=${encodeURIComponent(
-                  `Crash report: \`${error.name}${error.message && `: ${truncate(error.message)}`}\``,
+                  `Crash report${eventId ? ` [${eventId}]` : ''}: \`${error.name}${error.message && `: ${truncate(error.message)}`}\``,
                 )}`
               }
             >
@@ -115,12 +138,21 @@ export const ErrorWithStackTrace = ({ error }: { error: Error }): ReactNode => {
   )
 }
 
-function issueBody(error: Error): string {
+function issueBody(error: Error, eventId: string): string {
   const deviceData = userAgent
+  const sentryEventUrl = `https://cowprotocol.sentry.io/issues/?query=${encodeURIComponent(`id:${eventId}`)}`
   return `## URL
 
 ${window.location.href}
 
+## Sentry Event ID
+
+\`\`\`
+${eventId}
+\`\`\`
+
+${sentryEventUrl}
+
 ${
   error.name &&
   `## Error

apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx

@@ -106,7 +106,7 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
         showDialog={false}
         // TODO: Extract nested component outside render function
         // eslint-disable-next-line react/no-unstable-nested-components
-        fallback={({ error: sentryError }) => {
+        fallback={({ error: sentryError, eventId }) => {
           document.body.classList.remove('noScroll')
           const { error: localError } = this.state
           const error = localError || sentryError
@@ -128,7 +128,13 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
                 </HeaderWrapper>
               )}
 
-              <Wrapper>{isChunkLoadError ? <ChunkLoadError /> : <ErrorWithStackTrace error={error} />}</Wrapper>
+              <Wrapper>
+                {isChunkLoadError ? (
+                  <ChunkLoadError eventId={eventId} />
+                ) : (
+                  <ErrorWithStackTrace error={error} eventId={eventId} />
+                )}
+              </Wrapper>
             </AppWrapper>
           )
         }}