-
-
- }
- />
- )
-}
+import { PageErrorBoundary } from '@/lib/shared/components/errors/ErrorBoundary'
+
+export default PageErrorBoundary
diff --git a/app/error.tsx b/app/error.tsx
index 73582282a..656b60be1 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,25 +1,5 @@
'use client'
-import PageError from '@/lib/shared/components/errors/PageError'
+import { PageErrorBoundary } from '@/lib/shared/components/errors/ErrorBoundary'
-/**
- * Global App ErrorBoundary.
- *
- * Catches:
- * - components errors (e.g. throw new Error() inside render function)
- *
- * @see https://nextjs.org/docs/app/building-your-application/routing/error-handling#using-error-boundaries
- */
-export default function Error({
- error,
- reset,
-}: {
- error: Error & { digest?: string }
- reset: () => void
-}) {
- const title = error.digest
- ? `Something went wrong (Digest - ${error.digest})`
- : 'Something went wrong'
-
- return
-}
+export default PageErrorBoundary
diff --git a/app/global-error.tsx b/app/global-error.tsx
index 13977c418..68bf7c494 100644
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -29,9 +29,7 @@ export default function GlobalError({
Sentry.captureException(error)
}, [error])
- const title = error.digest
- ? `Something went wrong (Digest - ${error.digest})`
- : 'Something went wrong'
+ const title = error.digest ? `Something went wrong (${error.digest})` : 'Something went wrong'
return (
diff --git a/lib/modules/pool/PoolList/PoolListLayout.tsx b/lib/modules/pool/PoolList/PoolListLayout.tsx
index 89a60d1d1..36cfff420 100644
--- a/lib/modules/pool/PoolList/PoolListLayout.tsx
+++ b/lib/modules/pool/PoolList/PoolListLayout.tsx
@@ -6,6 +6,8 @@ import { FilterTags, PoolListFilters, useFilterTagsVisible } from './PoolListFil
import { PoolListTable } from './PoolListTable/PoolListTable'
import { usePoolList } from './PoolListProvider'
import { fNum } from '@/lib/shared/utils/numbers'
+import { ErrorBoundary } from 'react-error-boundary'
+import { BoundaryError } from '@/lib/shared/components/errors/ErrorBoundary'
export function PoolListLayout() {
const { pools, loading, count } = usePoolList()
@@ -65,7 +67,9 @@ export function PoolListLayout() {
-
+
+
+
)
}
diff --git a/lib/shared/components/errors/ErrorBoundary.tsx b/lib/shared/components/errors/ErrorBoundary.tsx
index aefe34793..164476160 100644
--- a/lib/shared/components/errors/ErrorBoundary.tsx
+++ b/lib/shared/components/errors/ErrorBoundary.tsx
@@ -1,77 +1,44 @@
'use client'
-import {
- ErrorBoundary as BaseErrorBoundary,
- ErrorBoundaryProps as BaseErrorBoundaryProps,
- FallbackProps as BaseFallbackProps,
-} from 'react-error-boundary'
-import { GenericError } from '@/lib/shared/components/errors/GenericError'
-import { Button, Link, Stack } from '@chakra-ui/react'
-import NextLink from 'next/link'
-import { isDev, isStaging } from '@/lib/config/app.config'
-import { useLocationFullPath } from '@/lib/shared/hooks/useLocationFullPath'
-import { PropsWithChildren, ReactNode } from 'react'
+import { FallbackProps } from 'react-error-boundary'
+import { Button, Box, Text, Heading, VStack } from '@chakra-ui/react'
+import { ensureError } from '../../utils/errors'
+import { DefaultPageContainer } from '../containers/DefaultPageContainer'
-export interface ErrorBoundaryProps extends PropsWithChildren {
- fallback?: BaseErrorBoundaryProps['fallback']
- fallbackRender?: BaseErrorBoundaryProps['fallbackRender']
- onReset?: BaseFallbackProps['resetErrorBoundary']
-}
-
-export interface FallbackProps {
- error: BaseFallbackProps['error']
- resetErrorBoundary?: BaseFallbackProps['resetErrorBoundary']
- title?: string
- showReloadButton?: boolean
- customButton?: ReactNode
-}
-
-export function DefaultFallbackRender({
+export function BoundaryError({
error,
resetErrorBoundary,
- title,
- customButton,
- showReloadButton = true,
-}: FallbackProps) {
- const showResetButton = isDev || isStaging
-
- const path = useLocationFullPath()
-
- const showButtons = customButton || showReloadButton || showResetButton
+}: {
+ error: Error & { digest?: string }
+ resetErrorBoundary: () => void
+}) {
+ const _error = ensureError(error)
return (
-
-
- {showButtons && (
-
- {customButton}
- {showReloadButton && (
-
-
-
- )}
- {showResetButton && resetErrorBoundary && (
-
- )}
-
- )}
-
+
+
+ Something went wrong! :(
+
+
+ {_error?.name
+ ? `${_error?.name}: ${_error?.shortMessage || ''}`
+ : _error?.shortMessage || ''}
+
+ {_error?.message}
+
+
+
+
+
)
}
-export function ErrorBoundary({ children, fallback, onReset, fallbackRender }: ErrorBoundaryProps) {
- if (fallback) {
- return {children}
- }
-
+export function PageErrorBoundary(props: FallbackProps) {
return (
-
- {children}
-
+
+
+
)
}
diff --git a/lib/shared/components/errors/PageError.tsx b/lib/shared/components/errors/PageError.tsx
deleted file mode 100644
index 2b59aa230..000000000
--- a/lib/shared/components/errors/PageError.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import { DefaultPageContainer } from '@/lib/shared/components/containers/DefaultPageContainer'
-import * as Sentry from '@sentry/nextjs'
-import { useEffect } from 'react'
-import { DefaultFallbackRender, FallbackProps } from '@/lib/shared/components/errors/ErrorBoundary'
-
-export interface PageErrorProps {
- error: Error
- /**
- * (dev only) Call reset() to reset the error boundary and retry the render
- */
- onReset?: () => void
- title?: string
- /**
- * Send error to Sentry
- */
- captureException?: boolean
- showReloadButton?: FallbackProps['showReloadButton']
- customButton?: FallbackProps['customButton']
-}
-
-export default function PageError({
- error,
- onReset,
- title,
- captureException,
- showReloadButton,
- customButton,
-}: PageErrorProps) {
- useEffect(() => {
- if (captureException) {
- Sentry.captureException(error)
- }
- }, [captureException, error])
-
- return (
-
-
-
- )
-}