Add fallback UI for Ink and ensure telemetry works

gatsbyjs · Oct 11, 2019 · 57c8a47 · 57c8a47
1 parent fa629bc
commit 57c8a47
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 16 deletions.
diff --git a/integration-tests/structured-logging/package.json b/integration-tests/structured-logging/package.json
@@ -10,7 +10,7 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "gatsby": "^2.0.0",
+    "gatsby": "2.15.34-dev-1570799776640",
     "gray-percentage": "^2.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"

diff --git a/packages/gatsby-cli/src/reporter/index.js b/packages/gatsby-cli/src/reporter/index.js
@@ -110,8 +110,6 @@ const reporter: Reporter = {
    * @param {boolean} [isNoColor=false]
    */
   setNoColor(isNoColor = false) {
-    // reporterInstance.setColors(isNoColor)
-
     if (isNoColor) {
       errorFormatter.withoutColors()
     }

diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/cli.js b/packages/gatsby-cli/src/reporter/loggers/ink/cli.js
@@ -1,6 +1,7 @@
 import React from "react"
 import { Box, Static } from "ink"
-import { isCI } from "ci-info"
+import isTTY from "../../../util/is-tty"
+import { trackBuildError } from "gatsby-telemetry"
 
 import Spinner from "../ink/components/spinner"
 import ProgressBar from "../ink/components/progress-bar"
@@ -9,15 +10,47 @@ import { Message } from "../ink/components/messages"
 import Error from "./components/error"
 import Develop from "../ink/components/develop"
 
-const showProgress = process.stdout.isTTY && !isCI
+const showProgress = isTTY()
 
 class CLI extends React.Component {
+  state = {
+    hasError: false,
+  }
+
+  componentDidCatch(error, info) {
+    trackBuildError(`INK`, {
+      error: {
+        stack: info.componentStack,
+        text: error.message,
+        context: {},
+      },
+    })
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error }
+  }
+
   render() {
     const {
       logs: { messages, activities },
       showStatusBar,
     } = this.props
 
+    const { hasError, error } = this.state
+
+    if (hasError) {
+      // You can render any custom fallback UI
+      return (
+        <Box flexDirection="row">
+          <Message
+            level="ACTIVITY_FAILED"
+            text={`We've encountered an error: ${error.message}`}
+          />
+        </Box>
+      )
+    }
+
     const spinners = []
     const progressBars = []
     if (showProgress) {
@@ -43,7 +76,7 @@ class CLI extends React.Component {
               msg.level === `ERROR` ? (
                 <Error details={msg} key={index} />
               ) : (
-                <Message hideColors={true} key={index} {...msg} />
+                <Message key={index} {...msg} />
               )
             )}
           </Static>

diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/components/messages.js b/packages/gatsby-cli/src/reporter/loggers/ink/components/messages.js
@@ -1,16 +1,11 @@
 import React from "react"
 import { Box, Color } from "ink"
-import stripAnsi from "strip-ansi"
 
 import { ActivityLogLevels, LogLevels } from "../../../constants"
 
-const ColorSwitcher = ({ hideColors, children, ...props }) => {
-  if (hideColors) {
-    return stripAnsi(children)
-  }
-
-  return <Color {...props}>{children}</Color>
-}
+const ColorSwitcher = ({ children, ...props }) => (
+  <Color {...props}>{children}</Color>
+)
 
 const createLabel = (text, color) => (...props) => (
   <ColorSwitcher {...{ [color]: true, ...props }}>{text}</ColorSwitcher>
@@ -37,7 +32,7 @@ const getLabel = level => {
   }
 }
 
-export const Message = ({ level, hideColors, text, duration, statusText }) => {
+export const Message = ({ level, text, duration, statusText }) => {
   let message = text
   if (duration) {
     message += ` - ${duration.toFixed(3)}s`
@@ -53,7 +48,7 @@ export const Message = ({ level, hideColors, text, duration, statusText }) => {
 
   return (
     <Box textWrap="wrap" flexDirection="row">
-      <TextLabel hideColors={hideColors} />
+      <TextLabel />
       {` `}
       {message}
     </Box>

diff --git a/packages/gatsby-cli/src/reporter/loggers/ipc/index.js b/packages/gatsby-cli/src/reporter/loggers/ipc/index.js
@@ -7,6 +7,9 @@ const { Actions } = require(`../../constants`)
 onLogAction(action => {
   const sanitizedAction = {
     ...action,
+    /* Payload can either be a String or an Object
+     * See more at integration-tests/structured-logging/__tests__/to-do.js
+     */
     payload: _.isPlainObject(action.payload)
       ? {
           ...action.payload,