AggregateError Handling and Custom Stack Aggregation in React Error Boundaries

import React, { Component } from 'react';
 
export class GroupedErrorBoundary extends Component {
  state = { aggregatedErrors: null };
 
  componentDidCatch(error, errorInfo) {
    if (error instanceof AggregateError) {
      const traceMap = error.errors.map(err => ({
        message: err.message,
        stack: err.stack?.split('\n').slice(0, 3).join('\n')
      }));
      this.setState({ aggregatedErrors: traceMap });
    } else {
      this.setState({ aggregatedErrors: [{ message: error.message, stack: errorInfo.componentStack }] });
    }
  }
 
  render() {
    if (this.state.aggregatedErrors) {
      return <div>Errors caught: {this.state.aggregatedErrors.length}</div>;
    }
    return this.props.children;
  }
}