Compare commits
10
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c37d571eb3 | ||
|
|
eb16c2ffe7 | ||
|
|
b221453c15 | ||
|
|
bfc642875c | ||
|
|
a9a7db0231 | ||
|
|
3e126c0ddd | ||
|
|
438dc11548 | ||
|
|
652e0250f3 | ||
|
|
bf8d69e285 | ||
|
|
d54eeff450 |
@@ -28,6 +28,7 @@
|
||||
"@tanstack/react-query": "5.101.4",
|
||||
"react": "19.2.8",
|
||||
"react-dom": "19.2.8",
|
||||
"react-router-dom": "7.18.1",
|
||||
"zod": "4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Generated
+39
@@ -17,6 +17,9 @@ importers:
|
||||
react-dom:
|
||||
specifier: 19.2.8
|
||||
version: 19.2.8(react@19.2.8)
|
||||
react-router-dom:
|
||||
specifier: 7.18.1
|
||||
version: 7.18.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
|
||||
zod:
|
||||
specifier: 4.4.3
|
||||
version: 4.4.3
|
||||
@@ -1260,6 +1263,23 @@ packages:
|
||||
react-is@17.0.2:
|
||||
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
|
||||
|
||||
react-router-dom@7.18.1:
|
||||
resolution: {integrity: sha512-KaZh+X/6UtEp28x51AUYZDMg9NGoz2ja3dNHa+ta/tk40vCzKhQ/RypCWBMLbmDr6//E24Vv5uPsrqXFozdkAg==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
peerDependencies:
|
||||
react: '>=18'
|
||||
react-dom: '>=18'
|
||||
|
||||
react-router@7.18.1:
|
||||
resolution: {integrity: sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
peerDependencies:
|
||||
react: '>=18'
|
||||
react-dom: '>=18'
|
||||
peerDependenciesMeta:
|
||||
react-dom:
|
||||
optional: true
|
||||
|
||||
react@19.2.8:
|
||||
resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -1312,6 +1332,9 @@ packages:
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
|
||||
set-cookie-parser@2.7.2:
|
||||
resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
|
||||
|
||||
set-cookie-parser@3.1.2:
|
||||
resolution: {integrity: sha512-5/r/lTwbJ3zQ+qwdUFZYeRNqda7P5HD8zQKqlSjdGt1/S0cjLAphHusj4Y58ahDtWn/g32xrIS58/ikOvwl0Lw==}
|
||||
|
||||
@@ -2604,6 +2627,20 @@ snapshots:
|
||||
|
||||
react-is@17.0.2: {}
|
||||
|
||||
react-router-dom@7.18.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
|
||||
dependencies:
|
||||
react: 19.2.8
|
||||
react-dom: 19.2.8(react@19.2.8)
|
||||
react-router: 7.18.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
|
||||
|
||||
react-router@7.18.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
|
||||
dependencies:
|
||||
cookie: 1.1.1
|
||||
react: 19.2.8
|
||||
set-cookie-parser: 2.7.2
|
||||
optionalDependencies:
|
||||
react-dom: 19.2.8(react@19.2.8)
|
||||
|
||||
react@19.2.8: {}
|
||||
|
||||
rechoir@0.8.0:
|
||||
@@ -2663,6 +2700,8 @@ snapshots:
|
||||
|
||||
semver@7.8.5: {}
|
||||
|
||||
set-cookie-parser@2.7.2: {}
|
||||
|
||||
set-cookie-parser@3.1.2: {}
|
||||
|
||||
shebang-command@2.0.0:
|
||||
|
||||
@@ -3,7 +3,9 @@ import { getApiOperation } from "../../contracts/api-operations.js";
|
||||
import {
|
||||
createFailure as failure,
|
||||
kindForStatus as statusKind,
|
||||
normalizeUnknownFailure,
|
||||
} from "../../contracts/errors.js";
|
||||
import { mapOperationPayload } from "./resource-mapper.js";
|
||||
import { retryDelay, shouldRetry } from "./retry-policy.js";
|
||||
import {
|
||||
validateEnvelope,
|
||||
@@ -49,6 +51,7 @@ const noAuthSession =
|
||||
* random?: () => number,
|
||||
* validatePayload?: (schemaId: string, value: unknown) =>
|
||||
* { success: true, data: unknown } | { success: false },
|
||||
* mapPayload?: (operationId: string, payload: unknown) => unknown,
|
||||
* idempotencyKeyFactory?: () => string
|
||||
* }} dependencies
|
||||
*/
|
||||
@@ -59,6 +62,7 @@ export function createHttpClient(dependencies) {
|
||||
const random = dependencies.random ?? Math.random;
|
||||
const validatePayload =
|
||||
dependencies.validatePayload ?? validateOperationPayload;
|
||||
const mapPayload = dependencies.mapPayload ?? mapOperationPayload;
|
||||
const idempotencyKeyFactory =
|
||||
dependencies.idempotencyKeyFactory ?? (() => crypto.randomUUID());
|
||||
|
||||
@@ -195,7 +199,13 @@ export function createHttpClient(dependencies) {
|
||||
}
|
||||
|
||||
const response = await fetcher(request);
|
||||
return await parseResponse(response, operation, attempt, validatePayload);
|
||||
return await parseResponse(
|
||||
response,
|
||||
operation,
|
||||
attempt,
|
||||
validatePayload,
|
||||
mapPayload,
|
||||
);
|
||||
} catch {
|
||||
if (timedOut) {
|
||||
return {
|
||||
@@ -254,9 +264,16 @@ export function createHttpClient(dependencies) {
|
||||
* @param {number} attempt
|
||||
* @param {(schemaId: string, value: unknown) =>
|
||||
* { success: true, data: unknown } | { success: false }} validatePayload
|
||||
* @param {(operationId: string, payload: unknown) => unknown} mapPayload
|
||||
* @returns {Promise<HttpResult>}
|
||||
*/
|
||||
async function parseResponse(response, operation, attempt, validatePayload) {
|
||||
async function parseResponse(
|
||||
response,
|
||||
operation,
|
||||
attempt,
|
||||
validatePayload,
|
||||
mapPayload,
|
||||
) {
|
||||
const contentType = response.headers.get("content-type") ?? "";
|
||||
if (!contentType.toLowerCase().includes("application/json")) {
|
||||
return {
|
||||
@@ -311,11 +328,21 @@ async function parseResponse(response, operation, attempt, validatePayload) {
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
value: structuredClone(payload.data),
|
||||
meta: safeMeta(envelopeRecord.meta),
|
||||
};
|
||||
try {
|
||||
return {
|
||||
ok: true,
|
||||
value: mapPayload(operation.operationId, payload.data),
|
||||
meta: safeMeta(envelopeRecord.meta),
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
ok: false,
|
||||
error: normalizeUnknownFailure(error, {
|
||||
operationId: operation.operationId,
|
||||
attempt,
|
||||
}),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const kind = statusKind(response.status);
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { createResource } from "../../domain/models/resource.js";
|
||||
|
||||
/** @param {unknown} value */
|
||||
export function mapResourceDto(value) {
|
||||
if (!value || typeof value !== "object") {
|
||||
throw new TypeError("Validated resource DTO is required");
|
||||
}
|
||||
const dto = /** @type {Record<string, unknown>} */ (value);
|
||||
if (typeof dto.id !== "string" || typeof dto.name !== "string") {
|
||||
throw new TypeError("Validated resource DTO invariants were breached");
|
||||
}
|
||||
|
||||
return createResource({
|
||||
id: dto.id,
|
||||
displayName: dto.name,
|
||||
createdAt: typeof dto.createdAt === "string" ? dto.createdAt : null,
|
||||
});
|
||||
}
|
||||
|
||||
/** @param {string} operationId @param {unknown} payload */
|
||||
export function mapOperationPayload(operationId, payload) {
|
||||
if (operationId === "LIST_SAMPLE_RESOURCES") {
|
||||
if (!Array.isArray(payload)) throw new TypeError("Expected a resource list");
|
||||
return payload.map(mapResourceDto);
|
||||
}
|
||||
if (operationId === "CREATE_SAMPLE_RESOURCE") {
|
||||
return mapResourceDto(payload);
|
||||
}
|
||||
throw new TypeError(`No boundary mapper registered for ${operationId}`);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { projectTelemetryEvent } from "../../contracts/telemetry.js";
|
||||
|
||||
export const noOpTelemetry = Object.freeze({
|
||||
emit: () => {},
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* enabled: boolean,
|
||||
* endpoint?: string,
|
||||
* fetcher?: typeof fetch,
|
||||
* maxQueue?: number,
|
||||
* schedule?: (callback: () => void) => void
|
||||
* }} options
|
||||
*/
|
||||
export function createTelemetryAdapter(options) {
|
||||
if (!options.enabled || !options.endpoint) {
|
||||
return Object.freeze({
|
||||
...noOpTelemetry,
|
||||
flush: async () => {},
|
||||
pendingCount: () => 0,
|
||||
droppedCount: () => 0,
|
||||
});
|
||||
}
|
||||
|
||||
const endpoint = /** @type {string} */ (options.endpoint);
|
||||
const fetcher = options.fetcher ?? fetch;
|
||||
const maxQueue = options.maxQueue ?? 100;
|
||||
const schedule = options.schedule ?? queueMicrotask;
|
||||
const queue =
|
||||
/** @type {Array<{eventName: string, attributes: Readonly<Record<string, unknown>>}>} */ (
|
||||
[]
|
||||
);
|
||||
let scheduled = false;
|
||||
let flushing = false;
|
||||
let dropped = 0;
|
||||
|
||||
/** @param {string} eventName @param {Record<string, unknown>} attributes */
|
||||
function emit(eventName, attributes) {
|
||||
const projected = projectTelemetryEvent(eventName, attributes);
|
||||
if (!projected.success) {
|
||||
dropped += 1;
|
||||
return;
|
||||
}
|
||||
|
||||
if (queue.length >= maxQueue) {
|
||||
queue.shift();
|
||||
dropped += 1;
|
||||
}
|
||||
queue.push(projected.event);
|
||||
|
||||
if (!scheduled) {
|
||||
scheduled = true;
|
||||
schedule(() => {
|
||||
scheduled = false;
|
||||
void flush();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function flush() {
|
||||
if (flushing || queue.length === 0) return;
|
||||
flushing = true;
|
||||
const batch = queue.splice(0, queue.length);
|
||||
try {
|
||||
const response = await fetcher(endpoint, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ events: batch }),
|
||||
keepalive: true,
|
||||
});
|
||||
if (!response.ok) dropped += batch.length;
|
||||
} catch {
|
||||
dropped += batch.length;
|
||||
} finally {
|
||||
flushing = false;
|
||||
}
|
||||
}
|
||||
|
||||
return Object.freeze({
|
||||
emit,
|
||||
flush,
|
||||
pendingCount: () => queue.length,
|
||||
droppedCount: () => dropped,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Propagates only a structurally valid W3C traceparent. Invalid/raw headers are
|
||||
* discarded rather than logged or surfaced.
|
||||
*
|
||||
* @param {string | null | undefined} traceparent
|
||||
*/
|
||||
export function safeTraceparent(traceparent) {
|
||||
return typeof traceparent === "string" &&
|
||||
/^00-[0-9a-f]{32}-[0-9a-f]{16}-0[01]$/i.test(traceparent)
|
||||
? traceparent.toLowerCase()
|
||||
: null;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
const RECOVERABLE_KINDS = new Set(["CHUNK_LOAD_FAILURE", "DEPLOY_MISMATCH"]);
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* failureKind: string,
|
||||
* manifestLoaded: boolean,
|
||||
* currentBuildId: string,
|
||||
* activeReleaseId: string,
|
||||
* storage: import("../ports/storage-port.js").StoragePort
|
||||
* }} input
|
||||
*/
|
||||
export function decideChunkRecovery(input) {
|
||||
if (!RECOVERABLE_KINDS.has(input.failureKind)) {
|
||||
return { action: "support", reason: "not-recoverable" };
|
||||
}
|
||||
if (!input.manifestLoaded) {
|
||||
return { action: "support", reason: "manifest-unavailable" };
|
||||
}
|
||||
if (input.activeReleaseId === input.currentBuildId) {
|
||||
return { action: "support", reason: "same-release" };
|
||||
}
|
||||
|
||||
const releasePair = `${input.currentBuildId}->${input.activeReleaseId}`;
|
||||
const guard = input.storage.read("CHUNK_RELOAD_GUARD");
|
||||
if (!guard.ok || guard.value === releasePair) {
|
||||
return { action: "support", reason: "reload-already-attempted" };
|
||||
}
|
||||
|
||||
const recorded = input.storage.write("CHUNK_RELOAD_GUARD", releasePair);
|
||||
if (!recorded.ok) {
|
||||
return { action: "support", reason: "guard-write-failed" };
|
||||
}
|
||||
return { action: "reload-once", releasePair };
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
export const ASYNC_BASE_STATES = Object.freeze([
|
||||
"initial-loading",
|
||||
"success",
|
||||
"empty",
|
||||
"terminal-error",
|
||||
]);
|
||||
|
||||
export const ASYNC_OVERLAYS = Object.freeze([
|
||||
"refreshing",
|
||||
"stale-degraded",
|
||||
"mutation-pending",
|
||||
"mutation-conflict",
|
||||
]);
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* data?: unknown,
|
||||
* isInitialLoading?: boolean,
|
||||
* failure?: import("../../contracts/errors.js").ApiFailure,
|
||||
* isFetching?: boolean,
|
||||
* isStale?: boolean,
|
||||
* isDegraded?: boolean,
|
||||
* isMutationPending?: boolean,
|
||||
* hasMutationConflict?: boolean
|
||||
* }} AsyncSignals
|
||||
*/
|
||||
|
||||
/** @param {AsyncSignals} signals */
|
||||
export function deriveAsyncState(signals) {
|
||||
const hasData = signals.data !== undefined && signals.data !== null;
|
||||
const empty =
|
||||
hasData &&
|
||||
((Array.isArray(signals.data) && signals.data.length === 0) ||
|
||||
signals.data === "");
|
||||
|
||||
let base;
|
||||
if (signals.isInitialLoading && !hasData) {
|
||||
base = "initial-loading";
|
||||
} else if (signals.failure && !hasData) {
|
||||
base = "terminal-error";
|
||||
} else if (empty) {
|
||||
base = "empty";
|
||||
} else if (hasData) {
|
||||
base = "success";
|
||||
} else {
|
||||
base = "initial-loading";
|
||||
}
|
||||
|
||||
const overlay = Object.freeze({
|
||||
refreshing: Boolean(signals.isFetching && hasData),
|
||||
staleDegraded: Boolean(signals.isStale && signals.isDegraded && hasData),
|
||||
mutationPending: Boolean(signals.isMutationPending && hasData),
|
||||
mutationConflict: Boolean(signals.hasMutationConflict && hasData),
|
||||
});
|
||||
|
||||
const state = {
|
||||
base,
|
||||
data: base === "success" || base === "empty" ? signals.data : undefined,
|
||||
failure: base === "terminal-error" ? signals.failure : undefined,
|
||||
overlay,
|
||||
indicator: selectOverlayIndicator(overlay),
|
||||
};
|
||||
|
||||
return Object.freeze(state);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* refreshing: boolean,
|
||||
* staleDegraded: boolean,
|
||||
* mutationPending: boolean,
|
||||
* mutationConflict: boolean
|
||||
* }} overlay
|
||||
*/
|
||||
export function selectOverlayIndicator(overlay) {
|
||||
if (overlay.mutationConflict) return "mutation-conflict";
|
||||
if (overlay.mutationPending) return "mutation-pending";
|
||||
if (overlay.staleDegraded) return "stale-degraded";
|
||||
if (overlay.refreshing) return "refreshing";
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* @param {import("../../domain/models/resource.js").Resource} resource
|
||||
* @param {(value: Date) => string} [formatDate]
|
||||
*/
|
||||
export function toResourceViewModel(
|
||||
resource,
|
||||
formatDate = (value) => new Intl.DateTimeFormat("ko-KR").format(value),
|
||||
) {
|
||||
return Object.freeze({
|
||||
resourceId: resource.id,
|
||||
title: resource.displayName,
|
||||
createdAtLabel: resource.createdAt
|
||||
? formatDate(new Date(resource.createdAt))
|
||||
: null,
|
||||
});
|
||||
}
|
||||
+11
-25
@@ -1,28 +1,11 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
import { createAnonymousSessionAdapter } from "../adapters/auth/external-session-adapter.js";
|
||||
import { BootErrorShell } from "../presentation/boundaries/boot-error-shell.jsx";
|
||||
import { AppRouter } from "../presentation/routes/app-router.jsx";
|
||||
import { BootConfigError, loadRuntimeConfig } from "./load-runtime-config.js";
|
||||
|
||||
/** @param {{ environment: string }} props */
|
||||
function BootstrapShell({ environment }) {
|
||||
return (
|
||||
<main>
|
||||
<h1>Clean Architecture Frontend</h1>
|
||||
<p>{environment} 런타임 계약이 검증되었습니다.</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/** @param {{ supportReference: string }} props */
|
||||
function BootErrorShell({ supportReference }) {
|
||||
return (
|
||||
<main role="alert">
|
||||
<h1>애플리케이션을 시작할 수 없습니다.</h1>
|
||||
<p>지원 참조: {supportReference}</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
|
||||
if (!rootElement) {
|
||||
@@ -36,16 +19,19 @@ async function boot() {
|
||||
const runtime = await loadRuntimeConfig();
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<BootstrapShell environment={runtime.config.APP_ENV} />
|
||||
<AppRouter
|
||||
authSession={createAnonymousSessionAdapter()}
|
||||
basename={runtime.build.routerBasePath}
|
||||
/>
|
||||
</StrictMode>,
|
||||
);
|
||||
} catch (error) {
|
||||
const supportReference =
|
||||
const safe =
|
||||
error instanceof BootConfigError
|
||||
? error.safe.supportReference
|
||||
: "boot:unknown";
|
||||
? error.safe
|
||||
: { supportReference: "boot:unknown" };
|
||||
|
||||
root.render(<BootErrorShell supportReference={supportReference} />);
|
||||
root.render(<BootErrorShell {...safe} />);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,13 +9,18 @@ const DROP_SENSITIVE = Object.freeze([
|
||||
"storageValue",
|
||||
]);
|
||||
|
||||
/**
|
||||
* @typedef {"retry" | "reauth" | "navigate" | "reload-once" |
|
||||
* "contact-support" | "none"} ErrorAction
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* kind: string,
|
||||
* defaultRetryable: boolean,
|
||||
* severity: string,
|
||||
* userMessageKey: string,
|
||||
* action: string,
|
||||
* action: ErrorAction,
|
||||
* telemetryEvent: string,
|
||||
* redaction: readonly string[]
|
||||
* }} ErrorDefinition
|
||||
@@ -25,7 +30,7 @@ const DROP_SENSITIVE = Object.freeze([
|
||||
* @param {string} kind
|
||||
* @param {boolean} defaultRetryable
|
||||
* @param {string} severity
|
||||
* @param {string} action
|
||||
* @param {ErrorAction} action
|
||||
* @param {string} [telemetryEvent]
|
||||
* @returns {Readonly<ErrorDefinition>}
|
||||
*/
|
||||
@@ -156,7 +161,7 @@ export const ERROR_REGISTRY = Object.freeze({
|
||||
* traceId?: string,
|
||||
* retryAfterMs?: number,
|
||||
* userMessageKey: string,
|
||||
* action: string,
|
||||
* action: ErrorAction,
|
||||
* causeClass?: string
|
||||
* }} ApiFailure
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* @typedef {{
|
||||
* routeId: string,
|
||||
* path: string,
|
||||
* paramsSchema: string | null,
|
||||
* searchSchema: string | null,
|
||||
* access: "public" | "session-required" | "integration-defined",
|
||||
* loadingSurface: string,
|
||||
* errorSurface: string,
|
||||
* chunkId: string
|
||||
* }} RouteDefinition
|
||||
*/
|
||||
|
||||
/** @param {RouteDefinition} definition */
|
||||
const route = (definition) => Object.freeze(definition);
|
||||
|
||||
export const ROUTE_REGISTRY = Object.freeze({
|
||||
APP_HOME: route({
|
||||
routeId: "APP_HOME",
|
||||
path: "/",
|
||||
paramsSchema: null,
|
||||
searchSchema: null,
|
||||
access: "public",
|
||||
loadingSurface: "app-shell",
|
||||
errorSurface: "route-boundary",
|
||||
chunkId: "route-home",
|
||||
}),
|
||||
SAMPLE_RESOURCE_LIST: route({
|
||||
routeId: "SAMPLE_RESOURCE_LIST",
|
||||
path: "/sample/resources",
|
||||
paramsSchema: null,
|
||||
searchSchema: "SampleResourceListQuery",
|
||||
access: "integration-defined",
|
||||
loadingSurface: "sample-resource-list",
|
||||
errorSurface: "feature-boundary",
|
||||
chunkId: "route-sample-resources",
|
||||
}),
|
||||
NOT_FOUND: route({
|
||||
routeId: "NOT_FOUND",
|
||||
path: "*",
|
||||
paramsSchema: null,
|
||||
searchSchema: null,
|
||||
access: "public",
|
||||
loadingSurface: "none",
|
||||
errorSurface: "not-found",
|
||||
chunkId: "route-not-found",
|
||||
}),
|
||||
});
|
||||
|
||||
/** @param {string} routeId */
|
||||
export function getRoute(routeId) {
|
||||
const registry = /** @type {Record<string, Readonly<RouteDefinition>>} */ (
|
||||
ROUTE_REGISTRY
|
||||
);
|
||||
const selected = registry[routeId];
|
||||
if (!selected) throw new Error(`Unregistered route: ${routeId}`);
|
||||
return selected;
|
||||
}
|
||||
|
||||
/** @param {string} routeId */
|
||||
export function routePath(routeId) {
|
||||
return getRoute(routeId).path;
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
export const TELEMETRY_ATTRIBUTE_ALLOWLIST = Object.freeze([
|
||||
"app_version",
|
||||
"build_id",
|
||||
"release_id",
|
||||
"config_schema_version",
|
||||
"api_contract_version",
|
||||
"route_id",
|
||||
"operation_id",
|
||||
"error_kind",
|
||||
"http_status_group",
|
||||
"attempt_count_bucket",
|
||||
"duration_bucket",
|
||||
"component_boundary",
|
||||
"active_release_id",
|
||||
"mismatch_kind",
|
||||
"reason",
|
||||
"queue_size_bucket",
|
||||
]);
|
||||
|
||||
export const TELEMETRY_FORBIDDEN_ATTRIBUTES = Object.freeze([
|
||||
"access_token",
|
||||
"refresh_token",
|
||||
"authorization_header",
|
||||
"cookie",
|
||||
"email",
|
||||
"user_name",
|
||||
"raw_user_id",
|
||||
"raw_url",
|
||||
"query_string",
|
||||
"request_body",
|
||||
"response_body",
|
||||
"storage_value",
|
||||
"stack_in_user_message",
|
||||
]);
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* eventName: string,
|
||||
* trigger: string,
|
||||
* requiredAttributes: readonly string[],
|
||||
* optionalAttributes: readonly string[],
|
||||
* forbiddenAttributes: readonly string[],
|
||||
* sampling: string,
|
||||
* delivery: string
|
||||
* }} TelemetryDefinition
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {string} eventName
|
||||
* @param {string} trigger
|
||||
* @param {string[]} requiredAttributes
|
||||
* @param {string[]} [optionalAttributes]
|
||||
* @param {string} [sampling]
|
||||
* @returns {Readonly<TelemetryDefinition>}
|
||||
*/
|
||||
const event = (
|
||||
eventName,
|
||||
trigger,
|
||||
requiredAttributes,
|
||||
optionalAttributes = [],
|
||||
sampling = "all",
|
||||
) =>
|
||||
Object.freeze({
|
||||
eventName,
|
||||
trigger,
|
||||
requiredAttributes: Object.freeze(requiredAttributes),
|
||||
optionalAttributes: Object.freeze(optionalAttributes),
|
||||
forbiddenAttributes: TELEMETRY_FORBIDDEN_ATTRIBUTES,
|
||||
sampling,
|
||||
delivery: "best-effort",
|
||||
});
|
||||
|
||||
export const TELEMETRY_REGISTRY = Object.freeze({
|
||||
"app.boot.failed": event("app.boot.failed", "boot validation failure", [
|
||||
"error_kind",
|
||||
"build_id",
|
||||
"config_schema_version",
|
||||
]),
|
||||
"api.request.failed": event("api.request.failed", "terminal API failure", [
|
||||
"error_kind",
|
||||
"http_status_group",
|
||||
"attempt_count_bucket",
|
||||
"route_id",
|
||||
]),
|
||||
"ui.render.failed": event("ui.render.failed", "React boundary catch", [
|
||||
"route_id",
|
||||
"build_id",
|
||||
"component_boundary",
|
||||
]),
|
||||
"release.mismatch.detected": event(
|
||||
"release.mismatch.detected",
|
||||
"release tuple mismatch",
|
||||
["build_id", "active_release_id", "mismatch_kind"],
|
||||
),
|
||||
"telemetry.delivery.dropped": event(
|
||||
"telemetry.delivery.dropped",
|
||||
"queue or sink failure",
|
||||
["reason", "queue_size_bucket"],
|
||||
[],
|
||||
"internal-counter",
|
||||
),
|
||||
});
|
||||
|
||||
/**
|
||||
* @param {string} eventName
|
||||
* @param {Record<string, unknown>} attributes
|
||||
*/
|
||||
export function projectTelemetryEvent(eventName, attributes) {
|
||||
const registry =
|
||||
/** @type {Record<string, (typeof TELEMETRY_REGISTRY)[keyof typeof TELEMETRY_REGISTRY]>} */ (
|
||||
TELEMETRY_REGISTRY
|
||||
);
|
||||
const definition = registry[eventName];
|
||||
if (!definition) {
|
||||
return {
|
||||
success: /** @type {false} */ (false),
|
||||
reason: "unregistered-event",
|
||||
};
|
||||
}
|
||||
|
||||
const projected = Object.fromEntries(
|
||||
Object.entries(attributes).filter(
|
||||
([key]) =>
|
||||
TELEMETRY_ATTRIBUTE_ALLOWLIST.includes(key) &&
|
||||
!TELEMETRY_FORBIDDEN_ATTRIBUTES.includes(key),
|
||||
),
|
||||
);
|
||||
const missing = definition.requiredAttributes.filter(
|
||||
(key) => projected[key] === undefined,
|
||||
);
|
||||
if (missing.length > 0) {
|
||||
return {
|
||||
success: /** @type {false} */ (false),
|
||||
reason: "missing-required-attributes",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
success: /** @type {true} */ (true),
|
||||
event: Object.freeze({
|
||||
eventName,
|
||||
attributes: Object.freeze(projected),
|
||||
}),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* @typedef {{
|
||||
* id: string,
|
||||
* displayName: string,
|
||||
* createdAt: string | null
|
||||
* }} Resource
|
||||
*/
|
||||
|
||||
/** @param {Resource} values @returns {Readonly<Resource>} */
|
||||
export function createResource(values) {
|
||||
if (!values.id || !values.displayName) {
|
||||
throw new TypeError("Resource invariants require id and displayName");
|
||||
}
|
||||
return Object.freeze({
|
||||
id: values.id,
|
||||
displayName: values.displayName,
|
||||
createdAt: values.createdAt,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* @param {{
|
||||
* kind?: string,
|
||||
* code?: string,
|
||||
* buildId?: string,
|
||||
* configSchemaVersion?: string,
|
||||
* releaseId?: string,
|
||||
* supportReference: string
|
||||
* }} props
|
||||
*/
|
||||
export function BootErrorShell({
|
||||
kind = "BOOT_CONFIG_FAILURE",
|
||||
code = "BOOT_FAILED",
|
||||
buildId,
|
||||
configSchemaVersion,
|
||||
releaseId,
|
||||
supportReference,
|
||||
}) {
|
||||
return (
|
||||
<main role="alert">
|
||||
<h1>애플리케이션을 시작할 수 없습니다.</h1>
|
||||
<dl>
|
||||
<dt>오류</dt>
|
||||
<dd>{kind}</dd>
|
||||
<dt>코드</dt>
|
||||
<dd>{code}</dd>
|
||||
{buildId && (
|
||||
<>
|
||||
<dt>빌드</dt>
|
||||
<dd>{buildId}</dd>
|
||||
</>
|
||||
)}
|
||||
{configSchemaVersion && (
|
||||
<>
|
||||
<dt>설정 스키마</dt>
|
||||
<dd>{configSchemaVersion}</dd>
|
||||
</>
|
||||
)}
|
||||
{releaseId && (
|
||||
<>
|
||||
<dt>릴리스</dt>
|
||||
<dd>{releaseId}</dd>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
<p>지원 참조: {supportReference}</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { Component } from "react";
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* children: React.ReactNode,
|
||||
* boundaryName: string,
|
||||
* routeId: string,
|
||||
* buildId: string,
|
||||
* telemetry?: import("../../application/ports/telemetry-port.js").TelemetryPort,
|
||||
* fallback?: React.ReactNode
|
||||
* }} RenderBoundaryProps
|
||||
* @typedef {{ hasError: boolean }} RenderBoundaryState
|
||||
*/
|
||||
|
||||
/** @extends {Component<RenderBoundaryProps, RenderBoundaryState>} */
|
||||
export class RenderErrorBoundary extends Component {
|
||||
/** @param {RenderBoundaryProps} props */
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { hasError: false };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError() {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch() {
|
||||
try {
|
||||
this.props.telemetry?.emit("ui.render.failed", {
|
||||
route_id: this.props.routeId,
|
||||
build_id: this.props.buildId,
|
||||
component_boundary: this.props.boundaryName,
|
||||
});
|
||||
} catch {
|
||||
// Telemetry must never recurse into another render failure.
|
||||
}
|
||||
}
|
||||
|
||||
reset = () => {
|
||||
this.setState({ hasError: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
this.props.fallback ?? (
|
||||
<section role="alert">
|
||||
<p>error.render_failure</p>
|
||||
<button type="button" onClick={this.reset}>
|
||||
retry
|
||||
</button>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
/** @param {Omit<RenderBoundaryProps, "boundaryName">} props */
|
||||
export function RouteBoundary(props) {
|
||||
return <RenderErrorBoundary {...props} boundaryName="route" />;
|
||||
}
|
||||
|
||||
/** @param {Omit<RenderBoundaryProps, "boundaryName">} props */
|
||||
export function FeatureBoundary(props) {
|
||||
return <RenderErrorBoundary {...props} boundaryName="feature" />;
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/** @param {{ label?: string }} props */
|
||||
export function LoadingSurface({ label = "불러오는 중" }) {
|
||||
return (
|
||||
<section aria-busy="true" aria-label={label}>
|
||||
<div className="ui-skeleton" aria-hidden="true" />
|
||||
<span className="sr-only">{label}</span>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** @param {{ title?: string, action?: React.ReactNode }} props */
|
||||
export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
|
||||
return (
|
||||
<section>
|
||||
<p>{title}</p>
|
||||
{action}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* userMessageKey: string,
|
||||
* action: "retry" | "reauth" | "navigate" | "reload-once" |
|
||||
* "contact-support" | "none",
|
||||
* onAction?: () => void
|
||||
* }} props
|
||||
*/
|
||||
export function TerminalErrorSurface({ userMessageKey, action, onAction }) {
|
||||
return (
|
||||
<section role="alert" aria-labelledby="terminal-error-message">
|
||||
<p id="terminal-error-message">{userMessageKey}</p>
|
||||
{action !== "none" && (
|
||||
<button type="button" onClick={onAction}>
|
||||
{action}
|
||||
</button>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* state: ReturnType<typeof import("../../application/view-models/async-state.js").deriveAsyncState>,
|
||||
* children?: React.ReactNode,
|
||||
* onAction?: () => void
|
||||
* }} props
|
||||
*/
|
||||
export function AsyncSurface({ state, children, onAction }) {
|
||||
if (state.base === "initial-loading") return <LoadingSurface />;
|
||||
if (state.base === "empty") return <EmptySurface />;
|
||||
if (state.base === "terminal-error" && state.failure) {
|
||||
return (
|
||||
<TerminalErrorSurface
|
||||
userMessageKey={state.failure.userMessageKey}
|
||||
action={state.failure.action}
|
||||
onAction={onAction}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section aria-busy={state.overlay.refreshing || state.overlay.mutationPending}>
|
||||
{state.indicator && (
|
||||
<p role="status" aria-live="polite">
|
||||
{state.indicator}
|
||||
</p>
|
||||
)}
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import {
|
||||
BrowserRouter,
|
||||
Link,
|
||||
Route,
|
||||
Routes,
|
||||
} from "react-router-dom";
|
||||
|
||||
import { routePath } from "../../contracts/routes.js";
|
||||
import { decideRouteAccess } from "./navigation-policy.js";
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<main>
|
||||
<h1>Clean Architecture Frontend</h1>
|
||||
<p>런타임 계약이 검증되었습니다.</p>
|
||||
<Link to={routePath("SAMPLE_RESOURCE_LIST")}>샘플 리소스</Link>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function SamplePlaceholder() {
|
||||
return (
|
||||
<main>
|
||||
<h1>샘플 리소스</h1>
|
||||
<p>계약 fixture를 준비하고 있습니다.</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function NotFoundPage() {
|
||||
return (
|
||||
<main>
|
||||
<h1>페이지를 찾을 수 없습니다.</h1>
|
||||
<Link to={routePath("APP_HOME")}>홈으로 이동</Link>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort
|
||||
* }} props
|
||||
*/
|
||||
function GuardedSampleRoute({ authSession }) {
|
||||
const decision = decideRouteAccess(
|
||||
"SAMPLE_RESOURCE_LIST",
|
||||
authSession.getState(),
|
||||
);
|
||||
if (!decision.allowed) {
|
||||
return (
|
||||
<main>
|
||||
<h1>세션이 필요합니다.</h1>
|
||||
<button type="button">로그인</button>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
return <SamplePlaceholder />;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* authSession: import("../../application/ports/auth-session-port.js").AuthSessionPort,
|
||||
* basename?: string
|
||||
* }} props
|
||||
*/
|
||||
export function AppRouter({ authSession, basename = "/" }) {
|
||||
return (
|
||||
<BrowserRouter basename={basename}>
|
||||
<Routes>
|
||||
<Route path={routePath("APP_HOME")} element={<HomePage />} />
|
||||
<Route
|
||||
path={routePath("SAMPLE_RESOURCE_LIST")}
|
||||
element={<GuardedSampleRoute authSession={authSession} />}
|
||||
/>
|
||||
<Route path={routePath("NOT_FOUND")} element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { getRoute } from "../../contracts/routes.js";
|
||||
|
||||
/**
|
||||
* @param {string} routeId
|
||||
* @param {import("../../application/ports/auth-session-port.js").SessionState} sessionState
|
||||
*/
|
||||
export function decideRouteAccess(routeId, sessionState) {
|
||||
const route = getRoute(routeId);
|
||||
if (route.access === "public") return { allowed: true, action: "none" };
|
||||
if (sessionState === "authenticated") {
|
||||
return { allowed: true, action: "none" };
|
||||
}
|
||||
if (sessionState === "recovery-pending") {
|
||||
return { allowed: false, action: "wait-for-session" };
|
||||
}
|
||||
return { allowed: false, action: "show-sign-in" };
|
||||
}
|
||||
|
||||
export function createRedirectLoopGuard() {
|
||||
const visitedPairs = new Set();
|
||||
|
||||
return Object.freeze({
|
||||
/**
|
||||
* @param {string} source
|
||||
* @param {string} target
|
||||
*/
|
||||
allow(source, target) {
|
||||
const pair = `${source}->${target}`;
|
||||
if (source === target || visitedPairs.has(pair)) return false;
|
||||
visitedPairs.add(pair);
|
||||
return true;
|
||||
},
|
||||
reset() {
|
||||
visitedPairs.clear();
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { deriveAsyncState } from "../../src/application/view-models/async-state.js";
|
||||
import { AsyncSurface } from "../../src/presentation/components/async-surface.jsx";
|
||||
import { createFailure } from "../../src/contracts/errors.js";
|
||||
|
||||
describe("async UI state matrix", () => {
|
||||
it.each([
|
||||
[{ isInitialLoading: true }, "initial-loading"],
|
||||
[{ data: [{ id: "1" }] }, "success"],
|
||||
[{ data: [] }, "empty"],
|
||||
[
|
||||
{ failure: createFailure("SERVER_FAILURE", "LIST", 0) },
|
||||
"terminal-error",
|
||||
],
|
||||
])("derives base state %#", (signals, expected) => {
|
||||
expect(deriveAsyncState(signals).base).toBe(expected);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[{ data: ["value"], isFetching: true }, "refreshing"],
|
||||
[{ data: ["value"], isStale: true, isDegraded: true }, "stale-degraded"],
|
||||
[{ data: ["value"], isMutationPending: true }, "mutation-pending"],
|
||||
[{ data: ["value"], hasMutationConflict: true }, "mutation-conflict"],
|
||||
])("derives overlay state %#", (signals, indicator) => {
|
||||
expect(deriveAsyncState(signals).indicator).toBe(indicator);
|
||||
});
|
||||
|
||||
it("uses deterministic overlay priority for crossed states", () => {
|
||||
const state = deriveAsyncState({
|
||||
data: ["value"],
|
||||
isFetching: true,
|
||||
isMutationPending: true,
|
||||
hasMutationConflict: true,
|
||||
});
|
||||
expect(state.indicator).toBe("mutation-conflict");
|
||||
expect(state.overlay).toMatchObject({
|
||||
refreshing: true,
|
||||
mutationPending: true,
|
||||
mutationConflict: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("keeps content visible while a non-blocking refresh runs", () => {
|
||||
const state = deriveAsyncState({ data: ["value"], isFetching: true });
|
||||
render(<AsyncSurface state={state}>existing content</AsyncSurface>);
|
||||
|
||||
expect(screen.getByText("existing content")).toBeVisible();
|
||||
expect(screen.getByRole("status")).toHaveTextContent("refreshing");
|
||||
});
|
||||
|
||||
it("renders only safe error vocabulary", () => {
|
||||
const failure = createFailure("SERVER_FAILURE", "LIST", 0, {
|
||||
code: "SERVER_FAILURE",
|
||||
});
|
||||
const state = deriveAsyncState({ failure });
|
||||
render(<AsyncSurface state={state} />);
|
||||
|
||||
expect(screen.getByRole("alert")).toHaveTextContent(failure.userMessageKey);
|
||||
expect(screen.getByRole("button")).toHaveTextContent("retry");
|
||||
expect(screen.getByRole("alert")).not.toHaveTextContent("stack");
|
||||
});
|
||||
|
||||
it("does not retain a terminal error after usable data is restored", () => {
|
||||
const failed = deriveAsyncState({
|
||||
failure: createFailure("SERVER_FAILURE", "LIST", 0),
|
||||
});
|
||||
const recovered = deriveAsyncState({ data: ["value"] });
|
||||
expect(failed.base).toBe("terminal-error");
|
||||
expect(recovered.base).toBe("success");
|
||||
expect(recovered.failure).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { createFailure } from "../../src/contracts/errors.js";
|
||||
import { deriveAsyncState } from "../../src/application/view-models/async-state.js";
|
||||
import { AsyncSurface } from "../../src/presentation/components/async-surface.jsx";
|
||||
import { BootErrorShell } from "../../src/presentation/boundaries/boot-error-shell.jsx";
|
||||
import { FeatureBoundary } from "../../src/presentation/boundaries/render-error-boundary.jsx";
|
||||
|
||||
function Defect() {
|
||||
throw new Error("raw render stack");
|
||||
}
|
||||
|
||||
describe("render recovery boundaries", () => {
|
||||
it("catches programmer defects and emits best-effort safe telemetry", () => {
|
||||
const telemetry = { emit: vi.fn() };
|
||||
render(
|
||||
<FeatureBoundary
|
||||
routeId="APP_HOME"
|
||||
buildId="build-a"
|
||||
telemetry={telemetry}
|
||||
>
|
||||
<Defect />
|
||||
</FeatureBoundary>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole("alert")).toHaveTextContent("error.render_failure");
|
||||
expect(telemetry.emit).toHaveBeenCalledWith("ui.render.failed", {
|
||||
route_id: "APP_HOME",
|
||||
build_id: "build-a",
|
||||
component_boundary: "feature",
|
||||
});
|
||||
});
|
||||
|
||||
it("keeps normalized operational failures in normal async state", () => {
|
||||
const state = deriveAsyncState({
|
||||
failure: createFailure("SERVER_FAILURE", "LIST", 0),
|
||||
});
|
||||
render(
|
||||
<FeatureBoundary routeId="APP_HOME" buildId="build-a">
|
||||
<AsyncSurface state={state} />
|
||||
</FeatureBoundary>,
|
||||
);
|
||||
expect(screen.getByRole("alert")).toHaveTextContent("error.server_failure");
|
||||
});
|
||||
|
||||
it("renders a safe boot shell with no endpoint or stack", () => {
|
||||
render(
|
||||
<BootErrorShell
|
||||
kind="BOOT_CONFIG_FAILURE"
|
||||
code="CONFIG_SCHEMA_INVALID"
|
||||
buildId="build-a"
|
||||
configSchemaVersion="1"
|
||||
supportReference="build-a:CONFIG_SCHEMA_INVALID"
|
||||
/>,
|
||||
);
|
||||
const shell = screen.getByRole("alert");
|
||||
expect(shell).toHaveTextContent("build-a:CONFIG_SCHEMA_INVALID");
|
||||
expect(shell).not.toHaveTextContent("https://");
|
||||
expect(shell).not.toHaveTextContent("stack");
|
||||
});
|
||||
|
||||
it("allows a boundary reset action without reloading the page", async () => {
|
||||
let shouldThrow = true;
|
||||
function Recoverable() {
|
||||
if (shouldThrow) throw new Error("defect");
|
||||
return <p>recovered</p>;
|
||||
}
|
||||
const user = userEvent.setup();
|
||||
const view = render(
|
||||
<FeatureBoundary routeId="APP_HOME" buildId="build-a">
|
||||
<Recoverable />
|
||||
</FeatureBoundary>,
|
||||
);
|
||||
shouldThrow = false;
|
||||
await user.click(screen.getByRole("button", { name: "retry" }));
|
||||
view.rerender(
|
||||
<FeatureBoundary routeId="APP_HOME" buildId="build-a">
|
||||
<Recoverable />
|
||||
</FeatureBoundary>,
|
||||
);
|
||||
expect(screen.getByText("recovered")).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { createAnonymousSessionAdapter } from "../../src/adapters/auth/external-session-adapter.js";
|
||||
import { AppRouter } from "../../src/presentation/routes/app-router.jsx";
|
||||
|
||||
describe("application router", () => {
|
||||
it("renders not-found without making an API request", () => {
|
||||
window.history.pushState({}, "", "/missing");
|
||||
render(<AppRouter authSession={createAnonymousSessionAdapter()} />);
|
||||
expect(
|
||||
screen.getByRole("heading", { name: "페이지를 찾을 수 없습니다." }),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
it("shows session-required UX without claiming authorization", () => {
|
||||
window.history.pushState({}, "", "/sample/resources");
|
||||
render(<AppRouter authSession={createAnonymousSessionAdapter()} />);
|
||||
expect(screen.getByRole("heading", { name: "세션이 필요합니다." })).toBeVisible();
|
||||
expect(screen.getByRole("button", { name: "로그인" })).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -46,7 +46,7 @@ describe("shared HTTP client", () => {
|
||||
client.execute("LIST_SAMPLE_RESOURCES", { routeId: "SAMPLE_RESOURCE_LIST" }),
|
||||
).resolves.toMatchObject({
|
||||
ok: true,
|
||||
value: [{ id: "resource-1" }],
|
||||
value: [{ id: "resource-1", displayName: "Example" }],
|
||||
meta: { requestId: "request-1" },
|
||||
});
|
||||
expect(attempts).toBe(3);
|
||||
@@ -99,4 +99,30 @@ describe("shared HTTP client", () => {
|
||||
error: { kind: "SCHEMA_MISMATCH" },
|
||||
});
|
||||
});
|
||||
|
||||
it("guards mapper exceptions as UNKNOWN_FAILURE", async () => {
|
||||
server.use(
|
||||
http.get("https://api.test/api/sample/resources", () =>
|
||||
HttpResponse.json({
|
||||
success: true,
|
||||
data: [{ id: "resource-1", name: "Example" }],
|
||||
meta: { requestId: "request-1", traceId: "trace-1" },
|
||||
}),
|
||||
),
|
||||
);
|
||||
const client = createHttpClient({
|
||||
baseUrl: "https://api.test",
|
||||
clock,
|
||||
mapPayload: () => {
|
||||
throw new Error("raw mapper detail");
|
||||
},
|
||||
});
|
||||
|
||||
const result = await client.execute("LIST_SAMPLE_RESOURCES");
|
||||
expect(result).toMatchObject({
|
||||
ok: false,
|
||||
error: { kind: "UNKNOWN_FAILURE" },
|
||||
});
|
||||
expect(JSON.stringify(result)).not.toContain("raw mapper detail");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
mapOperationPayload,
|
||||
mapResourceDto,
|
||||
} from "../../src/adapters/http/resource-mapper.js";
|
||||
import { toResourceViewModel } from "../../src/application/view-models/resource-view-model.js";
|
||||
|
||||
describe("DTO to model to view-model mapping", () => {
|
||||
it("contains raw DTO names at the HTTP boundary", () => {
|
||||
const model = mapResourceDto({
|
||||
id: "resource-1",
|
||||
name: "Example",
|
||||
createdAt: "2026-07-25T00:00:00.000Z",
|
||||
backendOnly: "not propagated",
|
||||
});
|
||||
|
||||
expect(model).toEqual({
|
||||
id: "resource-1",
|
||||
displayName: "Example",
|
||||
createdAt: "2026-07-25T00:00:00.000Z",
|
||||
});
|
||||
expect(model).not.toHaveProperty("name");
|
||||
expect(model).not.toHaveProperty("backendOnly");
|
||||
});
|
||||
|
||||
it("maps operation payloads and rejects missing mappers", () => {
|
||||
expect(
|
||||
mapOperationPayload("LIST_SAMPLE_RESOURCES", [
|
||||
{ id: "resource-1", name: "Example" },
|
||||
]),
|
||||
).toEqual([
|
||||
{ id: "resource-1", displayName: "Example", createdAt: null },
|
||||
]);
|
||||
expect(() => mapOperationPayload("UNKNOWN", {})).toThrow(
|
||||
"No boundary mapper registered",
|
||||
);
|
||||
});
|
||||
|
||||
it("projects an application-owned render-ready shape", () => {
|
||||
const model = mapResourceDto({
|
||||
id: "resource-1",
|
||||
name: "Example",
|
||||
createdAt: null,
|
||||
});
|
||||
expect(toResourceViewModel(model)).toEqual({
|
||||
resourceId: "resource-1",
|
||||
title: "Example",
|
||||
createdAtLabel: null,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { decideChunkRecovery } from "../../src/application/use-cases/decide-chunk-recovery.js";
|
||||
|
||||
function memoryStorage() {
|
||||
let value;
|
||||
return {
|
||||
read: () => ({ ok: true, value }),
|
||||
write: (_key, next) => {
|
||||
value = next;
|
||||
return { ok: true };
|
||||
},
|
||||
remove: () => ({ ok: true }),
|
||||
};
|
||||
}
|
||||
|
||||
describe("controlled chunk recovery", () => {
|
||||
it("records the release pair before allowing one reload", () => {
|
||||
const storage = memoryStorage();
|
||||
const input = {
|
||||
failureKind: "CHUNK_LOAD_FAILURE",
|
||||
manifestLoaded: true,
|
||||
currentBuildId: "build-a",
|
||||
activeReleaseId: "release-b",
|
||||
storage,
|
||||
};
|
||||
expect(decideChunkRecovery(input)).toEqual({
|
||||
action: "reload-once",
|
||||
releasePair: "build-a->release-b",
|
||||
});
|
||||
expect(decideChunkRecovery(input)).toEqual({
|
||||
action: "support",
|
||||
reason: "reload-already-attempted",
|
||||
});
|
||||
});
|
||||
|
||||
it.each([
|
||||
[{ failureKind: "SERVER_FAILURE" }, "not-recoverable"],
|
||||
[{ manifestLoaded: false }, "manifest-unavailable"],
|
||||
[{ activeReleaseId: "build-a" }, "same-release"],
|
||||
])("stops when a recovery invariant fails: %#", (override, reason) => {
|
||||
const result = decideChunkRecovery({
|
||||
failureKind: "DEPLOY_MISMATCH",
|
||||
manifestLoaded: true,
|
||||
currentBuildId: "build-a",
|
||||
activeReleaseId: "release-b",
|
||||
storage: memoryStorage(),
|
||||
...override,
|
||||
});
|
||||
expect(result).toEqual({ action: "support", reason });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
createRedirectLoopGuard,
|
||||
decideRouteAccess,
|
||||
} from "../../src/presentation/routes/navigation-policy.js";
|
||||
import { ROUTE_REGISTRY } from "../../src/contracts/routes.js";
|
||||
|
||||
describe("route registry", () => {
|
||||
it("matches the stable registry snapshot", () => {
|
||||
expect(ROUTE_REGISTRY).toMatchInlineSnapshot(`
|
||||
{
|
||||
"APP_HOME": {
|
||||
"access": "public",
|
||||
"chunkId": "route-home",
|
||||
"errorSurface": "route-boundary",
|
||||
"loadingSurface": "app-shell",
|
||||
"paramsSchema": null,
|
||||
"path": "/",
|
||||
"routeId": "APP_HOME",
|
||||
"searchSchema": null,
|
||||
},
|
||||
"NOT_FOUND": {
|
||||
"access": "public",
|
||||
"chunkId": "route-not-found",
|
||||
"errorSurface": "not-found",
|
||||
"loadingSurface": "none",
|
||||
"paramsSchema": null,
|
||||
"path": "*",
|
||||
"routeId": "NOT_FOUND",
|
||||
"searchSchema": null,
|
||||
},
|
||||
"SAMPLE_RESOURCE_LIST": {
|
||||
"access": "integration-defined",
|
||||
"chunkId": "route-sample-resources",
|
||||
"errorSurface": "feature-boundary",
|
||||
"loadingSurface": "sample-resource-list",
|
||||
"paramsSchema": null,
|
||||
"path": "/sample/resources",
|
||||
"routeId": "SAMPLE_RESOURCE_LIST",
|
||||
"searchSchema": "SampleResourceListQuery",
|
||||
},
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it("treats client access as a UX hint, not authorization", () => {
|
||||
expect(decideRouteAccess("APP_HOME", "unauthenticated")).toEqual({
|
||||
allowed: true,
|
||||
action: "none",
|
||||
});
|
||||
expect(decideRouteAccess("SAMPLE_RESOURCE_LIST", "unauthenticated")).toEqual({
|
||||
allowed: false,
|
||||
action: "show-sign-in",
|
||||
});
|
||||
expect(decideRouteAccess("SAMPLE_RESOURCE_LIST", "authenticated")).toEqual({
|
||||
allowed: true,
|
||||
action: "none",
|
||||
});
|
||||
});
|
||||
|
||||
it("allows at most one automatic redirect per source-target pair", () => {
|
||||
const guard = createRedirectLoopGuard();
|
||||
expect(guard.allow("/private", "/signin")).toBe(true);
|
||||
expect(guard.allow("/private", "/signin")).toBe(false);
|
||||
expect(guard.allow("/signin", "/signin")).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,105 @@
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
import {
|
||||
createTelemetryAdapter,
|
||||
safeTraceparent,
|
||||
} from "../../src/adapters/telemetry/best-effort-telemetry.js";
|
||||
import {
|
||||
TELEMETRY_REGISTRY,
|
||||
projectTelemetryEvent,
|
||||
} from "../../src/contracts/telemetry.js";
|
||||
|
||||
const validAttributes = {
|
||||
error_kind: "SERVER_FAILURE",
|
||||
http_status_group: "5xx",
|
||||
attempt_count_bucket: "3",
|
||||
route_id: "SAMPLE_RESOURCE_LIST",
|
||||
};
|
||||
|
||||
describe("telemetry registry and redaction", () => {
|
||||
it("defines all event contract fields", () => {
|
||||
for (const definition of Object.values(TELEMETRY_REGISTRY)) {
|
||||
expect(definition).toEqual(
|
||||
expect.objectContaining({
|
||||
eventName: expect.any(String),
|
||||
trigger: expect.any(String),
|
||||
requiredAttributes: expect.any(Array),
|
||||
optionalAttributes: expect.any(Array),
|
||||
forbiddenAttributes: expect.any(Array),
|
||||
sampling: expect.any(String),
|
||||
delivery: "best-effort",
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
it("uses a default-deny attribute projection", () => {
|
||||
const projected = projectTelemetryEvent("api.request.failed", {
|
||||
...validAttributes,
|
||||
raw_url: "https://api.test/path?token=secret",
|
||||
unregistered: "private",
|
||||
});
|
||||
|
||||
expect(projected.success).toBe(true);
|
||||
expect(JSON.stringify(projected)).not.toMatch(/raw_url|token|secret|unregistered/);
|
||||
});
|
||||
|
||||
it("validates traceparent without exposing invalid values", () => {
|
||||
expect(
|
||||
safeTraceparent(
|
||||
"00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01",
|
||||
),
|
||||
).toBe("00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01");
|
||||
expect(safeTraceparent("Bearer secret")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("best-effort telemetry adapter", () => {
|
||||
it("bounds the queue using oldest-drop without blocking callers", () => {
|
||||
const scheduled = [];
|
||||
const adapter = createTelemetryAdapter({
|
||||
enabled: true,
|
||||
endpoint: "https://telemetry.test/events",
|
||||
maxQueue: 2,
|
||||
schedule: (callback) => scheduled.push(callback),
|
||||
fetcher: vi.fn(),
|
||||
});
|
||||
|
||||
adapter.emit("api.request.failed", validAttributes);
|
||||
adapter.emit("api.request.failed", validAttributes);
|
||||
adapter.emit("api.request.failed", validAttributes);
|
||||
|
||||
expect(adapter.pendingCount()).toBe(2);
|
||||
expect(adapter.droppedCount()).toBe(1);
|
||||
expect(scheduled).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("degrades on sink failure without throwing or recursive events", async () => {
|
||||
const adapter = createTelemetryAdapter({
|
||||
enabled: true,
|
||||
endpoint: "https://telemetry.test/events",
|
||||
schedule: () => {},
|
||||
fetcher: async () => {
|
||||
throw new Error("sink unavailable");
|
||||
},
|
||||
});
|
||||
expect(() => adapter.emit("api.request.failed", validAttributes)).not.toThrow();
|
||||
await expect(adapter.flush()).resolves.toBeUndefined();
|
||||
expect(adapter.droppedCount()).toBe(1);
|
||||
expect(adapter.pendingCount()).toBe(0);
|
||||
});
|
||||
|
||||
it("performs no network or queue work when disabled", async () => {
|
||||
const fetcher = vi.fn();
|
||||
const adapter = createTelemetryAdapter({
|
||||
enabled: false,
|
||||
endpoint: "https://telemetry.test/events",
|
||||
fetcher,
|
||||
});
|
||||
adapter.emit("api.request.failed", validAttributes);
|
||||
await adapter.flush();
|
||||
|
||||
expect(fetcher).not.toHaveBeenCalled();
|
||||
expect(adapter.pendingCount()).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user