0

I often see repeatable errors in my console that I'd like to programmatically respond to but I can't figure out how to access and parse them in my React application. In certain situations when the source of the error is known, I know error boundaries or try/catch blocks can work. There are many situations where I have no idea where the error originates from though, so I don't know what code to wrap in an error boundary.

As one specific example, I often see this SSL related networking error in my console: NET::ERR_CERT_AUTHORITY_INVALID.

When that error appears, I want to popup instructions to the user on our working fix. It's not clear exactly what code is generating that log though, so I'd like to simply detect when it pops up in the log and respond. Is this possible and is there a better approach?

Edit: Here's an example where I attempt a simple axios fetch to a site with a known network problem. In this case the error has no information about what the error is, yet in the console.log I can clearly see the error was ERR_CERT_AUTHORITY_INVALID. Is there no way for me to just retrieve that error message from the console?

const fetch = async () => {
    try {
      const response = await axios.get('https://self-signed.badssl.com/');
      console.log(response);
    } catch (error) {
      if (axios.isAxiosError(error)) {
        console.log(error.toJSON());
        return error.message;
      } else {
        console.log('unexpected error: ', error);
        return 'An unexpected error occurred';
      }
};

Image of resulting console log.

1

Here's a codesandbox with the above code in a basic react application. Codesandbox doesn't show the error though so it needs to be run locally so google chrome dev tools can be used to see the error.
https://codesandbox.io/s/silly-babbage-jl11wb?file=/src/App.js

vimuth
  • 5,064
  • 33
  • 79
  • 116
Alex Colbourn
  • 1
  • 2
  • 1
    It seems like you're trying to do this in a roundabout way. If you're seeing errors in the console, then some function is returning an error. You should be catching this error within the code itself. In your example, it seems like some HTTP request is failing due to an SSL error. This HTTP request should be wrapped in a `try/catch`, then you can take action on the error in the `catch`. The error in the console should tell you which file the error occurred in and which line, this should point you to the problematic code. – Jaxon Crosmas Aug 04 '22 at 17:36
  • Hey Jaxon, I added a simple example where I recreated the problem. In that example you can see that I can catch the error in a try/catch, but the error itself doesn't contain the type of error. When I look at the console.log however, the error is clearly printed right below but I can't access it. – Alex Colbourn Aug 04 '22 at 19:49
  • if you not have fear you could overwrite console.log xD "console.log = alert ;" – r043v Aug 04 '22 at 19:51
  • https://stackoverflow.com/questions/9216441/intercept-calls-to-console-log-in-chrome – r043v Aug 04 '22 at 19:58
  • What do you mean? Once you caught the error, you can access its properties and get as much information as you can from the browser's console. Check out the error object's properties: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#instance_properties – Pharoah Jardin Aug 04 '22 at 20:27
  • Hey Pharoah, so it almost appears as if there are 2 completely separate errors. I can access the error in the try/catch block from axios and dig into the error properties but in this case the error messages are vague and just say "Network Error". Then right below it I see the more specific error that I want (NET::ERR_CERT_AUTHORITY_INVALID) but I can't access it from my code. It seems maybe chrome developer tools puts its own error message that isn't caught in the try/catch block??? Thanks r043v for the post about intercepting all console logs, I will attempt that next. – Alex Colbourn Aug 04 '22 at 23:13
  • As best as I can tell, the browser strips out all detailed error information from the error object for privacy reasons. Chrome displays the actual network error such as a bad SSL certificate in the debug window, but it is not available to the website. Even if you intercept the console.log messages, errors like this will be omitted. So to answer my own question, I believe some errors such as specific network errors just simply can't be caught programmatically. – Alex Colbourn Aug 10 '22 at 22:29

0 Answers0