v134 · javascript

Error Boundary Builder

Design an error boundary in layers: each layer decides whether to handle, rethrow, or wrap an incoming value. Error.isError() is the only reliable gate at each layer — unlike instanceof, it works for DOMExceptions, errors from other realms, and errors that survive structured-clone.

checking Error.isError…

A production error boundary must handle: plain Error, subclasses, DOMException, errors thrown as strings, and non-error objects accidentally thrown. Error.isError(v) returns true exactly when v is a genuine error object — cross-realm safe, prototype-spoof proof.

Configure thrown value

Value type

Message

Boundary layers

Error boundary stack (outermost layer first)

Final verdict

Configure a value and click "Run through boundary".

Boundary implementation

// Production error boundary using Error.isError (Chrome 134+)
function createBoundary(name, handlers) {
  return function boundary(thrown) {
    if (!Error.isError(thrown)) {
      // Wrap non-errors so downstream always gets a real Error
      return new Error(`[${name}] Non-error thrown: ${JSON.stringify(thrown)}`);
    }

    for (const [predicate, handler] of handlers) {
      if (predicate(thrown)) return handler(thrown);
    }

    return thrown; // re-throw (caller will escalate)
  };
}

// Usage
const networkBoundary = createBoundary('network', [
  [e => e instanceof TypeError && e.message.includes('fetch'), e => {
    reportToAnalytics('fetch_error', e);
    return new Error('Network unavailable — please retry');
  }],
]);

const appBoundary = createBoundary('app', [
  [e => e instanceof RangeError, e => ({ fatal: false, message: e.message })],
  [() => true, e => ({ fatal: true, message: 'Unexpected error', original: e })],
]);