46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { useCallback } from 'react'
|
|
import { FiveOhFive } from './FiveOhFive'
|
|
import * as Sentry from '@sentry/react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
const ErrorBoundary: React.FC<any> = (props) => {
|
|
const { asPath } = useRouter()
|
|
|
|
const postError = useCallback(
|
|
(error, componentStack) => {
|
|
if (process.env.NEXT_PUBLIC_ERROR_WEBHOOK_URL) {
|
|
try {
|
|
fetch(process.env.NEXT_PUBLIC_ERROR_WEBHOOK_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
content:
|
|
`UI ERROR: (${asPath}) ${error} : ${componentStack}`.slice(
|
|
0,
|
|
1999
|
|
),
|
|
}),
|
|
})
|
|
} catch (err) {
|
|
console.error('Error posting to notify webhook:', err)
|
|
}
|
|
}
|
|
},
|
|
[asPath]
|
|
)
|
|
|
|
return (
|
|
<Sentry.ErrorBoundary
|
|
fallback={({ error, componentStack }) => {
|
|
postError(error, componentStack)
|
|
|
|
return <FiveOhFive error={error} />
|
|
}}
|
|
>
|
|
{props.children}
|
|
</Sentry.ErrorBoundary>
|
|
)
|
|
}
|
|
|
|
export default ErrorBoundary
|