How to display JS error from source map in DOM How to display JS error from source map in DOM reactjs reactjs

How to display JS error from source map in DOM


I think it can be done via AST (maybe as a babel plugin), you can explore it with AST explore.

If writing AST is too much, maybe redbox-react could help. It's a react component that accepts an error and displaying it in human friendly format on the screen.

import RedBox from 'redbox-react'const e = new Error('boom')const box = <RedBox error={e} />

An edit from the OP

Here is the actual code I ended up using to get the rendering of the errors in the Google bot rendering in the index.js file

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import RedBox from 'redbox-react'var errors = []window.addEventListener('error', function(e) {    errors.push(e)    const displayErrors = (      <ul>        {errors.map(e => {          return <li key={e.message}><RedBox error={e.error} /></li>        })}      </ul>    )    const app = errors.length > 0 ? displayErrors : <App />    ReactDOM.render(app, document.getElementById('root'));});