fix(gatsby): Make runtime error overlay work in non-v8 browsers (#36365)

gatsbyjs · Aug 11, 2022 · 2b4ff76 · 2b4ff76
1 parent f990e08
commit 2b4ff76
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/runtime-errors.js
@@ -1,13 +1,13 @@
 import * as React from "react"
-import StackTrace from "stack-trace"
+import ErrorStackParser from "error-stack-parser"
 import { Overlay, Header, HeaderOpenClose, Body } from "./overlay"
 import { useStackFrame } from "./hooks"
 import { CodeFrame } from "./code-frame"
 import { getCodeFrameInformation, openInEditor } from "../utils"
 import { Accordion, AccordionItem } from "./accordion"
 
 function WrappedAccordionItem({ error, open }) {
-  const stacktrace = StackTrace.parse(error)
+  const stacktrace = ErrorStackParser.parse(error)
   const codeFrameInformation = getCodeFrameInformation(stacktrace)
 
   const modulePath = codeFrameInformation?.moduleId

diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/utils.js b/packages/gatsby/cache-dir/fast-refresh-overlay/utils.js
@@ -36,15 +36,19 @@ export function skipSSR() {
 }
 
 export function getCodeFrameInformation(stackTrace) {
-  const callSite = stackTrace.find(CallSite => CallSite.getFileName())
-  if (!callSite) {
+  const stackFrame = stackTrace.find(stackFrame => {
+    const fileName = stackFrame.getFileName()
+    return fileName && fileName !== `[native code]` // Quirk of Safari error stack frames
+  })
+
+  if (!stackFrame) {
     return null
   }
 
-  const moduleId = formatFilename(callSite.getFileName())
-  const lineNumber = callSite.getLineNumber()
-  const columnNumber = callSite.getColumnNumber()
-  const functionName = callSite.getFunctionName()
+  const moduleId = formatFilename(stackFrame.getFileName())
+  const lineNumber = stackFrame.getLineNumber()
+  const columnNumber = stackFrame.getColumnNumber()
+  const functionName = stackFrame.getFunctionName()
 
   return {
     moduleId,

diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json
@@ -67,6 +67,7 @@
     "devcert": "^1.2.0",
     "dotenv": "^8.6.0",
     "enhanced-resolve": "^5.8.3",
+    "error-stack-parser": "^2.1.4",
     "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.10.0",
@@ -271,4 +272,4 @@
   "yargs": {
     "boolean-negation": false
   }
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -10259,6 +10259,13 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.1.1"
 
+error-stack-parser@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
+  dependencies:
+    stackframe "^1.3.4"
+
 error@^7.0.0:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
@@ -23613,6 +23620,11 @@ stackframe@^1.1.1:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.1.1.tgz#ffef0a3318b1b60c3b58564989aca5660729ec71"
   integrity sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ==
 
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
+
 standard-version@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/standard-version/-/standard-version-9.1.0.tgz#07589469324d967ffe665fa86ef612949a858a80"