Я пытаюсь создать обработчик ошибок, использующий реагирующий избыточный код с использованием глобального состояния.
последовательность кода:
- Вызовы компонентов Todo -> fetchTodoAPI [Action]
- fetchTodoAPI, если вызываются ошибки -> serverErrorHandler [Action]
- serverErrorHandler возвращает (hasError = true, Error = error_object) -> компонент todo
- компонент Todo проверяет, возвращен ли hasError = true -> Компонент ErrorRedirection
- ErrorRedirection устанавливает глобальное состояние и, в соответствии с ним, перерисовывается со страницей ошибки
Что я хочу сделать:
- Вызовы компонента Todo -> fetchTodoAPI [Action]
- fetchTodoAPI, если вызываются ошибки -> handleServerError [Action]
- serverErrorHandler устанавливает глобальное состояние напрямую и принудительно выполняет повторную визуализацию
код, представляющий компоненты:
компонент Todo:
componentDidMount() {
this.fetchTodos();
}
fetchTodos = async () => {
const response = await actions.fetchTodosList(this.state.activePage);
response.hasError ? this.setState({ hasError: response.hasError, error_object: response.error ,isPageLoading: false})
: this.setState({ todos: response.data.reviews, meta: response.data.meta, hasError: false, isPageLoading: false });
}
render() {
return (
{
this.state.hasError === true ? <ErrorRedirection error={this.state.error_object} />
:
метод fetchTodo:
const response = await axios.get(process.env.REACT_APP_DOMAIN_URL + url,
{ headers: headers, params: { page: pageNo } })
.then(response => response)
.catch(function (error) {
return actions.serverErrorHandler(error)
});
return response;
Метод serverErrorHandler: * 104 2 *
export const serverErrorHandler = async (error) => {
let error_object = {
error_code: null,
error_message: null,
error_info: "Something went wrong, please try again later",
AlertMsg: "Something went wrong, please try again later",
variant: "danger",
history: null,
redirect: true,
show: false,
button_text: "Go Back"
}
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
switch (error.response.status) {
case 401:
return await {
hasError: true, error:
actions.logout()
}
case 403:
...
error_object = {
...error_object,
error_code: null,
error_info: error.response,
show: true,
redirect: false
}
}
return ({ hasError: true, error: error_object })
};
Компонент ErrorRedirection подключен к Redux:
componentDidMount() {
this.props.onRoutingError(this.state.error)
}
const mapDispatchToProps = dispatch => {
return {
onRoutingError: (error) => dispatch(actions.error_handler(error))
};
};
export default withRouter(connect(null, mapDispatchToProps)(ErrorRedirection));
Действие обработчика ошибок, вызываемое ErrorRedirection:
export const error_handler = (error_object) => {
return {
type: actionTypes.ROUTING_ERROR,
error: {
error_code: error_object.error_code,
error_message: error_object.error_message,
error_info: error_object.error_info,
history: error_object.history,
AlertMsg: error_object.AlertMsg,
show: error_object.AlertMsg,
variant: error_object.variant,
button_text: error_object.button_text,
redirect: error_object.redirect
}
}
};
То, что я до сих пор пробовал:
1) Добавление метода отправки в возврате serverErrorHandler, но это не сработало 2) Попытка ожидания возврата при вызове обработчика ошибок, также не сработало
У кого-нибудь есть идеи?
Я пытаюсь сделать все свои компоненты полностью независимыми от мониторинга ошибок и отображать только те данные, которые они получают, без необходимости прослушивать флаг hasError
Примечание. Приведенный выше подход в настоящее время работает, но я работаю над его улучшением.
Спасибо