Extending Native Error Classes for Categorized UI Fallback Handling

import { useState } from 'react';
 
class OperationalTimeoutError extends Error {
  constructor(serviceName, attempts) {
    super(`Operation on ${serviceName} timed out after ${attempts} attempts.`);
    this.name = 'OperationalTimeoutError';
    this.serviceName = serviceName;
    this.attempts = attempts;
    this.canRetry = true;
  }
}
 
export function HealthMonitor() {
  const [fault, setFault] = useState(null);
 
  const simulateTimeout = () => {
    const failure = new OperationalTimeoutError('BillingGateway', 3);
    setFault(failure);
  };
 
  return (
    <div>
      <button onClick={simulateTimeout}>Trigger Failure</button>
      {fault instanceof OperationalTimeoutError && (
        <div role="alert">
          <p>{fault.message}</p>
          {fault.canRetry && <button onClick={simulateTimeout}>Retry Service</button>}
        </div>
      )}
    </div>
  );
}