fix(error-overlay): strip line+column from webpack internal frames (#…

…63133)

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

packages/next/src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts

@@ -102,30 +102,36 @@ export function getOriginalStackFrames(
   )
 }
 
+const webpackRegExes = [
+  /^webpack-internal:\/\/\/(\.)?(\((\w+)\))?/,
+  /^(webpack:\/\/\/(\.)?|webpack:\/\/(_N_E\/)?)(\((\w+)\))?/,
+]
+
+function isWebpackBundled(file: string) {
+  return webpackRegExes.some((regEx) => regEx.test(file))
+}
+
 /**
  * Format the webpack internal id to original file path
  * webpack-internal:///./src/hello.tsx => ./src/hello.tsx
  * webpack://_N_E/./src/hello.tsx => ./src/hello.tsx
  * webpack://./src/hello.tsx => ./src/hello.tsx
  * webpack:///./src/hello.tsx => ./src/hello.tsx
- *
  */
 function formatFrameSourceFile(file: string) {
+  for (const regex of webpackRegExes) file = file.replace(regex, '')
   return file
-    .replace(/^webpack-internal:\/\/\/(\.)?(\((\w+)\))?/, '')
-    .replace(/^(webpack:\/\/\/(\.)?|webpack:\/\/(_N_E\/)?)(\((\w+)\))?/, '')
 }
 
 export function getFrameSource(frame: StackFrame): string {
+  if (!frame.file) return ''
+
   let str = ''
   try {
-    const u = new URL(frame.file!)
+    const u = new URL(frame.file)
 
     // Strip the origin for same-origin scripts.
-    if (
-      typeof globalThis !== 'undefined' &&
-      globalThis.location?.origin !== u.origin
-    ) {
+    if (globalThis.location?.origin !== u.origin) {
       // URLs can be valid without an `origin`, so long as they have a
       // `protocol`. However, `origin` is preferred.
       if (u.origin === 'null') {
@@ -144,7 +150,7 @@ export function getFrameSource(frame: StackFrame): string {
     str += formatFrameSourceFile(frame.file || '(unknown)') + ' '
   }
 
-  if (frame.lineNumber != null) {
+  if (!isWebpackBundled(frame.file) && frame.lineNumber != null) {
     if (frame.column != null) {
       str += `(${frame.lineNumber}:${frame.column}) `
     } else {