How to display JS error from source map in DOM

Question

I'm trying to debug my app created with create-react-app for the Google bot.

TL:DR: I need to add my error to the DOM so it's visible in the Google bot rendering. The problem is how do I get the same accurate (via source maps) file/line/column numbers that React displays in dev to be displayed in a DOM node.

On Google documentation for debugging rendering, they provide a snippet using a global window.addEventlistener('error') to add the error to the DOM so it's visible in the rendered screenshot that Google bot generates.

However, when I try this on development, I'm getting this as the first line of the stack trace : at Home.render (http://localhost:3000/static/js/main.chunk.js:17125:34)

So it's giving me the right function, but the source file and line/column numbers are wrong.

I'm able to see the correct error via the development error display that I assume is something from create-react-app

Notice that it gives the error in src/containers/Home/Home.js on line 70 compared to the DOM pre output.

Is there a way to get the same accurate result in my DOM pre output ?

Look like *this.props.foo* is undefined. Can you print it to console? Or start search problem from this.props — Vitalii, Jan 29 '19 at 11:54
Maybe I need to clarify the question, I'm not trying to solve this particular error, this code is there to produce the error. What I'm trying to do is display the same error as in the debug iframe but render it to my DOM so I can see it when Google bot tries and fails to render my page. — Geoffrey H, Jan 29 '19 at 11:57
I don't think it's something you can do in "browser land". I think you would need to create your own babel plugin using [AST](https://stackoverflow.com/questions/16127985/what-is-javascript-ast-how-to-play-with-it). not sure exactly how to do that but you can explore it via [AST explorer](https://astexplorer.net/) — Sagiv b.g, Jan 29 '19 at 12:05
I think the problem is that your js file is minified by webpack or something else and the google bot will print the error like other browser will do. Chrome uses the webpack sourcemap to show in the typescript file, which line is executing. Maybe use chrome to find out, where the error is, i think the google bot is a modified chromium fork, it will not interpret the things in a other way. — G.Vitelli, Jan 29 '19 at 12:05
@Sagivb.g Yes, AST seems to be what the debug of `create-react-app` must be using under the hood. However I wonder if there can't be an easier solution, a library maybe, that can take an error and source map and 'do the translation' @G.Vitelli Yes I understand the Google bot won't be able to do this, so I basically need to use my JS code to do the translation taking the error and source map file, then displaying this in the DOM — Geoffrey H, Jan 29 '19 at 12:16
@GeoffreyHug maybe [redbox-react](https://github.com/commissure/redbox-react) would help? — Sagiv b.g, Jan 29 '19 at 12:21
@Sagivb.g This looks like what I'm looking for, sadly I can't install it because of some permissions issues, even though I'm running `sudo` :/ I found another SO question that seems to be the missing piece : https://stackoverflow.com/questions/32642084/can-i-translate-a-stacktrace-from-minified-code-into-a-human-readable-stacktrace — Geoffrey H, Jan 29 '19 at 12:40
Well apparently my permissions error is not related to `redbox-react` but to `npm` and WSL — Geoffrey H, Jan 29 '19 at 12:50
@Sagivb.g I managed to solve my `npm` problem and it's working with `redbox-react`! I can now see the detailed and accurate errors on the Google bot rendering :D Feel free to post an answer so I can accept it — Geoffrey H, Jan 29 '19 at 13:30

Sagiv b.g · Accepted Answer · 2019-01-29T18:02:54.233

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'));

});

How to display JS error from source map in DOM

1 Answers1