javascript - 如何在 DOM 中显示 source map 的 JS 错误

Question

我正在尝试调试使用 create-react-app 为 Google bot 创建的应用。

TL:DR:我需要将我的错误添加到 DOM 中，以便它在 Google 机器人渲染中可见。问题是我如何获得 React 在开发中显示的准确(通过源映射)文件/行/列号以显示在 DOM 节点中。

关于 Google documentation for debugging rendering ，他们提供了一个使用全局 window.addEventlistener('error') 的片段，将错误添加到 DOM，以便它在 Google bot 生成的渲染屏幕截图中可见。

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

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

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

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

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

Answer 1

我认为可以通过 AST 来完成(也许作为一个 babel 插件)，你可以用 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'));

});