Enhancement: fetch and log complete description of minified react errors

[AyloSrd]

Explore possibility to get complete error message from react minified error code by fetching it from react website.
Eg.

Uncaught Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

[jayanth-kumar-morem]

Hi @AyloSrd ,
We can scrape the error message from the React error decoder page but cant directly extract it.

We can use this code snippet to scrape it.

const axios = require('axios');
const cheerio = require('cheerio');

async function getErrorMessage(minifiedErrorCode) {
  const url = `https://reactjs.org/docs/error-decoder.html?invariant=${minifiedErrorCode}`;
  const response = await axios.get(url);
  const $ = cheerio.load(response.data);
  const errorMessage = $('#error-message').text();
  return errorMessage;
}

(async () => {
  const errorCode = 300;
  const errorMessage = await getErrorMessage(errorCode);
  console.log(`Error #${errorCode}:`, errorMessage);
})();

Hope this helps.

[AyloSrd]

Hi @jayanth-kumar-morem ,

I apologize for overlooking your message; I somehow missed it and only just discovered it now.

You've pointed out something very important: the request will return an HTML page and not a JSON, contrary to what I initially thought. I was under the impression that it was just an API call returning some form of JSON with error information. I'm not even certain if CORS will allow such a call in the browser.

Thanks for the suggested implementation, which is very clear and complete; however, I don't believe it is possible to use Cheerio directly in the browser. I'll explore ways to parse the HTML directly on the client side (if CORS allows fetching). However, since this is turning out to be much more work than initially anticipated, I'm questioning whether it's worth it, given the value it will bring to the user.