add error boundaries to app.tsx

This commit is contained in:
Tyler Shipe 2021-12-28 17:22:50 -05:00
parent d0fb21b90c
commit cd49edd0b6
3 changed files with 80 additions and 13 deletions

View File

@ -85,6 +85,7 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
notify({
title: t('deposit-failed'),
description: err.message,
txid: err?.txid,
type: 'error',
})
})

View File

@ -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

View File

@ -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>
</>
)
}