Как отправить ошибку реагирования на сервер и зарегистрировать ее?

Question

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

В моем экспрессеСервер я регистрирую ошибки в файле, как этот (и он работает ^ _ ^):

app.get('/readers/:id', async (req, res, next) => {
    try {
        //do something
    } catch (err) {
        next(myError(err, 'error in  app.get(/readers/:id)')) //add my message to error.message and let express handle it at the bottom bloc of code
    }
})

// функция для добавления в error.message мой текст об ошибке

function myError(err, myMessage) {
    err.message = myMessage + '\r\n' + err.message
    return err
}

//обрабатывать все экспресс-ошибки

app.use(async (err, req, res, next) => {
    try {
        logError(err) //log error to file
        res.status(500).send('something wrong')
    } catch (err) {
        return console.log('error when logging: ' + err)
    }
})

// записывать любые ошибки в файл

async function logError(err) {
        fs.appendFile('./logs/error_log.txt', new Date() + '\r\n' + err.message + '\r\n' + err.stack + '\r\n\n', (e) => {
            if (e) console.log('error when logging ' + e.message + '\r\n\n' + e.stack)

            console.log('error logged ')
        });
    }

А теперь, где проблема.У нас есть ErrorBoundary, которая перехватывает ошибки и дает мне объект error, который является просто сообщением об ошибке и информацией, которая является стеком о том, где и с каким состоянием произошла ошибка.

export default class ErrorBoundary extends React.Component {
         constructor(props) {
                super(props)
                this.state = { hasError: false }
            }

            componentDidCatch(error, info) {

                this.setState({ hasError: true })
                sendErrorToExpressAndlogThere(error, info)
            }



            render() {
                if (this.state.hasError) {
                       //render some error for user
                }
                return this.props.children
            }
 }

как добавить информационный стек в объект ошибки iне понимаю

Я пытался добавить стек в error.message как строку, используя JSON.stringify (info), но получаю только эту первую строку, а не трассировку стека

также я не понимаю, как заставить объект реагировать на ошибку такого же формата, как я использую на сервере, чтобы не изменять функцию журнала

sendErrorToExpressAndlogThere(error, info) {
        error.message += ' Error in react boundary ' + info;

         fetch('/errorlog', {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            method: "POST",
            error: JSON.stringify(body)
        })
    }

Answer 1

Чтобы иметь возможность отправлять ошибки на сервер, как я обнаружил, у вас есть только один вариант - это отправлять error.stack и error.message отдельно, а затем регистрировать его на сервере с новой ошибкой ().

componentDidCatch(error, info) {
    this.reactError = error
    console.log(info)
    this.setState({ catchError: true })    
}


sendError() {
    fetch('/errorlog', {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        method: "POST",
        body: JSON.stringify({ message: this.props.type + ' - ' + this.props.error.message, stack: this.props.error.stack })
    })
}