Use a custom error object in place of cross-origin errors

Cross-origin errors aren't accessible by React in DEV mode because we
catch errors using a global error handler, in order to preserve the
"Pause on exceptions" behavior of the DevTools. When this happens, we
should use a custom error object that explains what happened.

For uncaught errors, the actual error message is logged to the console
by the browser, so React should skip logging the message again.

Author: acdlite

fixtures/dom/src/components/fixtures/error-handling/index.js

@@ -26,9 +26,9 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.didThrow) {
       if (this.state.error) {
-        return `Captured an error: ${this.state.error.message}`;
+        return <p>Captured an error: {this.state.error.message}</p>;
       } else {
-        return `Captured an error: ${this.state.error}`;
+        return <p>Captured an error: {'' + this.state.error}</p>;
       }
     }
     if (this.state.shouldThrow) {
@@ -45,12 +45,12 @@ class Example extends React.Component {
   render() {
     return (
       <div>
+        <button onClick={this.restart}>Reset</button>
         <ErrorBoundary
           buttonText={this.props.buttonText}
           throws={this.props.throws}
           key={this.state.key}
         />
-        <button onClick={this.restart}>Reset</button>
       </div>
     );
   }
@@ -93,7 +93,7 @@ export default class ErrorHandlingTestCases extends React.Component {
           </TestCase.ExpectedResult>
           <Example
             throws={() => {
-              throw null;
+              throw null; // eslint-disable-line no-throw-literal
             }}
           />
         </TestCase>
@@ -106,7 +106,7 @@ export default class ErrorHandlingTestCases extends React.Component {
           </TestCase.Steps>
           <TestCase.ExpectedResult>
             The "Trigger error" button should be replaced with "Captured an
-            error: (TODO: custom error text)". The actual error message should
+            error: A cross-origin error was thrown [...]". The actual error message should
             be logged to the console: "Uncaught Error: Expected true to
             be false".
           </TestCase.ExpectedResult>

src/renderers/shared/fiber/ReactFiberErrorLogger.js

@@ -59,6 +59,7 @@ function logCapturedError(capturedError: CapturedError): void {
       errorBoundaryName,
       errorBoundaryFound,
       willRetry,
+      shouldIgnoreErrorMessage,
     } = capturedError;
 
     const errorSummary = message ? `${name}: ${message}` : name;
@@ -99,12 +100,15 @@ function logCapturedError(capturedError: CapturedError): void {
         'See https://fb.me/react-error-boundaries for more information.';
     }
 
-    console.error(
-      `${componentNameMessage} You should fix this error in your code. ${errorBoundaryMessage}\n\n` +
-        `${errorSummary}\n\n` +
-        `The error is located at: ${componentStack}\n\n` +
-        `The error was thrown at: ${formattedCallStack}`,
-    );
+    let combinedMessage = `${componentNameMessage} You should fix this error in your code. ${errorBoundaryMessage}\n\n`;
+    if (!shouldIgnoreErrorMessage) {
+      combinedMessage += `${errorSummary}\n\n`;
+    }
+    combinedMessage +=
+      `The error is located at: ${componentStack}\n\n` +
+      `The error was thrown at: ${formattedCallStack}`;
+
+    console.error(combinedMessage);
   } else {
     console.error(
       `React caught an error thrown by one of your components.\n\n${error.stack}`,

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -26,6 +26,7 @@ export type CapturedError = {
   errorBoundaryFound: boolean,
   errorBoundaryName: string | null,
   willRetry: boolean,
+  shouldIgnoreErrorMessage: boolean,
 };
 
 export type HandleErrorInfo = {
@@ -1188,15 +1189,32 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       if (capturedErrors === null) {
         capturedErrors = new Map();
       }
-      capturedErrors.set(boundary, {
-        componentName,
-        componentStack,
-        error,
-        errorBoundary: errorBoundaryFound ? boundary.stateNode : null,
-        errorBoundaryFound,
-        errorBoundaryName,
-        willRetry,
-      });
+
+      if (__DEV__) {
+        capturedErrors.set(boundary, {
+          componentName,
+          componentStack,
+          error,
+          errorBoundary: errorBoundaryFound ? boundary.stateNode : null,
+          errorBoundaryFound,
+          errorBoundaryName,
+          willRetry,
+          shouldIgnoreErrorMessage: error != null &&
+            typeof error.__reactShouldIgnoreErrorMessage === 'boolean' &&
+            error.__reactShouldIgnoreErrorMessage,
+        });
+      } else {
+        capturedErrors.set(boundary, {
+          componentName,
+          componentStack,
+          error,
+          errorBoundary: errorBoundaryFound ? boundary.stateNode : null,
+          errorBoundaryFound,
+          errorBoundaryName,
+          willRetry,
+          shouldIgnoreErrorMessage: false,
+        });
+      }
 
       // If we're in the commit phase, defer scheduling an update on the
       // boundary until after the commit is complete

src/renderers/shared/utils/ReactErrorUtils.js

@@ -208,10 +208,14 @@ if (__DEV__) {
       let error;
       // Use this to track whether the error event is ever called.
       let didSetError = false;
+      let isCrossOriginError = false;
 
       function onError(event) {
         error = event.error;
         didSetError = true;
+        if (error === null && event.colno === 0 && event.lineno === 0) {
+          isCrossOriginError = true;
+        }
       }
 
       // Create a fake event type.
@@ -240,6 +244,17 @@ if (__DEV__) {
               'or switching to a modern browser. If you suspect that this is ' +
               'actually an issue with React, please file an issue.',
           );
+        } else if (isCrossOriginError) {
+          error = new Error(
+            "A cross-origin error was thrown. React doesn't have access to " +
+              'the actual error because it catches errors using a global ' +
+              'error handler, in order to preserve the "Pause on exceptions" ' +
+              'behavior of the DevTools. This is only an issue in DEV-mode; ' +
+              'in production, React uses a normal try-catch statement.\n\n' +
+              "It's recommended to serve JavaScript files from the same " +
+              'origin as your application.',
+          );
+          (error: any).__reactShouldIgnoreErrorMessage = true;
         }
         ReactErrorUtils._hasCaughtError = true;
         ReactErrorUtils._caughtError = error;