Trim path if it's absolute

Author: Timer

packages/react-error-overlay/src/components/frame.js

@@ -127,13 +127,12 @@ function createFrame(
   lastElement: boolean
 ) {
   const { compiled } = frameSetting;
-  let { functionName } = frame;
+  let { functionName, _originalFileName: sourceFileName } = frame;
   const {
     fileName,
     lineNumber,
     columnNumber,
     _scriptCode: scriptLines,
-    _originalFileName: sourceFileName,
     _originalLineNumber: sourceLineNumber,
     _originalColumnNumber: sourceColumnNumber,
     _originalScriptCode: sourceLines,
@@ -149,6 +148,10 @@ function createFrame(
 
   let url;
   if (!compiled && sourceFileName && sourceLineNumber) {
+    // Remove everything up to the first /src/
+    const trimMatch = /.*?[/|\\](src[/|\\].*)/.exec(sourceFileName);
+    if (trimMatch && trimMatch[1]) sourceFileName = trimMatch[1];
+
     url = sourceFileName + ':' + sourceLineNumber;
     if (sourceColumnNumber) {
       url += ':' + sourceColumnNumber;

packages/react-scripts/template/src/App.js

@@ -2,13 +2,28 @@ import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import Bad from './fold/Bad';
+
 class App extends Component {
   render() {
     return (
       <div className="App">
         <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
+          <div>
+            <div>
+              <div>
+                <div>
+                  <div>
+                    <div>
+                      <img src={logo} className="App-logo" alt="logo" />
+                      <Bad>Welcome to React</Bad>
+                      {[1, 2, 3].map(s => <span>{s}</span>)}
+                    </div>{' '}
+                  </div>{' '}
+                </div>{' '}
+              </div>{' '}
+            </div>{' '}
+          </div>
         </div>
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.

packages/react-scripts/template/src/fold/Bad.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+let Lol = null;
+export default function Bad() {
+  return <div><h2><Lol /></h2></div>;
+}