title: How to send react error to server and log it?
body: <p>I'm trying to send react errors that was catched by react ErrorBoundary or my own creacted errors to server and log them, but don't know how to do it right and simple.</p>
  
  <p>On my express server i log errors in file like this(and it's working ^_^):</p>
  
  <pre><code>app.get('/readers/:id', async (req, res, next) =&gt; {
      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
      }
  })
  </code></pre>
  
  <p>//function to add to error.message my text about error</p>
  
  <pre><code>function myError(err, myMessage) {
      err.message = myMessage + '\r\n' + err.message
      return err
  }
  </code></pre>
  
  <p>//handle all express errors</p>
  
  <pre><code>app.use(async (err, req, res, next) =&gt; {
      try {
          logError(err) //log error to file
          res.status(500).send('something wrong')
      } catch (err) {
          return console.log('error when logging: ' + err)
      }
  })
  </code></pre>
  
  <p>//log any arror to file</p>
  
  <pre><code>async function logError(err) {
          fs.appendFile('./logs/error_log.txt', new Date() + '\r\n' + err.message + '\r\n' + err.stack + '\r\n\n', (e) =&gt; {
              if (e) console.log('error when logging ' + e.message + '\r\n\n' + e.stack)
  
              console.log('error logged ')
          });
      }
  </code></pre>
  
  <p>And now where the problem lies. We have ErrorBoundary that cathes errors and give me error object that is just a message about error and info that is stack about where and with what state error happened.</p>
  
  <pre><code>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
              }
   }
  </code></pre>
  
  <p>how to add info stack to error object i don't understand</p>
  
  <p>i tryed to add stack to error.message like a string using JSON.stringify(info) 
  but i get with this only first line and not stack trace</p>
  
  <p><a href="https://i.stack.imgur.com/tUZDo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tUZDo.png" alt="enter image description here"></a></p>
  
  <p>also i don't understand how to make react error object same format like i use on server to not change log function</p>
  
  <pre><code>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)
          })
      }
  </code></pre>