더 유용한 오류 메시지를 얻는 방법?

내가 undefined에 액세스하려고 할 때마다 + ES6 바벨 다음과 같은 오류 메시지가 뱉어 반작용 (예를. person.age을 시도하는 경우 person === undefined.) 내가 import 문을 잘못 입력하거나 때 실수를 할 때더 유용한 오류 메시지를 얻는 방법?

이 또한 발생 props 개체를 파괴합니다. 예를 들어, 다음과 같은 실수를 할 수 있습니다.

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

이러한 오류 메시지 부족은 고통스런 일입니다. 내가 놓칠 수없는 몇 가지 옵션이 있습니까? 모두가이 문제에 어떻게 대처하고 있습니까?

출처

2016-07-10 Maximus S

이것은 매우 요청되는 기능이며 다음 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) 
}

출처

2016-07-10 13:05:52

'반응 --변환 캐치 errors' 모두 찬성되지 않습니다'- redbox'를 반응 것으로 보인다'- 반응 핫 loader',하지만, 난 여전히 react-'적용한 후 비우호적 인 오류를 얻을 수 hot-loader' –

redbox-react는 완벽하게 작동합니다. webpack config에'output.devtoolModuleFilenameTemplate = '/ [resource-path]'를 추가하십시오. https://github.com/KeywordBrain/redbox-react#sourcemaps-with-webpack –

네, 귀찮습니다. 도움이되는 한 가지 방법은 모든 React-component의 render-method를 try/catch로 래핑하는 것입니다. 그러면 React가 제공 한 횡설수설이 아니라 실제 오류를 볼 수 있습니다. 이것을 babel.js-config에 추가하면 자동으로 완료됩니다 : https://github.com/gaearon/react-transform-catch-errors.

출처

2016-07-10 10:19:19 TN1ck

더 유용한 오류 메시지를 얻는 방법?

답변

관련 문제