98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
import {
|
|
Component,
|
|
type ErrorInfo,
|
|
type ReactNode,
|
|
} from "react";
|
|
|
|
type RecoveryResult =
|
|
| Readonly<{ action: "reload-once"; releasePair: string }>
|
|
| Readonly<{ action: "support"; reason: string }>;
|
|
|
|
type Props = Readonly<{
|
|
children: ReactNode;
|
|
chunkId: string;
|
|
recover(input: Readonly<{
|
|
chunkId: string;
|
|
failureKind: "CHUNK_LOAD_FAILURE";
|
|
}>): Promise<RecoveryResult>;
|
|
}>;
|
|
|
|
type State = Readonly<{
|
|
error: unknown | null;
|
|
recovery: "idle" | "checking" | "reload-requested" | "support";
|
|
reason?: string;
|
|
}>;
|
|
|
|
export function isChunkLoadFailure(error: unknown): boolean {
|
|
if (!(error instanceof Error)) return false;
|
|
const value = `${error.name} ${error.message}`.toLowerCase();
|
|
return (
|
|
value.includes("chunkloaderror") ||
|
|
value.includes("loading chunk") ||
|
|
value.includes("dynamically imported module") ||
|
|
value.includes("failed to fetch module script")
|
|
);
|
|
}
|
|
|
|
export class ChunkRecoveryBoundary extends Component<Props, State> {
|
|
state: State = { error: null, recovery: "idle" };
|
|
|
|
static getDerivedStateFromError(error: unknown): State {
|
|
return { error, recovery: "checking" };
|
|
}
|
|
|
|
componentDidCatch(error: unknown, _info: ErrorInfo) {
|
|
if (!isChunkLoadFailure(error)) return;
|
|
void this.props
|
|
.recover({
|
|
chunkId: this.props.chunkId,
|
|
failureKind: "CHUNK_LOAD_FAILURE",
|
|
})
|
|
.then((result) => {
|
|
this.setState({
|
|
error,
|
|
recovery:
|
|
result.action === "reload-once"
|
|
? "reload-requested"
|
|
: "support",
|
|
...(result.action === "support" ? { reason: result.reason } : {}),
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.setState({
|
|
error,
|
|
recovery: "support",
|
|
reason: "recovery-controller-failed",
|
|
});
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { error, recovery, reason } = this.state;
|
|
if (error && !isChunkLoadFailure(error)) throw error;
|
|
if (error && recovery === "checking") {
|
|
return (
|
|
<section className="ui-page" aria-live="polite" aria-busy="true">
|
|
새 릴리스 정보를 확인하고 있습니다.
|
|
</section>
|
|
);
|
|
}
|
|
if (error && recovery === "reload-requested") {
|
|
return (
|
|
<section className="ui-page" aria-live="polite">
|
|
새 버전으로 한 번만 전환합니다.
|
|
</section>
|
|
);
|
|
}
|
|
if (error && recovery === "support") {
|
|
return (
|
|
<section className="ui-page" role="alert" data-recovery-reason={reason}>
|
|
<h1>화면 자산을 복구하지 못했습니다.</h1>
|
|
<p>문제가 계속되면 배포 상태와 지원 참조 정보를 확인해 주세요.</p>
|
|
</section>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|