fix: warn about errors #814

Swallow the error during the hot-render phase.
gaearon · Jan 22, 2018 · d179afe · d179afe
2 parents e84d634 + e1d99f5
commit d179afe
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/packages/react-hot-loader/src/reconciler/hotReplacementRender.js b/packages/react-hot-loader/src/reconciler/hotReplacementRender.js
@@ -260,6 +260,8 @@ export default (instance, stack) => {
     // disable reconciler to prevent upcoming components from proxying.
     reactHotLoader.disableProxyCreation = true
     hotReplacementRender(instance, stack)
+  } catch (e) {
+    logger.warn('React-hot-loader: reconcilation failed due to error', e)
   } finally {
     reactHotLoader.disableProxyCreation = false
   }

diff --git a/packages/react-hot-loader/test/reconciler.test.js b/packages/react-hot-loader/test/reconciler.test.js
@@ -4,6 +4,10 @@ import '../src/patch.dev'
 import AppContainer from '../src/AppContainer.dev'
 import { increment as incrementGeneration } from '../src/global/generation'
 import { areComponentsEqual } from '../src/utils.dev'
+import logger from '../src/logger'
+import reactHotLoader from '../src/reactHotLoader'
+
+jest.mock('../src/logger')
 
 const spyComponent = (render, displayName, key) => {
   const mounted = jest.fn()
@@ -27,6 +31,7 @@ const spyComponent = (render, displayName, key) => {
     __reactstandin__regenerateByEval(key, code) {
       this[key] = eval(code)
     }
+
     /* eslint-enable */
 
     render() {
@@ -225,5 +230,36 @@ describe('reconciler', () => {
       expect(second.mounted).toHaveBeenCalledTimes(0)
       expect(wrapper.text()).toContain(43)
     })
+
+    it('should handle error on render', () => {
+      const App = () => <div>Normal application</div>
+      reactHotLoader.register(App, 'App', 'test.js')
+
+      const TestCase = props => (
+        <AppContainer>
+          <App {...props} />
+        </AppContainer>
+      )
+
+      const wrapper = mount(<TestCase />)
+
+      {
+        const App = ({ update = '42' }) => (
+          <div>
+            Normal application{' '}
+            <span>{update ? update.not.existing : '42'}</span>
+          </div>
+        )
+        reactHotLoader.register(App, 'App', 'test.js')
+
+        expect(() => wrapper.setProps({ children: <App /> })).toThrow()
+        expect(reactHotLoader.disableProxyCreation).toBe(false)
+      }
+
+      expect(logger.warn).toHaveBeenCalledWith(
+        `React-hot-loader: reconcilation failed due to error`,
+        expect.any(Error),
+      )
+    })
   })
 })