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

【问题标题】：How to display JS error from source map in DOM如何在 DOM 中显示来自源映射的 JS 错误
【发布时间】：2019-06-22 13:03:21
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

看起来 this.props.foo 是未定义的。您可以将其打印到控制台吗？或者从this.props开始搜索问题
也许我需要澄清这个问题，我并不是要解决这个特定的错误，这个代码是用来产生错误的。我正在尝试做的是显示与调试 iframe 中相同的错误，但将其呈现到我的 DOM，以便在 Google bot 尝试呈现我的页面但未能呈现我的页面时我可以看到它。
try{/*...*/}catch(e){ console.log(e.stack) } 怎么样？
我不认为这是你可以在“浏览器领域”中做的事情。我认为您需要使用AST 创建自己的 babel 插件。不知道具体怎么做，但您可以通过AST explorer 进行探索
@Sagivb.g 我设法解决了我的npm 问题，它正在与redbox-react 一起工作！我现在可以在 Google bot 渲染中看到详细而准确的错误：D 随时发布答案，以便我接受它

标签： javascript reactjs source-maps

【解决方案1】：

我认为可以通过AST（可能作为一个babel插件）来完成，你可以通过AST explore探索它。

如果写 AST 太多，也许redbox-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'));

});

【讨论】：