fix: do not supress HMR errors

Author: theKashey

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,

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 }) => (
   <span style={inlineErrorStyle} role="img" aria-label="Rect-Hot-Loader Error">
-    ⚛️🔥🤕
+    ⚛️🔥🤕 ({component
+      ? getComponentDisplayName(component.constructor || component)
+      : 'Unknown location'})
   </span>
 )
 
-const mapError = ({ error, errorInfo }) => (
+const mapError = ({ error, errorInfo, component }) => (
   <div>
     <p style={{ color: 'red' }}>
+      {component && (
+        <span>
+          ({component
+            ? getComponentDisplayName(component.constructor || component)
+            : 'Unknown location'})
+        </span>
+      )}
       {error.toString ? error.toString() : error.message || 'undefined error'}
     </p>
     {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()
 }

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)
   }