feat(gatsby-admin): track errors (#26903)

* feat(gatsby-admin): track errors

* Fix stack containing the full URL and telemetry erroring

* Fix eslint error

* Fix eslint errors

Author: mxstbr

packages/gatsby-admin/package.json

@@ -31,6 +31,7 @@
     "query-string": "^6.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-error-boundary": "^3.0.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.10.0",
     "react-instantsearch-dom": "^5.7.0",

packages/gatsby-admin/src/components/error-tracker.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { ErrorBoundary } from "react-error-boundary"
+import { useTelemetry } from "../utils/use-telemetry"
+
+export function ErrorTracker({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element {
+  const { trackError } = useTelemetry()
+
+  return (
+    <ErrorBoundary
+      fallbackRender={(): JSX.Element => (
+        <div>
+          <h1>Oops, something went wrong :(</h1>
+          <p>Please refresh the page to try again.</p>
+        </div>
+      )}
+      onError={(err): void =>
+        trackError(`ERROR`, {
+          error: err,
+        })
+      }
+    >
+      {children}
+    </ErrorBoundary>
+  )
+}

packages/gatsby-admin/src/components/providers.tsx

@@ -6,6 +6,7 @@ import { merge } from "theme-ui"
 import { createUrqlClient } from "../urql-client"
 import "normalize.css"
 import { ServicesProvider, useServices } from "./services-provider"
+import { ErrorTracker } from "./error-tracker"
 
 const baseTheme = getTheme()
 
@@ -162,7 +163,9 @@ const Providers: React.FC<{}> = ({ children }) => (
     <ThemeProvider theme={theme}>
       {/* NOTE(@mxstbr): The GraphQLProvider needs to be in the ServicesProvider */}
       <ServicesProvider>
-        <GraphQLProvider>{children}</GraphQLProvider>
+        <ErrorTracker>
+          <GraphQLProvider>{children}</GraphQLProvider>
+        </ErrorTracker>
       </ServicesProvider>
     </ThemeProvider>
   </StrictUIProvider>

packages/gatsby-admin/src/utils/use-telemetry.tsx

@@ -5,15 +5,28 @@ interface ITelemetry {
     input: string | Array<string>,
     tags?: { pluginName?: string; pathname?: string }
   ) => void
+  trackError: (input: string | Array<string>, tags: { error: Error }) => void
 }
 
 const noop = (): void => {}
 
+const errorToJSON = (err): Record<string, any> => {
+  const json = JSON.parse(JSON.stringify(err, Object.getOwnPropertyNames(err)))
+  return {
+    ...json,
+    stack: json.stack.replace(
+      new RegExp(`${window.location.protocol}//${window.location.host}`, `g`),
+      `$URL`
+    ),
+  }
+}
+
 export const useTelemetry = (): ITelemetry => {
   const services = useServices()
   if (!services.telemetryserver)
     return {
       trackEvent: noop,
+      trackError: noop,
     }
 
   const { port } = services.telemetryserver
@@ -29,7 +42,25 @@ export const useTelemetry = (): ITelemetry => {
     return
   }
 
+  const trackError: ITelemetry["trackError"] = (input, tags) => {
+    fetch(`http://localhost:${port}/trackError`, {
+      method: `POST`,
+      body: JSON.stringify([
+        input,
+        {
+          ...tags,
+          error: errorToJSON(tags.error),
+        },
+      ]),
+      headers: {
+        "Content-Type": `application/json`,
+      },
+    }).catch(() => {})
+    return
+  }
+
   return {
     trackEvent,
+    trackError,
   }
 }

packages/gatsby-telemetry/src/error-helpers.ts

@@ -12,6 +12,8 @@ function regexpEscape(str: string): string {
 }
 
 export function cleanPaths(str: string, separator: string = sep): string {
+  if (!str) return str
+
   const stack = process.cwd().split(separator)
 
   while (stack.length > 1) {

packages/gatsby/src/utils/telemetry-server.ts

@@ -11,6 +11,7 @@ import cors from "cors"
 import {
   setDefaultComponentId,
   trackCli,
+  trackError,
   startBackgroundUpdate,
 } from "gatsby-telemetry"
 
@@ -20,6 +21,7 @@ setDefaultComponentId(`gatsby-admin`)
 // http://localhost:1234/trackEvent
 const ROUTES = {
   trackEvent: trackCli,
+  trackError,
 }
 
 const app = express()

yarn.lock

@@ -19475,6 +19475,13 @@ react-dom@^16.12.0:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
+react-error-boundary@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.0.1.tgz#ac2578ccdcfc513ce2a76befc61f1aa71da5cf7b"
+  integrity sha512-oY2868aEnNrGlVeQhP5faLRZp8dAN4fdPnRCUNhf6o6my/zmhGqrJ6yHtvK+hlJLzY96tGV0rtHU0YC7ZRMscw==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+
 react-error-overlay@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"