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

Question

我正在尝试调试使用 create-react-app 为 Google 机器人.

创建的应用程序

TL:DR: 我需要将我的错误添加到 DOM 以便它在 Google 机器人渲染中可见。问题是我如何获得 React 在 dev 中显示的相同准确度（通过源映射）file/line/column 数字以显示在 DOM 节点中。

在 Google documentation for debugging rendering 上，他们提供了一个使用全局 window.addEventlistener('error') 将错误添加到 DOM 的片段，因此它在 Google 机器人生成的渲染屏幕截图中可见.

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

所以它给了我正确的功能，但是源文件和 line/column 数字是错误的。

我可以通过开发错误显示看到正确的错误，我认为这是来自 create-react-app

注意它给出了第 70 行 src/containers/Home/Home.js 中的错误与 DOM 预输出相比。

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

Answer 1

我认为可以通过 AST (maybe as a babel plugin), you can explore it with AST explore 来完成。

如果写 AST 太多了，也许 redbox-react 会有所帮助。它是一个 React 组件，可以接受错误并将其以人性化的格式显示在屏幕上。

import RedBox from 'redbox-react'

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

来自 OP 的编辑

这是我最终用来获取 index.js 文件

中的 Google 机器人渲染中的错误渲染的实际代码

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

});

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

How to display JS error from source map in DOM

javascript

source-maps

reactjs