diff --git a/src/AppContainer.dev.js b/src/AppContainer.dev.js index 6a58ef0c7..884cdd2ec 100644 --- a/src/AppContainer.dev.js +++ b/src/AppContainer.dev.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import defaultPolyfill, { polyfill } from 'react-lifecycles-compat' import logger from './logger' -import { get as getGeneration } from './global/generation' +import { get as getGeneration, hotComparisonOpen } from './global/generation' import configuration from './configuration' import { EmptyErrorPlaceholder, logException } from './errorReporter' @@ -38,9 +38,14 @@ class AppContainer extends React.Component { componentDidCatch(error, errorInfo) { logger.error(error) + + if (!hotComparisonOpen()) { + // do not log error outside of HMR cycle + return + } const { errorReporter = configuration.errorReporter } = this.props if (!errorReporter) { - logException(error, errorInfo) + logException(error, errorInfo, this) } this.setState({ error, diff --git a/src/errorReporter.js b/src/errorReporter.js index 8cea3be46..660805b42 100644 --- a/src/errorReporter.js +++ b/src/errorReporter.js @@ -6,6 +6,7 @@ import React from 'react' import ReactDom from 'react-dom' import configuration from './configuration' +import { getComponentDisplayName } from './internal/reactUtils' let lastError = [] @@ -33,15 +34,24 @@ const inlineErrorStyle = { const listStyle = {} -export const EmptyErrorPlaceholder = () => ( +export const EmptyErrorPlaceholder = ({ component }) => ( - ⚛️🔥🤕 + ⚛️🔥🤕 ({component + ? getComponentDisplayName(component.constructor || component) + : 'Unknown location'}) ) -const mapError = ({ error, errorInfo }) => ( +const mapError = ({ error, errorInfo, component }) => (

+ {component && ( + + ({component + ? getComponentDisplayName(component.constructor || component) + : 'Unknown location'}) + + )} {error.toString ? error.toString() : error.message || 'undefined error'}

{errorInfo && errorInfo.componentStack ? ( @@ -129,7 +139,13 @@ export const clearExceptions = () => { } } -export const logException = (error, errorInfo) => { - lastError.push({ error, errorInfo }) +export const logException = (error, errorInfo, component) => { + // do not suppress error + + /* eslint-disable no-console */ + console.error(error) + /* eslint-enable */ + + lastError.push({ error, errorInfo, component }) initErrorOverlay() } diff --git a/src/reconciler/proxyAdapter.js b/src/reconciler/proxyAdapter.js index aa92a4349..9daab74eb 100644 --- a/src/reconciler/proxyAdapter.js +++ b/src/reconciler/proxyAdapter.js @@ -88,7 +88,7 @@ function componentRender() { if (error && generation === getGeneration()) { return React.createElement( configuration.errorReporter || EmptyErrorPlaceholder, - { error, errorInfo }, + { error, errorInfo, component: this }, ) } try { @@ -99,7 +99,7 @@ function componentRender() { generation: getGeneration(), } if (!configuration.errorReporter) { - logException(renderError) + logException(renderError, undefined, this) } return componentRender.call(this) }