Почему не отрабатывает componentDidCatch?

Question

[Виктор]

Сделал компонент ErrorBoundary которым обернул приложение

import React, { Component } from 'react'

class ErrorBoundary extends Component {
    state = {
        hasError: false
    }

    componentDidCatch(error, info) {
        console.log(error)
        console.log(info)
        this.setState({
            hasError: true
        })
    }

    render () {
        if(this.state.hasError) {
            return <h1>Какая-то ошибка</h1>
        }
        return this.props.children
    }
}

export default ErrorBoundary

При монтировании одного из компонентов идет запрос на сервер

export const postVolonteerList = async (page = 1, perPage = 10, filters) => {
    try {
        let res = await instance
            .get(
                `/api/voluinteers`,
                {
                    params: {
                        page: page,
                        page_size: perPage,
                        ...filters
                    }
                });
        return res.data
    }catch(err){
        console.log('ОШИБКА', err.message);
        throw err
    }
};

Я умышленно сделал неверный запрос и в catch выбрасываю ошибку, однако ErrorBoundary не отлавливает ее. В чем может быть причина

Answer 1

[Павел Диденко]

componentDidCatch срабатывает при ошибке возникшей при рендере, либо при ошибке работы с состоянием

Comments

[Виктор]

Так я делал throw new Error(error) приложение все равно крашилось

[Павел Диденко]

Виктор, это не ошибка, возникшая при рендере, или при работе с состоянием. Попробуйте в рендер функции достать что-нибудь из undefined. Он сработает

[Виктор]

ок, понял, спасибо огромное