Show full path for location of error

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -35,6 +35,7 @@ import {
 } from 'shared/ReactTypeOfWork';
 import {enableUserTimingAPI} from 'shared/ReactFeatureFlags';
 import getComponentName from 'shared/getComponentName';
+import parseStackInfo from 'shared/parseStackInfo';
 import invariant from 'fbjs/lib/invariant';
 import warning from 'fbjs/lib/warning';
 
@@ -973,7 +974,9 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
       // We might be in the commit phase when an error is captured.
       // 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 componentStack = parseStackInfo(
+        getStackAddendumByWorkInProgressFiber(failedWork),
+      );
       const componentName = getComponentName(failedWork);
 
       // Add to the collection of captured errors. This is stored as a global

packages/react/src/ReactElementValidator.js

@@ -13,6 +13,7 @@
  */
 
 import lowPriorityWarning from 'shared/lowPriorityWarning';
+import parseStackInfo from 'shared/parseStackInfo';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import getComponentName from 'shared/getComponentName';
 import checkPropTypes from 'prop-types/checkPropTypes';
@@ -83,7 +84,7 @@ function getSourceInfoErrorAddendum(elementProps) {
     elementProps.__source !== undefined
   ) {
     var source = elementProps.__source;
-    var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+    var fileName = source.fileName;
     var lineNumber = source.lineNumber;
     return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
   }
@@ -296,14 +297,14 @@ export function createElementWithValidation(type, props, children) {
     }
 
     info += getStackAddendum() || '';
-
+    const parsedInfo = parseStackInfo(info);
     warning(
       false,
       'React.createElement: type is invalid -- expected a string (for ' +
         'built-in components) or a class/function (for composite ' +
         'components) but got: %s.%s',
       type == null ? type : typeof type,
-      info,
+      parsedInfo,
     );
   }
 

packages/shared/describeComponentFrame.js

@@ -16,11 +16,7 @@ export default function(
     '\n    in ' +
     (name || 'Unknown') +
     (source
-      ? ' (at ' +
-        source.fileName.replace(/^.*[\\\/]/, '') +
-        ':' +
-        source.lineNumber +
-        ')'
+      ? ' (at ' + source.fileName + ':' + source.lineNumber + ')'
       : ownerName ? ' (created by ' + ownerName + ')' : '')
   );
 }

packages/shared/parseStackInfo.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+function commonSubstring(strings) {
+  const sorted = strings.sort();
+  const first = sorted[0];
+  const last = sorted[sorted.length - 1];
+  const diffIndex = Array.from(last).findIndex(
+    (char, index) => first[index] !== char,
+  );
+  return last.substring(0, diffIndex);
+}
+
+function parseStackInfo(info) {
+  const grepFilePathsMatches = info.match(/ \/.+:/g);
+  if (!grepFilePathsMatches || grepFilePathsMatches.length <= 1) {
+    return info;
+  }
+  const commonAncestorPath = commonSubstring(grepFilePathsMatches);
+  const commonAncestorPathRegex = new RegExp(commonAncestorPath, 'g');
+  return info.replace(commonAncestorPathRegex, ' ');
+}
+
+export default parseStackInfo;