feat: execute route and release recovery contracts

src/presentation/boundaries/chunk-recovery-boundary.tsx

@@ -0,0 +1,97 @@
+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;
+  }
+}