Как отобразить ошибку JS из исходной карты в DOM - PullRequest
Новая
       5

Как отобразить ошибку JS из исходной карты в DOM

0 голосов
/ 29 января 2019

Я пытаюсь отладить мое приложение, созданное с помощью create-react-app для бота Google .

TL: DR: мне нужно добавить свою ошибку в DOM, чтобы она видна врендеринг бота Google.Проблема в том, как получить те же точные (через исходные карты) номера файлов / строк / столбцов, которые React отображает в dev для отображения в узле DOM.

Вкл. Документация Google для отладки рендеринга , они предоставляют фрагмент, использующий глобальный window.addEventlistener('error') для добавления ошибки в DOM, так что на визуализированном снимке экрана, который генерирует робот Google, видно.

Однако, когда я пробую это в разработке, яполучая это в качестве первой строки трассировки стека: at Home.render (http://localhost:3000/static/js/main.chunk.js:17125:34)

Так что это дает мне правильную функцию, но исходный файл и номера строк / столбцов неверны.

Я могучтобы увидеть правильную ошибку через отображение ошибки разработки, которое я предполагаю, является чем-то из create-react-app enter image description here

Обратите внимание, что это дает ошибку в src/containers/Home/Home.js в строке 70 по сравнению сПредварительный вывод DOM.

Есть ли способ получить такой же точный результат в моем предварительном выводе DOM?

1 Ответ

0 голосов
/ 29 января 2019

Я думаю, что это можно сделать с помощью AST (возможно, как плагин Babel), вы можете исследовать его с помощью AST explore .

Если написание AST слишкоммногое, может быть redbox-реакция может помочь.Это компонент реагирования, который принимает ошибку и отображает ее в удобном для человека формате на экране. 

import RedBox from 'redbox-react'

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

Правка из OP

Вот фактический код, который я использовал в итоге для получения ошибок рендеринга в боте Google в файле 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'));

});
...