如何在DOM中显示源映射中的JS错误

Question

我正在尝试调试我create-react-app为谷歌机器人创建的应用程序.

TL:DR:我需要将我的错误添加到DOM中,以便在Google bot渲染中可见.问题是如何获得React在dev中显示的文件/行/列号相同的准确(通过源映射)以显示在DOM节点中.

在用于调试渲染的Google文档中,他们提供了一个使用全局的片段window.addEventlistener('error'),将错误添加到DOM,以便在Google bot生成的渲染屏幕截图中显示.

但是,当我在开发时尝试这个时,我将其作为堆栈跟踪的第一行: at Home.render (http://localhost:3000/static/js/main.chunk.js:17125:34)

所以它给了我正确的功能,但源文件和行/列号是错误的.

通过开发错误显示,我能够看到正确的错误 create-react-app

请注意,src/containers/Home/Home.js与DOM预输出相比,它在第70行给出了错误.

有没有办法在我的DOM预输出中获得相同的准确结果？

Answer 1

我认为这可以通过AST（也许作为 babel 插件）来完成，你可以使用AST explore来探索它。

如果编写 AST 太多，也许redbox-react可以提供帮助。它是一个反应组件，它接受错误并以人类友好的格式在屏幕上显示它。

import RedBox from 'redbox-react'

const e = new Error('boom')
const box = <RedBox error={e} />

OP 的编辑

这是我最终用来获取文件中 Google bot 渲染中的错误的渲染的实际index.js代码

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

});