Client Error Consumption & Debugging Parse the stable envelope in Next.js and distinguish API failures from transport failures
Phase 13 - Professional Error Handling Volume 04 - Professional Backend
Architecture milestone fetch
↓
network vs HTTP response
↓
↓
Phase 13 creates one professional exception boundary and a correlation story that spans client response and server logs.
Frontend should consume the contract, not framework accidents Next.js should not need to know whether NestJS, Zod, Prisma, PostgreSQL, or Fastify produced the failure. It should parse TaskFlow's stable API error response.
export type ApiErrorResponse = { statusCode: number; code: string; message: string; requestId: string; timestamp: string; path: string; details?: string[] | Record<string, unknown>; };
export class ApiClientError extends Error { constructor( public readonly statusCode: number, public readonly code: string, message: string, public readonly requestId?: string, public readonly details?: ApiErrorResponse["details"], ) { super(message); } }
export async function throwIfNotOk(response: Response) { if (response.ok) return;
let payload: ApiErrorResponse | undefined;try { payload = (await response.json()) as ApiErrorResponse; } catch { // The server may have returned a non-JSON infrastructure error. }
throw new ApiClientError( response.status, payload?.code ?? "HTTP_ERROR", payload?.message ?? "The request failed.", payload?.requestId, payload?.details, ); }
Typical UI decisions Error condition Possible UI behavior
TASK_NOT_FOUND Show “Task no longer exists” and navigate back
If fetch cannot reach the server, there may be no HTTP status, no JSON envelope, and no requestId. That is a transport failure. If the API returns 404/409/500, fetch receives an HTTP response and the TaskFlow error parser can process the body.
Figure 1 - Client failure split fetch() call
↓
↓
↓
response.ok false -> parse ApiErrorResponse
↓
throw ApiClientError
The UI can now distinguish connectivity from server-declared application failures.
Debug with requestId first When an INTERNAL_ERROR reaches the browser, show a short message and the requestId. Do not dump stack traces into the UI. During development, the same ID should be visible in the Nest terminal log so you can correlate the failure quickly.
Client Error Consumption and Debugging matters because it changes a real boundary in TaskFlow. The goal is to understand the inputs, owner, observable output, and failure modes before adding more abstraction.
Restate the goal of “Client Error Consumption and Debugging” as one observable behavior. Write the success signal before touching code.
Trace the boundary map: failure → typed/domain error → exception mapping → HTTP envelope → client handling. Mark the one boundary this lesson changes.
Inspect the current repository state and record the exact files, route, table, or runtime involved. Avoid creating an abstraction before you can name the existing owner.
Implement the smallest vertical slice. Add one coherent change, run the narrowest verification command, and read the output before continuing.
Connect the slice to TaskFlow’s phase artifact: Error taxonomy + NestJS mapping layer/filters + structured error response with request IDs.. Verify behavior from the outside as a user or API client would.
Create one controlled failure that is safe to reproduce. Predict the symptom first, capture evidence, locate the earliest broken boundary, then fix only that cause.
Close the reference and rebuild or explain the core change from memory. Record what you would monitor or test before trusting the same change in production.
{
"error": {
"code": "TASK_NOT_FOUND",
"message": "Task was not found",
"requestId": "req_..."
}
}Do not copy this as a finished answer. Predict what each boundary does, type the smallest useful slice, run it, then compare the result with your prediction.
Return to the nearest observable boundary: input, network, process log, database, or rendered UI. Compare actual evidence with the predicted path.
Change one variable at a time and reproduce the original failure after the fix; otherwise you have correlation, not diagnosis.
Without copying the final source, create a second small scenario that applies “Client Error Consumption and Debugging” to a different TaskFlow resource or input. Write the acceptance criteria first, implement it, and provide the evidence that each criterion is satisfied.
Map errors to one stable HTTP envelope at a central boundary.
Use the smallest change that demonstrates this lesson. Stop after it works and capture evidence.Returning raw exception messages/stacks
Predict the symptom before causing the failure. Then locate the earliest boundary where reality diverges from expectation.Why does this responsibility live here, what input does it trust, what output proves success, and what would go wrong if another layer owned it?
If your explanation is vague, repeat the boundary trace before moving on.Close the reference. Reproduce the core idea from memory or explain the exact request/data flow aloud. Then check your diff or notes for accidental shortcuts that bypass validation, authorization, error handling, or verification earned in earlier phases.