73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
|
import React, { Component } from "react";
|
||
|
|
import { cn } from "../../lib/utils";
|
||
|
|
|
||
|
|
type LazyLoadBoundaryProps = {
|
||
|
|
children: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
fallback?: React.ReactNode | ((error: Error) => React.ReactNode);
|
||
|
|
name?: string;
|
||
|
|
resetKey?: React.Key | null;
|
||
|
|
};
|
||
|
|
|
||
|
|
type LazyLoadBoundaryState = {
|
||
|
|
error: Error | null;
|
||
|
|
retryKey: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
export class LazyLoadBoundary extends Component<LazyLoadBoundaryProps, LazyLoadBoundaryState> {
|
||
|
|
declare props: Readonly<LazyLoadBoundaryProps>;
|
||
|
|
declare setState: React.Component<LazyLoadBoundaryProps, LazyLoadBoundaryState>["setState"];
|
||
|
|
state: LazyLoadBoundaryState = { error: null, retryKey: 0 };
|
||
|
|
|
||
|
|
static getDerivedStateFromError(error: Error): Partial<LazyLoadBoundaryState> {
|
||
|
|
return { error };
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidUpdate(prevProps: LazyLoadBoundaryProps) {
|
||
|
|
if (prevProps.resetKey !== this.props.resetKey && this.state.error) {
|
||
|
|
this.setState({ error: null });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private retry = () => {
|
||
|
|
if (typeof window !== "undefined" && typeof window.location?.reload === "function") {
|
||
|
|
window.location.reload();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.setState(({ retryKey }) => ({ error: null, retryKey: retryKey + 1 }));
|
||
|
|
};
|
||
|
|
|
||
|
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||
|
|
console.error(`[LazyLoadBoundary] ${this.props.name || "content"} failed:`, error, errorInfo.componentStack);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
if (this.state.error) {
|
||
|
|
const { fallback } = this.props;
|
||
|
|
if (typeof fallback === "function") return fallback(this.state.error);
|
||
|
|
if (fallback) return fallback;
|
||
|
|
const label = this.props.name || "This area";
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex h-full min-h-[120px] flex-col items-center justify-center gap-2 p-4 text-center text-sm text-muted-foreground",
|
||
|
|
this.props.className,
|
||
|
|
)}
|
||
|
|
role="alert"
|
||
|
|
>
|
||
|
|
<div className="font-medium text-foreground">{label} could not load.</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted"
|
||
|
|
onClick={this.retry}
|
||
|
|
>
|
||
|
|
Reload
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return <React.Fragment key={this.state.retryKey}>{this.props.children}</React.Fragment>;
|
||
|
|
}
|
||
|
|
}
|