chore(webkit): update error stack parsing and related system tests

packages/driver/src/cypress/stack_utils.ts

@@ -8,12 +8,13 @@ import $utils from './utils'
 import $sourceMapUtils from './source_map_utils'
 
 // Intentionally deep-importing from @packages/errors so as to not bundle the entire @packages/errors in the client unnecessarily
-import { getStackLines, replacedStack, stackWithoutMessage, splitStack, unsplitStack } from '@packages/errors/src/stackUtils'
+import { getStackLines, replacedStack, stackWithoutMessage, splitStack, unsplitStack, stackLineRegex } from '@packages/errors/src/stackUtils'
 
 const whitespaceRegex = /^(\s*)*/
-const stackLineRegex = /^\s*(at )?.*@?\(?.*\:\d+\:\d+\)?$/
 const customProtocolRegex = /^[^:\/]+:\/{1,3}/
 const percentNotEncodedRegex = /%(?![0-9A-F][0-9A-F])/g
+const webkitStackLineRegex = /(.*)@(.*)(\n?)/g
+
 const STACK_REPLACEMENT_MARKER = '__stackReplacementMarker'
 
 const hasCrossFrameStacks = (specWindow) => {
@@ -244,9 +245,7 @@ const cleanFunctionName = (functionName) => {
 }
 
 const parseLine = (line) => {
-  const isStackLine = stackLineRegex.test(line)
-
-  if (!isStackLine) return
+  if (!stackLineRegex.test(line)) return
 
   const parsed = errorStackParser.parse({ stack: line } as any)[0]
 
@@ -318,7 +317,14 @@ const getSourceDetailsForLine = (projectRoot, line): LineDetail => {
 
   let absoluteFile
 
-  if (relativeFile && projectRoot) {
+  // WebKit stacks may include an `<unknown>` or `[native code]` location that is not navigable.
+  // We ensure that the absolute path is not set in this case.
+
+  const canBuildAbsolutePath = relativeFile && projectRoot && (
+    !Cypress.isBrowser('webkit') || (relativeFile !== '<unknown>' && relativeFile !== '[native code]')
+  )
+
+  if (canBuildAbsolutePath) {
     absoluteFile = path.resolve(projectRoot, relativeFile)
 
     // rollup-plugin-node-builtins/src/es6/path.js only support POSIX, we have
@@ -356,7 +362,9 @@ const reconstructStack = (parsedStack) => {
 
     const { whitespace, originalFile, function: fn, line, column } = parsedLine
 
-    return `${whitespace}at ${fn} (${originalFile || '<unknown>'}:${line}:${column})`
+    const lineAndColumn = (Number.isInteger(line) || Number.isInteger(column)) ? `:${line}:${column}` : ''
+
+    return `${whitespace}at ${fn} (${originalFile || '<unknown>'}${lineAndColumn})`
   }).join('\n').trimEnd()
 }
 
@@ -392,7 +400,35 @@ const normalizedStack = (err) => {
   // Chromium-based errors do, so we normalize them so that the stack
   // always includes the name/message
   const errString = err.toString()
-  const errStack = err.stack || ''
+  let errStack = err.stack || ''
+
+  if (Cypress.isBrowser('webkit')) {
+    // WebKit will not determine the proper stack trace for an error, with stack entries
+    // missing function names, call locations, or both. This is due to a number of documented
+    // issues with WebKit:
+    // https://bugs.webkit.org/show_bug.cgi?id=86493
+    // https://bugs.webkit.org/show_bug.cgi?id=243668
+    // https://bugs.webkit.org/show_bug.cgi?id=174380
+    //
+    // We update these stack entries with placeholder names/locations to more closely align
+    // the output with other browsers, minimizing the visual impact to the stack traces we render
+    // within the command log and console and ensuring that the stacks can be identified within
+    // and parsed out of test snapshots that include them.
+    errStack = errStack.replaceAll(webkitStackLineRegex, (match, ...parts: string[]) => {
+      // We patch WebKit's Error within the AUT as CyWebKitError, causing it to
+      // be presented within the stack. If we detect it within the stack, we remove it.
+      if (parts[0] === '__CyWebKitError') {
+        return ''
+      }
+
+      return [
+        parts[0] || '<unknown>',
+        '@',
+        parts[1] || '<unknown>',
+        parts[2],
+      ].join('')
+    })
+  }
 
   // the stack has already been normalized and normalizing the indentation
   // again could mess up the whitespace

packages/errors/src/stackUtils.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import type { ErrorLike } from './errorTypes'
 
-const stackLineRegex = /^\s*(at )?.*@?\(?.*\:\d+\:\d+\)?$/
+export const stackLineRegex = /^\s*(at )?.*@?(?:\(?.*(?::\d+:\d+|<unknown>|\[native code\])+\)?)$/
 
 type MessageLines = [string[], string[]] & {messageEnded?: boolean}
 

packages/reporter/src/errors/error-stack.tsx

@@ -76,7 +76,9 @@ const ErrorStack = observer(({ err }: Props) => {
     )
 
     if (dontLink) {
-      return makeLine(key, [whitespace, `at ${fn} (${originalFile}:${line}:${column})`])
+      const lineAndColumn = (Number.isInteger(line) || Number.isInteger(column)) ? `:${line}:${column}` : ''
+
+      return makeLine(key, [whitespace, `at ${fn} (${originalFile}${lineAndColumn})`])
     }
 
     const link = (