Symbol-Tagged AggregateError Dispatching in React Error Catchers

import React from 'react';
 
const ERROR_TAXONOMY = Symbol.for('APP_ERROR_TAXONOMY');
 
export class DomainError extends Error {
  constructor(message, code) {
    super(message);
    this.name = 'DomainError';
    this[ERROR_TAXONOMY] = code;
  }
}
 
export function processBatchErrors(errors) {
  const combined = new AggregateError(errors, 'Batch operation encountered multiple errors');
  combined[ERROR_TAXONOMY] = 'BATCH_FAILURE';
  return combined;
}
 
export function ErrorInspector({ error }) {
  if (!error) return null;
 
  const taxonomyCode = error[ERROR_TAXONOMY] || 'UNKNOWN_ERROR';
  const subErrors = error instanceof AggregateError ? error.errors : [error];
 
  return (
    <div role="alert" data-taxonomy={taxonomyCode}>
      <h2>Error Classification: {String(taxonomyCode)}</h2>
      <ul>
        {subErrors.map((err, idx) => (
          <li key={idx}>{err.name}: {err.message}</li>
        ))}
      </ul>
    </div>
  );
}