Fix removing whitespacing in dev overlay (#28277)

## Bug

- [x] Related issues linked using `fixes #number`

fixes #14434 

Before
![image](https://user-images.githubusercontent.com/31622972/130001431-392efc66-69b3-47b5-802a-251a545983fd.png)

After
![image](https://user-images.githubusercontent.com/31622972/130001455-f553c977-c64b-43da-8e27-b513c6ea4179.png)



Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

packages/react-dev-overlay/src/internal/components/CodeFrame/CodeFrame.tsx

@@ -14,7 +14,11 @@ export const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({
   const formattedFrame = React.useMemo<string>(() => {
     const lines = codeFrame.split(/\r?\n/g)
     const prefixLength = lines
-      .map((line) => /^>? +\d+ +\| ( *)/.exec(stripAnsi(line)))
+      .map((line) =>
+        /^>? +\d+ +\| [ ]+/.exec(stripAnsi(line)) === null
+          ? null
+          : /^>? +\d+ +\| ( *)/.exec(stripAnsi(line))
+      )
       .filter(Boolean)
       .map((v) => v!.pop()!)
       .reduce((c, n) => (isNaN(c) ? n.length : Math.min(c, n.length)), NaN)

test/development/acceptance/ReactRefreshLogBox.test.ts

@@ -15,6 +15,36 @@ describe('ReactRefreshLogBox', () => {
   })
   afterAll(() => next.destroy())
 
+  test('should strip whitespace correctly with newline', async () => {
+    const { session, cleanup } = await sandbox(next)
+
+    await session.patch(
+      'index.js',
+      `
+        export default function Page() {
+          return (
+            <>
+            
+                          <p>index page</p>
+
+                          <a onClick={() => {
+                            throw new Error('idk')
+                          }}>
+                            click me
+                          </a>
+            </>
+          )
+        }
+      `
+    )
+    await session.evaluate(() => document.querySelector('a').click())
+
+    expect(await session.hasRedbox(true)).toBe(true)
+    expect(await session.getRedboxSource()).toMatchSnapshot()
+
+    await cleanup()
+  })
+
   test('logbox: can recover from a syntax error without losing state', async () => {
     const { session, cleanup } = await sandbox(next)
 

test/development/acceptance/__snapshots__/ReactRefreshLogBox.test.ts.snap

@@ -104,6 +104,18 @@ exports[`ReactRefreshLogBox render error not shown right after syntax error 1`]
   9 | }"
 `;
 
+exports[`ReactRefreshLogBox should strip whitespace correctly with newline 1`] = `
+"index.js (9:34) @ onClick
+
+   7 | 
+   8 | <a onClick={() => {
+>  9 |   throw new Error('idk')
+     |        ^
+  10 | }}>
+  11 |   click me
+  12 | </a>"
+`;
+
 exports[`ReactRefreshLogBox stuck error 1`] = `
 "Foo.js (4:10) @ Foo
 

test/integration/config-devtool-dev/test/index.test.js

@@ -37,16 +37,16 @@ describe('devtool set in development mode in next config', () => {
       // TODO: add win32 snapshot
     } else {
       expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-        "pages/index.js (5:10) @ eval
-
-          3 | export default function Index(props) {
-          4 |   useEffect(() => {
-        > 5 |     throw new Error('this should render')
-            |          ^
-          6 |   }, [])
-          7 |   return <div>Index Page</div>
-          8 | }"
-      `)
+"pages/index.js (5:10) @ eval
+
+  3 | export default function Index(props) {
+  4 | useEffect(() => {
+> 5 |   throw new Error('this should render')
+    |        ^
+  6 | }, [])
+  7 | return <div>Index Page</div>
+  8 | }"
+`)
     }
     await browser.close()