Error Handling for Frontend and Node.js

Use these notes to explain how you design resilient error handling across UI and API layers.

Principles

• Fail fast on invalid input and surface useful user feedback.
• Classify errors (validation, network, server, unexpected).
• Centralize error mapping so UI components stay clean.

Client-side error patterns

Guard clauses

if (!email.includes('@')) {
  throw new Error('Invalid email address');
}

Result types for expected failures

type Result<T> =
  | { ok: true; value: T }
  | { ok: false; error: string };

Abort and timeout

const withTimeout = <T>(promise: Promise<T>, ms: number): Promise<T> =>
  Promise.race([
    promise,
    new Promise<T>((_, reject) =>
      setTimeout(() => reject(Object.assign(new Error('Timeout'), { name: 'TimeoutError' })), ms)
    )
  ]);

API boundary handling (BFF/Node)

• Convert internal errors into consistent API error shapes.
• Use try/catch middleware to log and sanitize responses.
• Attach correlation IDs to errors.

app.use((err, req, res, next) => {
  logger.error('request_failed', { requestId: req.id, err });
  res.status(err.status ?? 500).json({ error: err.message });
});

UI error reporting

• Error boundaries: Catch render errors and show fallback UI.
• Async errors: Track and report unhandled rejections.
• User messaging: Provide actionable messages, not stack traces.

Interview prompts

• Explain when you use exceptions vs Result<T>.
• Describe how you implement retry + backoff for transient failures.
• Walk through error handling for a multi-step form flow.