Expose component stack from reactTag to React Native renderer

This is not safe in general and therefore shouldn't be exposed to anything
other than React Native internals.

It will also need a different version in Fabric that will not have the
reactTag exposed.

Author: sebmarkbage

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -19,6 +19,8 @@ import ReactVersion from 'shared/ReactVersion';
 // Module provided by RN:
 import UIManager from 'UIManager';
 
+import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
+
 import NativeMethodsMixin from './NativeMethodsMixin';
 import ReactNativeBridgeEventPlugin from './ReactNativeBridgeEventPlugin';
 import ReactNativeComponent from './ReactNativeComponent';
@@ -35,6 +37,14 @@ injectFindHostInstance(ReactNativeFiberRenderer.findHostInstance);
 
 ReactGenericBatching.injection.injectRenderer(ReactNativeFiberRenderer);
 
+function computeComponentStackForErrorReporting(reactTag: number): string {
+  let fiber = ReactNativeComponentTree.getClosestInstanceFromNode(reactTag);
+  if (!fiber) {
+    return '';
+  }
+  return getStackAddendumByWorkInProgressFiber(fiber);
+}
+
 const roots = new Map();
 
 const ReactNativeRenderer: ReactNativeType = {
@@ -98,7 +108,8 @@ const ReactNativeRenderer: ReactNativeType = {
     ReactNativePropRegistry, // flattenStyle, Stylesheet
     TouchHistoryMath, // PanResponder
     createReactNativeComponentClass, // RCTText, RCTView, ReactNativeART
-    takeSnapshot, // react-native-implementation
+    takeSnapshot, // react-native-implementation,
+    computeComponentStackForErrorReporting,
   },
 };
 

packages/react-native-renderer/src/__tests__/ReactNativeError-test.internal.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactNative;
+let createReactNativeComponentClass;
+let computeComponentStackForErrorReporting;
+
+function normalizeCodeLocInfo(str) {
+  return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
+}
+
+describe('ReactNativeError', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNative = require('react-native-renderer');
+    createReactNativeComponentClass = require('../createReactNativeComponentClass')
+      .default;
+    computeComponentStackForErrorReporting =
+      ReactNative.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .computeComponentStackForErrorReporting;
+  });
+
+  it('should be able to extract a component stack from a native view', () => {
+    const View = createReactNativeComponentClass('View', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'View',
+    }));
+
+    const ref = React.createRef();
+
+    function FunctionalComponent(props) {
+      return props.children;
+    }
+
+    class ClassComponent extends React.Component {
+      render() {
+        return (
+          <FunctionalComponent>
+            <View foo="test" ref={ref} />
+          </FunctionalComponent>
+        );
+      }
+    }
+
+    ReactNative.render(<ClassComponent />, 1);
+
+    let reactTag = ReactNative.findNodeHandle(ref.current);
+
+    let componentStack = normalizeCodeLocInfo(
+      computeComponentStackForErrorReporting(reactTag),
+    );
+
+    if (__DEV__) {
+      expect(componentStack).toBe(
+        '\n' +
+          '    in View (at **)\n' +
+          '    in FunctionalComponent (at **)\n' +
+          '    in ClassComponent (at **)',
+      );
+    } else {
+      expect(componentStack).toBe(
+        '\n' +
+          '    in View\n' +
+          '    in FunctionalComponent\n' +
+          '    in ClassComponent',
+      );
+    }
+  });
+});