Added :componentStackFrames property to error info object

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

@@ -15,9 +15,10 @@ class ErrorBoundary extends React.Component {
     shouldThrow: false,
     didThrow: false,
     error: null,
+    info: null,
   };
-  componentDidCatch(error) {
-    this.setState({error, didThrow: true});
+  componentDidCatch(error, info) {
+    this.setState({error, info, didThrow: true});
   }
   triggerError = () => {
     this.setState({
@@ -26,11 +27,21 @@ class ErrorBoundary extends React.Component {
   };
   render() {
     if (this.state.didThrow) {
-      if (this.state.error) {
-        return <p>Captured an error: {this.state.error.message}</p>;
-      } else {
-        return <p>Captured an error: {'' + this.state.error}</p>;
-      }
+      const errorSummary = this.state.error
+        ? <p>Captured an error: {this.state.error.message}</p>
+        : <p>Captured an error: {'' + this.state.error}</p>;
+
+      return (
+        <div>
+          {errorSummary}
+          <details>
+            <summary>Error info</summary>
+            <pre className="error-info">
+              {JSON.stringify(this.state.info, null, 2)}
+            </pre>
+          </details>
+        </div>
+      );
     }
     if (this.state.shouldThrow) {
       return <BadRender doThrow={this.props.doThrow} />;

fixtures/dom/src/style.css

@@ -24,6 +24,9 @@ button {
   padding: 5px;
 }
 
+details {
+  margin: 1rem 0;
+}
 
 .header {
   background: #222;
@@ -212,3 +215,13 @@ li {
   background-color: #f4f4f4;
   border-top: 1px solid #d9d9d9;
 }
+
+.error-info {
+  white-space: pre-wrap;
+  font-size: 12px;
+  max-height: 200px;
+  overflow: auto;
+  background: #eee;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}

src/renderers/__tests__/ReactErrorBoundaries-test.js

@@ -445,20 +445,24 @@ describe('ReactErrorBoundaries', () => {
     ErrorBoundary = class extends React.Component {
       constructor(props) {
         super(props);
-        this.state = {error: null};
+        this.state = {error: null, errorInfo: null};
         log.push(`${this.props.logName} constructor`);
       }
       render() {
         if (this.state.error && !this.props.forceRetry) {
           log.push(`${this.props.logName} render error`);
-          return this.props.renderError(this.state.error, this.props);
+          return this.props.renderError(
+            this.state.error,
+            this.state.errorInfo,
+            this.props,
+          );
         }
         log.push(`${this.props.logName} render success`);
         return <div>{this.props.children}</div>;
       }
-      componentDidCatch(error) {
+      componentDidCatch(error, errorInfo) {
         log.push(`${this.props.logName} componentDidCatch`);
-        this.setState({error});
+        this.setState({error, errorInfo});
       }
       componentWillMount() {
         log.push(`${this.props.logName} componentWillMount`);
@@ -481,7 +485,7 @@ describe('ReactErrorBoundaries', () => {
     };
     ErrorBoundary.defaultProps = {
       logName: 'ErrorBoundary',
-      renderError(error, props) {
+      renderError(error, errorInfo, props) {
         return (
           <div ref={props.errorMessageRef}>
             Caught an error: {error.message}.
@@ -2227,5 +2231,41 @@ describe('ReactErrorBoundaries', () => {
       // Error should be the first thrown
       expect(caughtError.message).toBe('child sad');
     });
+
+    it('passes an error info parameter with a :componentStack string', () => {
+      function renderError(error, errorInfo) {
+        return <div>{errorInfo.componentStack}</div>;
+      }
+
+      var container = document.createElement('div');
+      ReactDOM.render(
+        <ErrorBoundary renderError={renderError}>
+          <BrokenRender />
+        </ErrorBoundary>,
+        container,
+      );
+      expect(container.textContent).toContain('in BrokenRender');
+      expect(container.textContent).toContain('in ErrorBoundary');
+    });
+
+    it('passes an error info parameter with a :componentStackFrames array', () => {
+      function renderError(error, errorInfo) {
+        return (
+          <div>
+            {errorInfo.componentStackFrames.map(frame => frame.name).join(',')}
+          </div>
+        );
+      }
+
+      var container = document.createElement('div');
+      ReactDOM.render(
+        <ErrorBoundary renderError={renderError}>
+          <BrokenRender />
+        </ErrorBoundary>,
+        container,
+      );
+      expect(container.textContent).toContain('BrokenRender');
+      expect(container.textContent).toContain('ErrorBoundary');
+    });
   }
 });

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -17,10 +17,12 @@ import type {FiberRoot} from 'ReactFiberRoot';
 import type {HostConfig, Deadline} from 'ReactFiberReconciler';
 import type {PriorityLevel} from 'ReactPriorityLevel';
 import type {HydrationContext} from 'ReactFiberHydrationContext';
+import type {StackFrame} from 'ReactFiberComponentTreeHook';
 
 export type CapturedError = {
   componentName: ?string,
   componentStack: string,
+  componentStackFrames: Array<StackFrame>,
   error: mixed,
   errorBoundary: ?Object,
   errorBoundaryFound: boolean,
@@ -30,12 +32,14 @@ export type CapturedError = {
 
 export type HandleErrorInfo = {
   componentStack: string,
+  componentStackFrames: Array<StackFrame>,
 };
 
 var {popContextProvider} = require('ReactFiberContext');
 const {reset} = require('ReactFiberStack');
 var {
   getStackAddendumByWorkInProgressFiber,
+  getStackFramesByWorkInProgressFiber,
 } = require('ReactFiberComponentTreeHook');
 var {logCapturedError} = require('ReactFiberErrorLogger');
 var {
@@ -1181,6 +1185,9 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       // The risk is that the return path from this Fiber may not be accurate.
       // That risk is acceptable given the benefit of providing users more context.
       const componentStack = getStackAddendumByWorkInProgressFiber(failedWork);
+      const componentStackFrames = getStackFramesByWorkInProgressFiber(
+        failedWork,
+      );
       const componentName = getComponentName(failedWork);
 
       // Add to the collection of captured errors. This is stored as a global
@@ -1194,6 +1201,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       const capturedError = {
         componentName,
         componentStack,
+        componentStackFrames,
         error,
         errorBoundary: errorBoundaryFound ? boundary.stateNode : null,
         errorBoundaryFound,
@@ -1279,6 +1287,7 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
 
         const info: HandleErrorInfo = {
           componentStack: capturedError.componentStack,
+          componentStackFrames: capturedError.componentStackFrames,
         };
 
         // Allow the boundary to handle the error, usually by scheduling

src/shared/ReactFiberComponentTreeHook.js

@@ -22,18 +22,45 @@ var {
 var describeComponentFrame = require('describeComponentFrame');
 var getComponentName = require('getComponentName');
 
+import type {Source} from 'ReactElementType';
 import type {Fiber} from 'ReactFiber';
 
+export type StackFrame = {
+  name: string | null,
+  source: Source | null,
+};
+
+function createStackFrame(fiber: Fiber): StackFrame {
+  switch (fiber.tag) {
+    case IndeterminateComponent:
+    case FunctionalComponent:
+    case ClassComponent:
+    case HostComponent:
+      const name = getComponentName(fiber);
+      const source = fiber._debugSource;
+
+      return {
+        name,
+        source: source != null ? source : null,
+      };
+    default:
+      return {
+        name: null,
+        source: null,
+      };
+  }
+}
+
 function describeFiber(fiber: Fiber): string {
   switch (fiber.tag) {
     case IndeterminateComponent:
     case FunctionalComponent:
     case ClassComponent:
     case HostComponent:
-      var owner = fiber._debugOwner;
-      var source = fiber._debugSource;
-      var name = getComponentName(fiber);
-      var ownerName = null;
+      const owner = fiber._debugOwner;
+      const source = fiber._debugSource;
+      const name = getComponentName(fiber);
+      let ownerName = null;
       if (owner) {
         ownerName = getComponentName(owner);
       }
@@ -47,8 +74,8 @@ function describeFiber(fiber: Fiber): string {
 // only during begin or complete phase. Do not call it under any other
 // circumstances.
 function getStackAddendumByWorkInProgressFiber(workInProgress: Fiber): string {
-  var info = '';
-  var node = workInProgress;
+  let info = '';
+  let node = workInProgress;
   do {
     info += describeFiber(node);
     // Otherwise this return pointer might point to the wrong tree:
@@ -57,6 +84,23 @@ function getStackAddendumByWorkInProgressFiber(workInProgress: Fiber): string {
   return info;
 }
 
+// This function can only be called with a work-in-progress fiber and
+// only during begin or complete phase. Do not call it under any other
+// circumstances.
+function getStackFramesByWorkInProgressFiber(
+  workInProgress: Fiber,
+): Array<StackFrame> {
+  const stackFrames = [];
+  let node = workInProgress;
+  do {
+    stackFrames.push(createStackFrame(node));
+    // Otherwise this return pointer might point to the wrong tree:
+    node = node.return;
+  } while (node);
+  return stackFrames;
+}
+
 module.exports = {
   getStackAddendumByWorkInProgressFiber,
+  getStackFramesByWorkInProgressFiber,
 };