feat: updates

packages/web/components/ErrorBoundary.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+import * as Sentry from '@sentry/react'
+
+const ErrorBoundary = ({ children }: { children: ReactNode }) => {
+  return (
+    <Sentry.ErrorBoundary
+      fallback={({ error, componentStack }) => (
+        <div
+          role='alert'
+          className='app-region-drag flex h-screen w-screen items-center justify-center rounded-24 bg-white dark:bg-black'
+        >
+          <div className='app-region-no-drag'>
+            <p>Something went wrong:</p>
+            <pre className='mb-2 text-18 dark:text-white'>
+              {error.toString()}
+            </pre>
+            <div className='max-h-72 max-w-2xl overflow-scroll whitespace-pre-line rounded-12 border border-white/10 px-3 py-2 dark:text-white/50'>
+              {componentStack?.trim()}
+            </div>
+            <button
+              onClick={() => location.reload()}
+              className='mt-4 rounded-full bg-brand-600 px-6 py-5 text-16 font-medium'
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      )}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  )
+}
+
+export default ErrorBoundary