enhancement: better error page component (#5834)

* enhancement: better error page component

* chore: typo and useless space

web-app/src/containers/GlobalError.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+
+interface GlobalErrorProps {
+  error: Error | unknown
+}
+
+export default function GlobalError({ error }: GlobalErrorProps) {
+  console.error('Error in root route:', error)
+  const [showFull, setShowFull] = useState(false)
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center overflow-auto bg-red-50 p-5">
+      <div className="w-full text-center">
+        <div className="inline-flex rounded-full bg-red-100 p-4">
+          <div className="rounded-full bg-red-200 stroke-red-600 p-4">
+            <svg
+              className="h-16 w-16"
+              viewBox="0 0 28 28"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 8H6.01M6 16H6.01M6 12H18C20.2091 12 22 10.2091 22 8C22 5.79086 20.2091 4 18 4H6C3.79086 4 2 5.79086 2 8C2 10.2091 3.79086 12 6 12ZM6 12C3.79086 12 2 13.7909 2 16C2 18.2091 3.79086 20 6 20H14"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+              <path
+                d="M17 16L22 21M22 16L17 21"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </div>
+        </div>
+        <h1 className="mt-5 text-xl font-bold text-slate-800">
+          Oops! Unexpected error occurred.
+        </h1>
+        <p className="lg:text-md my-2 text-slate-600">
+          Something went wrong. Try to{' '}
+          <button
+            rel="noopener noreferrer"
+            className="text-accent hover:underline"
+            onClick={() => window.location.reload()}
+          >
+            refresh this page
+          </button>{' '}
+          or <br /> feel free to{' '}
+          <a
+            rel="noopener noreferrer"
+            className="!text-accent hover:underline"
+            href="https://discord.gg/FTk2MvZwJH"
+            target="_blank"
+          >
+            contact us
+          </a>{' '}
+          if the problem persists.
+        </p>
+        <div
+          className="mt-5 w-full md:w-4/5 mx-auto rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700 "
+          role="alert"
+        >
+          <strong className="font-bold">Error: </strong>
+          <span className="block sm:inline">
+            {error instanceof Error ? error.message : String(error)}
+          </span>
+          <div className="mt-2 h-full w-full">
+            <pre className="mt-2 whitespace-pre-wrap break-all rounded bg-red-200 p-4 text-left text-sm text-red-600 max-h-[250px] overflow-y-auto">
+              <code>
+                {error instanceof Error
+                  ? showFull
+                    ? error.stack
+                    : error.stack?.slice(0, 200)
+                  : String(error)}
+              </code>
+            </pre>
+            <button
+              onClick={() => setShowFull(!showFull)}
+              className="mt-2 text-sm text-red-700 underline focus:outline-none cursor-pointer"
+            >
+              {showFull ? 'Show less' : 'Show more'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

web-app/src/containers/__tests__/GlobalError.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import GlobalError from '../GlobalError'
+import '@testing-library/jest-dom'
+
+describe('GlobalError Component', () => {
+  it('should render error message for Error instance', () => {
+    const error = new Error('Test error message')
+    render(<GlobalError error={error} />)
+
+    expect(screen.getByText('Oops! Unexpected error occurred.')).toBeDefined()
+    expect(screen.getByText('Test error message')).toBeDefined()
+  })
+
+  it('should render error message for non-Error instance', () => {
+    const error = 'String error message'
+    render(<GlobalError error={error} />)
+
+    expect(screen.getByText('Oops! Unexpected error occurred.')).toBeDefined()
+    expect(screen.getAllByText('String error message')).toHaveLength(2)
+  })
+
+  it('should show truncated stack trace initially', () => {
+    const error = new Error('Test error')
+    error.stack = 'a'.repeat(300)
+    render(<GlobalError error={error} />)
+
+    const stackTrace = screen.getByText('a'.repeat(200))
+    expect(stackTrace).toBeDefined()
+  })
+
+  it('should toggle between truncated and full stack trace', () => {
+    const error = new Error('Test error')
+    error.stack = 'a'.repeat(300)
+    render(<GlobalError error={error} />)
+
+    const showMoreButton = screen.getByText('Show more')
+    fireEvent.click(showMoreButton)
+
+    expect(screen.getByText('a'.repeat(300))).toBeDefined()
+    expect(screen.getByText('Show less')).toBeDefined()
+
+    const showLessButton = screen.getByText('Show less')
+    fireEvent.click(showLessButton)
+
+    expect(screen.getByText('a'.repeat(200))).toBeDefined()
+    expect(screen.getByText('Show more')).toBeDefined()
+  })
+
+  it('should handle refresh page button click', () => {
+    const originalLocation = window.location
+    const reloadSpy = vi.fn()
+
+    delete (window as any).location
+    ;(window as any).location = { ...originalLocation, reload: reloadSpy }
+
+    const error = new Error('Test error')
+    render(<GlobalError error={error} />)
+
+    const refreshButton = screen.getByText('refresh this page')
+    fireEvent.click(refreshButton)
+
+    expect(reloadSpy).toHaveBeenCalledTimes(1)
+    ;(window as any).location = originalLocation
+  })
+
+  it('should render contact us link with correct href', () => {
+    const error = new Error('Test error')
+    render(<GlobalError error={error} />)
+
+    const contactLink = screen.getByText('contact us')
+    expect(contactLink).toHaveAttribute('href', 'https://discord.gg/FTk2MvZwJH')
+    expect(contactLink).toHaveAttribute('target', '_blank')
+    expect(contactLink).toHaveAttribute('rel', 'noopener noreferrer')
+  })
+
+  it('should log error to console', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const error = new Error('Test error')
+
+    render(<GlobalError error={error} />)
+
+    expect(consoleSpy).toHaveBeenCalledWith('Error in root route:', error)
+    consoleSpy.mockRestore()
+  })
+
+  it('should render proper error structure with styling', () => {
+    const error = new Error('Test error')
+    render(<GlobalError error={error} />)
+
+    const errorContainer = screen.getByRole('alert')
+    expect(errorContainer).toHaveClass(
+      'mt-5',
+      'w-full',
+      'md:w-4/5',
+      'mx-auto',
+      'rounded',
+      'border',
+      'border-red-400',
+      'bg-red-100',
+      'px-4',
+      'py-3',
+      'text-red-700'
+    )
+  })
+})

web-app/src/routes/__root.tsx

@@ -28,9 +28,11 @@ import {
   ResizableHandle,
 } from '@/components/ui/resizable'
 import { useCallback } from 'react'
+import GlobalError from '@/containers/GlobalError'
 
 export const Route = createRootRoute({
   component: RootLayout,
+  errorComponent: ({ error }) => <GlobalError error={error} />,
 })
 
 const AppLayout = () => {