50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import * as Sentry from "@sentry/nextjs"
|
|
import React from "react"
|
|
|
|
import { logger } from "@scandic-hotels/common/logger"
|
|
|
|
type ErrorBoundaryProps = {
|
|
children: React.ReactNode
|
|
fallback?: React.ReactNode
|
|
}
|
|
type ErrorBoundaryState = { hasError: boolean; error?: Error }
|
|
|
|
export class ErrorBoundary extends React.Component<
|
|
ErrorBoundaryProps,
|
|
ErrorBoundaryState
|
|
> {
|
|
constructor(props: ErrorBoundaryProps) {
|
|
super(props)
|
|
this.state = { hasError: false }
|
|
}
|
|
|
|
static getDerivedStateFromError(error: Error) {
|
|
return { hasError: true, error }
|
|
}
|
|
|
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
|
logger.error("ErrorBoundary caught an error:", error, errorInfo)
|
|
Sentry.captureException(error, { extra: { errorInfo } })
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
const hasFallback = !!this.props.fallback
|
|
|
|
return (
|
|
<>
|
|
{hasFallback && this.props.fallback}
|
|
{!hasFallback && <h2>Something went wrong.</h2>}
|
|
{process.env.NODE_ENV === "development" && (
|
|
<button onClick={() => this.setState({ hasError: false })}>
|
|
Reset
|
|
</button>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
return this.props.children
|
|
}
|
|
}
|