Merge pull request gaearon#494 from gaearon/no-redbox

Remove redbox

docs/TipsAndTricks.md

@@ -2,22 +2,19 @@
 
 **How to get an error in your console too:**
 
-The `Redbox` errors are great to clearly see rendering issues, and avoiding an uncaught error from breaking your app.  But there are some advantages to a thrown error in the console too, like filename resolution via sourcemaps, and click-to-open.  To get the best of both worlds, modify your app entry point as follows:
+The previously used `Redbox` for React Hot Loader has known limitations due to sourcemaps and it's no longer a default catcher. Errors are great to clearly see rendering issues, and avoiding an uncaught error from breaking your app. But there are some advantages to a thrown error in the console too, like filename resolution via sourcemaps, and click-to-open. To get the `Redbox` back, and have the best of both worlds, modify your app entry point as follows:
 
 ```jsx
 import Redbox from 'redbox-react';
 
-const consoleErrorReporter = ({error}) => {
-  console.error(error);
-  return <Redbox error={error} />;
-};
+const CustomErrorReporter = ({ error }) => <Redbox error={ error } />;
 
-consoleErrorReporter.propTypes = {
+CustomErrorReporter.propTypes = {
   error: React.PropTypes.instanceOf(Error).isRequired
 };
 
 render((
-  <AppContainer errorReporter={consoleErrorReporter}>
+  <AppContainer errorReporter={ CustomErrorReporter }>
     <AppRoot />
   </AppContainer>
 ), document.getElementById('react-root'));

src/AppContainer.dev.js

@@ -1,6 +1,5 @@
 const React = require('react')
 const deepForceUpdate = require('react-deep-force-update')
-const Redbox = require('redbox-react').default
 
 const { Component } = React
 
@@ -53,8 +52,12 @@ class AppContainer extends Component {
 
   render() {
     const { error } = this.state
-    if (error) {
+
+    if (this.props.errorReporter && error) {
+      console.error(error)
       return <this.props.errorReporter error={error} />
+    } else if (error) {
+      console.error(error)
     }
 
     return React.Children.only(this.props.children)
@@ -72,10 +75,10 @@ AppContainer.propTypes = {
 
     return undefined
   },
-}
-
-AppContainer.defaultProps = {
-  errorReporter: Redbox,
+  errorReporter: React.PropTypes.oneOfType([
+    React.PropTypes.node,
+    React.PropTypes.func,
+  ]),
 }
 
 module.exports = AppContainer

test/AppContainer.dev.test.js

@@ -1,6 +1,6 @@
 import '../src/patch.dev'
 import React, { Component } from 'react'
-import { mount, shallow } from 'enzyme'
+import { mount } from 'enzyme'
 import { mapProps } from 'recompose'
 
 import AppContainer from '../src/AppContainer.dev'
@@ -1228,19 +1228,6 @@ function runAllTests(useWeakMap) {
         expect(wrapper.text()).toBe('new render + old state + 20')
       })
     })
-
-    describe('should use Redbox as the default errorReporter', () => {
-      const wrapper = shallow(
-        <AppContainer>
-          <div>hey</div>
-        </AppContainer>,
-      )
-      const error = new Error('Something is wrong!')
-      wrapper.setState({ error })
-      const errorReporter = wrapper.find('RedBox')
-      expect(errorReporter.length).toBe(1)
-      expect(errorReporter.prop('error')).toBe(error)
-    })
   })
 }