もっと便利なエラーメッセージを表示するには？

Question

は私がundefinedアクセスしようとするたび+ ES6バベルは、次のエラーメッセージを吐くリアクト（例を。person.ageをしようとしているperson === undefined。）私はimportの文の入力を間違えた場合や、Iミスをしたときに

これがまた起こりますpropsオブジェクトを破棄します。たとえば、次のような間違いをする可能性があります。

const { name, age } = this.props.person 
// but `this.props.person` only has a `name` property. 

このようなエラーメッセージの欠落は苦痛です。私が設定することを忘れたいくつかのオプションがありますか？誰もこの問題にどのように対処していますか？

Answer 1

これは非常に要求されている機能であり、おそらく次のReactバージョンで実装される予定です。今のところはredbox-reactです。私が知る限り、react-transform-catch-errorsは推奨されません。

/* global __DEV__ */ 
import React from 'react' 
import { render } from 'react-dom' 
import App from './components/App' 

const root = document.getElementById('root') 

if (__DEV__) { 
    const RedBox = require('redbox-react').default 
    try { 
    render(<App />, root) 
    } catch (e) { 
    render(<RedBox error={e} />, root) 
    } 
} else { 
    render(<App />, root) 
} 

Answer 2

はい、これは迷惑です。役立つ1つの方法は、すべてのReactコンポーネントのレンダリングメソッドをtry/catchでラップすることです。実際のエラーを確認することができます。これをbabel.js-configに追加して、自動的に完了します：https://github.com/gaearon/react-transform-catch-errors。