added error boundary and error ui components

coder · Kira-Pilot · May 20, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022
commit 2d6531b8dc6bb69888c37ff1155aff1c849ea5ed
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -51,6 +51,7 @@
     "rpty",
     "sdkproto",
     "Signup",
+    "sourcemapped",
     "stretchr",
     "TCGETS",
     "tcpip",
@@ -76,7 +77,7 @@
       },
       {
         "match": "provisionerd/proto/provisionerd.proto",
-        "cmd": "make provisionerd/proto/provisionerd.pb.go",
+        "cmd": "make provisionerd/proto/provisionerd.pb.go"
       }
     ]
   },
@@ -104,5 +105,5 @@
   },
   // We often use a version of TypeScript that's ahead of the version shipped
   // with VS Code.
-  "typescript.tsdk": "./site/node_modules/typescript/lib",
+  "typescript.tsdk": "./site/node_modules/typescript/lib"
 }
@@ -41,6 +41,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "6.3.0",
+    "sourcemapped-stacktrace": "1.1.11",
     "swr": "1.2.2",
     "uuid": "8.3.2",
     "xstate": "4.32.1",

@@ -4,6 +4,7 @@ import React from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
+import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import { dark } from "./theme"
 import "./theme/globalFonts"
@@ -30,13 +31,15 @@ export const App: React.FC = () => {
           },
         }}
       >
-        <XServiceProvider>
-          <ThemeProvider theme={dark}>
-            <CssBaseline />
-            <AppRouter />
-            <GlobalSnackbar />
-          </ThemeProvider>
-        </XServiceProvider>
+        <ThemeProvider theme={dark}>
+          <CssBaseline />
+          <ErrorBoundary>
+            <XServiceProvider>
+              <AppRouter />
+              <GlobalSnackbar />
+            </XServiceProvider>
+          </ErrorBoundary>
+        </ThemeProvider>
       </SWRConfig>
     </Router>
   )

@@ -5,20 +5,30 @@ import { combineClasses } from "../../util/combineClasses"
 
 export interface CodeBlockProps {
   lines: string[]
+  ctas?: React.ReactElement[]
   className?: string
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, className = "" }) => {
+export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
   const styles = useStyles()
 
   return (
-    <div className={combineClasses([styles.root, className])}>
-      {lines.map((line, idx) => (
-        <div className={styles.line} key={idx}>
-          {line}
+    <>
+      <div className={combineClasses([styles.root, className])}>
+        {lines.map((line, idx) => (
+          <div className={styles.line} key={idx}>
+            {line}
+          </div>
+        ))}
+      </div>
+      {ctas && ctas.length && (
+        <div className={styles.ctaBar}>
+          {ctas.map((cta, i) => {
+            return <React.Fragment key={i}>{cta}</React.Fragment>
+          })}
         </div>
-      ))}
-    </div>
+      )}
+    </>
   )
 }
 
@@ -36,4 +46,8 @@ const useStyles = makeStyles((theme) => ({
   line: {
     whiteSpace: "pre-wrap",
   },
+  ctaBar: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
 }))
@@ -3,17 +3,25 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import React, { useState } from "react"
+import { combineClasses } from "../../util/combineClasses"
 import { FileCopyIcon } from "../Icons/FileCopyIcon"
 
 interface CopyButtonProps {
   text: string
-  className?: string
+  ctaCopy?: string
+  wrapperClassName?: string
+  buttonClassName?: string
 }
 
 /**
  * Copy button used inside the CodeBlock component internally
  */
-export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text }) => {
+export const CopyButton: React.FC<CopyButtonProps> = ({
+  text,
+  ctaCopy,
+  wrapperClassName = "",
+  buttonClassName = "",
+}) => {
   const styles = useStyles()
   const [isCopied, setIsCopied] = useState<boolean>(false)
 
@@ -36,9 +44,16 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text })
 
   return (
     <Tooltip title="Copy to Clipboard" placement="top">
-      <div className={`${styles.copyButtonWrapper} ${className}`}>
-        <Button className={styles.copyButton} onClick={copyToClipboard} size="small">
-          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />}
+      <div className={combineClasses([styles.copyButtonWrapper, wrapperClassName])}>
+        <Button
+          className={combineClasses([styles.copyButton, buttonClassName])}
+          onClick={copyToClipboard}
+          size="small"
+          startIcon={
+            isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />
+          }
+        >
+          {ctaCopy && ctaCopy}
         </Button>
       </div>
     </Tooltip>

