import React, { useCallback } from 'react' import { FiveOhFive } from './FiveOhFive' import * as Sentry from '@sentry/react' import { useRouter } from 'next/router' const ErrorBoundary: React.FC = (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 ( { postError(error, componentStack) return }} > {props.children} ) } export default ErrorBoundary