Показать ошибки соответствующим образом для каждого компонента

Question

Я создал свою собственную глобальную обработку ошибок для приложения реагирования / избыточности, но я чувствую себя немного хакерской по этому поводу.

Моя проблема в том, что у пользователя может быть несколько компонентов с формами наэкран.Например, есть список с элементами, где вы можете удалить элементы, но если вы добавите новый, вы можете сделать это в модальном окне.В этом случае обе формы могут привести к ошибке вызова API.

Я видел реальные примеры с глобальным редуктором ошибок.Это нормально, но если я опубликую полученные ошибки здесь, как я узнаю, где их показывать?Произошло ли это в модале, или это была форма, стоящая за ним?

Мое решение состояло в том, чтобы поместить параметр «origin» в каждое действие, и в диспетчере он заполняется (Кстати, яиспользуя polyfill, чтобы он работал в большинстве браузеров): this.constructor.name

У меня есть такой редуктор, который может обрабатывать любые неудачные запросы:

case APPLICATION_ERROR: {
   const newState = _.cloneDeep(state);

   newState.errors = _.filter(newState.errors, error => error.origin !== action.payload.origin);
   newState.errors.push(action.payload);

   return newState;
}

С этим я смогсоздайте компонент ErrorMessageBar, который показывает только сообщения, отфильтрованные по его источнику в каждом компоненте.

Это работает, но мне не очень нравится передавать источник для каждого действия.У кого-нибудь есть реальный жизненный опыт или есть идеи, как с этим бороться?Или это нормально?

class ErrorMessageBar extends React.PureComponent<IComponentProps> {
    public render() {
        const {origin, errors} = this.props;
        const filteredErrors = _.filter(errors, error => error.origin === origin);

        if (filteredErrors.length > 0) {
            return (
                <MessageBar
                    messageBarType={MessageBarType.error}
                    isMultiline={true}
                >
                    {
                        filteredErrors.map(error => (error.message))
                    }
                </MessageBar>
            );
        } else {
            return <></>;
        }
    }
}