@@ -0,0 +1,31 @@
+import React from "react"
+import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"
+
+type ErrorBoundaryProps = Record<string, unknown>
+
+interface ErrorBoundaryState {
+  error: Error | null
+}
+
+/**
+ * Our app's Error Boundary
+ * Read more about React Error Boundaries: https://reactjs.org/docs/error-boundaries.html
+ */
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): { error: Error } {
+    return { error }
+  }
+
+  render(): React.ReactNode {
+    if (this.state.error) {
+      return <RuntimeErrorState error={this.state.error} />
+    }
+
+    return this.props.children
+  }
+}
diff --git a/site/src/components/RuntimeErrorState/ReportButtons.tsx b/site/src/components/RuntimeErrorState/ReportButtons.tsx
@@ -0,0 +1,70 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import RefreshIcon from "@material-ui/icons/Refresh"
+import React from "react"
+import { CopyButton } from "../CopyButton/CopyButton"
+
+const Language = {
+  reloadApp: "Reload Application",
+  copyReport: "Copy Report",
+}
+
+/**
+ * A wrapper component for a full-width copy button
+ */
+const CopyStackButton = ({ text }: { text: string }): React.ReactElement => {
+  const styles = useStyles()
+
+  return (
+    <CopyButton
+      text={text}
+      ctaCopy={Language.copyReport}
+      wrapperClassName={styles.buttonWrapper}
+      buttonClassName={styles.copyButton}
+    />
+  )
+}
+
+/**
+ * A button that reloads our application
+ */
+const ReloadAppButton = (): React.ReactElement => {
+  const styles = useStyles()
+
+  return (
+    <Button
+      className={styles.buttonWrapper}
+      variant="outlined"
+      color="primary"
+      startIcon={<RefreshIcon />}
+      onClick={() => location.replace("/")}
+    >
+      {Language.reloadApp}
+    </Button>
+  )
+}
+
+/**
+ * createCtas generates an array of buttons to be used with our error boundary UI
+ */
+export const createCtas = (codeBlock: string[]): React.ReactElement[] => {
+  // REMARK: we don't have to worry about key order changing
+  // eslint-disable-next-line react/jsx-key
+  return [<CopyStackButton text={codeBlock.join("\r\n")} />, <ReloadAppButton />]
+}
+
+const useStyles = makeStyles((theme) => ({
+  buttonWrapper: {
+    marginTop: theme.spacing(1),
+    marginLeft: 0,
+    flex: theme.spacing(1),
+    textTransform: "uppercase",
+  },
+
+  copyButton: {
+    width: "100%",
+    marginRight: theme.spacing(1),
+    backgroundColor: theme.palette.primary.main,
+    textTransform: "uppercase",
+  },
+}))
@@ -0,0 +1,80 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { CodeBlock } from "../CodeBlock/CodeBlock"
+import { createCtas } from "./ReportButtons"
+
+const Language = {
+  reportLoading: "Generating crash report...",
+}
+
+interface ReportState {
+  error: Error
+  mappedStack: string[] | null
+}
+
+interface StackTraceAvailableMsg {
+  type: "stackTraceAvailable"
+  stackTrace: string[]
+}
+
+/**
+ * stackTraceUnavailable is a Msg describing a stack trace not being available
+ */
+export const stackTraceUnavailable = {
+  type: "stackTraceUnavailable",
+} as const
+
+type ReportMessage = StackTraceAvailableMsg | typeof stackTraceUnavailable
+
+export const stackTraceAvailable = (stackTrace: string[]): StackTraceAvailableMsg => {
+  return {
+    type: "stackTraceAvailable",
+    stackTrace,
+  }
+}
+
+const setStackTrace = (model: ReportState, mappedStack: string[]): ReportState => {
+  return {
+    ...model,
+    mappedStack,
+  }
+}
+
+export const reducer = (model: ReportState, msg: ReportMessage): ReportState => {
+  switch (msg.type) {
+    case "stackTraceAvailable":
+      return setStackTrace(model, msg.stackTrace)
+    case "stackTraceUnavailable":
+      return setStackTrace(model, ["Unable to get stack trace"])
+  }
+}
+
+/**
+ * A code block component that contains the error stack resulting from an error boundary trigger
+ */
+export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): React.ReactElement => {
+  const styles = useStyles()
+
+  if (!mappedStack) {
+    return <CodeBlock lines={[Language.reportLoading]} className={styles.codeBlock} />
+  }
+
+  const codeBlock = [
+    "======================= STACK TRACE ========================",
+    "",
+    error.message,
+    ...mappedStack,
+    "",
+    "============================================================",
+  ]
+
+  return <CodeBlock lines={codeBlock} className={styles.codeBlock} ctas={createCtas(codeBlock)} />
+}
+
+const useStyles = makeStyles(() => ({
+  codeBlock: {
+    minHeight: "auto",
+    userSelect: "all",
+    width: "100%",
+  },
+}))