48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import type { ErrorInfo, ReactNode } from "react";
|
|
import { Component } from "react";
|
|
|
|
interface ErrorBoundaryProps {
|
|
fallback: ReactNode;
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface ErrorBoundaryState {
|
|
hasError: boolean;
|
|
}
|
|
|
|
export class ErrorBoundary extends Component<
|
|
ErrorBoundaryProps,
|
|
ErrorBoundaryState
|
|
> {
|
|
constructor(props: ErrorBoundaryProps) {
|
|
super(props);
|
|
this.state = { hasError: false };
|
|
}
|
|
|
|
static getDerivedStateFromError(_: Error): ErrorBoundaryState {
|
|
// Update state so the next render will show the fallback UI.
|
|
return { hasError: true };
|
|
}
|
|
|
|
componentDidCatch(error: Error, info: ErrorInfo) {
|
|
// Example "componentStack":
|
|
// in ComponentThatThrows (created by App)
|
|
// in ErrorBoundary (created by App)
|
|
// in div (created by App)
|
|
// in App
|
|
// TODO: Replace this with your own error reporting logic.
|
|
console.error("Uncaught error:", error, info);
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
// You can render any custom fallback UI
|
|
return this.props.fallback;
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|