add error boundaries to app.tsx
This commit is contained in:
parent
d0fb21b90c
commit
cd49edd0b6
|
@ -85,6 +85,7 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
|
|||
notify({
|
||||
title: t('deposit-failed'),
|
||||
description: err.message,
|
||||
txid: err?.txid,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
|
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react'
|
||||
|
||||
class ErrorBoundary extends React.Component<
|
||||
any,
|
||||
{ hasError: boolean; error: any }
|
||||
> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { hasError: false, error: null }
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
// Update state so the next render will show the fallback UI.
|
||||
return { hasError: true, error: error }
|
||||
}
|
||||
|
||||
componentDidCatch(error, errorInfo) {
|
||||
// You can also log the error to an error reporting service
|
||||
// logErrorToMyService(error, errorInfo)
|
||||
|
||||
if (process.env.NEXT_ERROR_WEBHOOK_URL) {
|
||||
try {
|
||||
fetch(process.env.NEXT_ERROR_WEBHOOK_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
content: `UI ERROR: ${error} : ${errorInfo?.componentStack}`,
|
||||
}),
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('Error posting to notify webhook:', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
// You can render any custom fallback UI
|
||||
return (
|
||||
<div className="text-th-bkg-2 text-center pt-1">
|
||||
<div>Something went wrong.</div>
|
||||
<div className="text-th-red">{this.state.error.message}</div>
|
||||
<button className="mt-2" onClick={() => location.reload()}>
|
||||
Refresh and try again
|
||||
</button>
|
||||
<div className="mt-4 px-4">{this.state.error.stack}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary
|
|
@ -14,6 +14,7 @@ import { useRouter } from 'next/router'
|
|||
import { ViewportProvider } from '../hooks/useViewport'
|
||||
import BottomBar from '../components/mobile/BottomBar'
|
||||
import { appWithTranslation } from 'next-i18next'
|
||||
import ErrorBoundary from '../components/ErrorBoundary'
|
||||
|
||||
const MangoStoreUpdater = () => {
|
||||
useHydrateStore()
|
||||
|
@ -85,19 +86,29 @@ function App({ Component, pageProps }) {
|
|||
|
||||
<link rel="manifest" href="/manifest.json"></link>
|
||||
</Head>
|
||||
<PageTitle />
|
||||
<MangoStoreUpdater />
|
||||
<ThemeProvider defaultTheme="Mango">
|
||||
<ViewportProvider>
|
||||
<div className="bg-th-bkg-1 min-h-screen">
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
<div className="md:hidden fixed bottom-0 left-0 w-full z-20">
|
||||
<BottomBar />
|
||||
</div>
|
||||
<Notifications />
|
||||
</ViewportProvider>
|
||||
</ThemeProvider>
|
||||
<ErrorBoundary>
|
||||
<ErrorBoundary>
|
||||
<PageTitle />
|
||||
<MangoStoreUpdater />
|
||||
</ErrorBoundary>
|
||||
|
||||
<ThemeProvider defaultTheme="Mango">
|
||||
<ViewportProvider>
|
||||
<div className="bg-th-bkg-1 min-h-screen">
|
||||
<ErrorBoundary>
|
||||
<Component {...pageProps} />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<div className="md:hidden fixed bottom-0 left-0 w-full z-20">
|
||||
<ErrorBoundary>
|
||||
<BottomBar />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
|
||||
<Notifications />
|
||||
</ViewportProvider>
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue