feat: added error boundary (#1602)

Kira-Pilot · kylecarbs · commit a0e4212fae0f · 2022-06-10T17:02:27.000Z
* added error boundary and error ui components * add body txt and standardize btn size * added story * feat: added error boundary closes #1013 * committing lockfile * added email body to help link
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -52,6 +52,7 @@
     "rpty",
     "sdkproto",
     "Signup",
+    "sourcemapped",
     "stretchr",
     "TCGETS",
     "tcpip",
diff --git a/site/package.json b/site/package.json
@@ -42,6 +42,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",
diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -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>
   )
diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -5,26 +5,38 @@ 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>
+      )}
+    </>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: 156,
+    maxHeight: 240,
+    overflowY: "scroll",
     background: theme.palette.background.default,
     color: theme.palette.text.primary,
     fontFamily: MONOSPACE_FONT_FAMILY,
@@ -36,4 +48,8 @@ const useStyles = makeStyles((theme) => ({
   line: {
     whiteSpace: "pre-wrap",
   },
+  ctaBar: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
 }))
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -1,19 +1,27 @@
-import Button from "@material-ui/core/Button"
+import IconButton from "@material-ui/core/Button"
 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,10 +44,15 @@ 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">
+      <div className={combineClasses([styles.copyButtonWrapper, wrapperClassName])}>
+        <IconButton
+          className={combineClasses([styles.copyButton, buttonClassName])}
+          onClick={copyToClipboard}
+          size="small"
+        >
           {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />}
-        </Button>
+          {ctaCopy && <div className={styles.buttonCopy}>{ctaCopy}</div>}
+        </IconButton>
       </div>
     </Tooltip>
   )
@@ -65,4 +78,7 @@ const useStyles = makeStyles((theme) => ({
     width: 20,
     height: 20,
   },
+  buttonCopy: {
+    marginLeft: theme.spacing(1),
+  },
 }))
diff --git a/site/src/components/ErrorBoundary/ErrorBoundary.tsx b/site/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -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/RuntimeErrorReport.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx
@@ -0,0 +1,83 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { CodeBlock } from "../CodeBlock/CodeBlock"
+import { createCtas } from "./createCtas"
+
+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"])
+  }
+}
+
+export const createFormattedStackTrace = (error: Error, mappedStack: string[] | null): string[] => {
+  return [
+    "======================= STACK TRACE ========================",
+    "",
+    error.message,
+    ...(mappedStack ? mappedStack : []),
+    "",
+    "============================================================",
+  ]
+}
+
+/**
+ * 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 formattedStackTrace = createFormattedStackTrace(error, mappedStack)
+  return <CodeBlock lines={formattedStackTrace} className={styles.codeBlock} ctas={createCtas(formattedStackTrace)} />
+}
+
+const useStyles = makeStyles(() => ({
+  codeBlock: {
+    minHeight: "auto",
+    userSelect: "all",
+    width: "100%",
+  },
+}))
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx
@@ -0,0 +1,30 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { RuntimeErrorState, RuntimeErrorStateProps } from "./RuntimeErrorState"
+
+const error = new Error("An error occurred")
+
+export default {
+  title: "components/RuntimeErrorState",
+  component: RuntimeErrorState,
+  argTypes: {
+    error: {
+      defaultValue: error,
+    },
+  },
+} as ComponentMeta<typeof RuntimeErrorState>
+
+const Template: Story<RuntimeErrorStateProps> = (args) => <RuntimeErrorState {...args} />
+
+export const Errored = Template.bind({})
+Errored.parameters = {
+  // The RuntimeErrorState is noisy for chromatic, because it renders an actual error
+  // along with the stacktrace - and the stacktrace includes the full URL of
+  // scripts in the stack. This is problematic, because every deployment uses
+  // a different URL, causing the validation to fail.
+  chromatic: { disableSnapshot: true },
+}
+
+Errored.args = {
+  error,
+}
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx
@@ -0,0 +1,43 @@
+import { screen } from "@testing-library/react"
+import React from "react"
+import { render } from "../../testHelpers/renderHelpers"
+import { Language as ButtonLanguage } from "./createCtas"
+import { Language as RuntimeErrorStateLanguage, RuntimeErrorState } from "./RuntimeErrorState"
+
+describe("RuntimeErrorState", () => {
+  beforeEach(() => {
+    // Given
+    const errorText = "broken!"
+    const errorStateProps = {
+      error: new Error(errorText),
+    }
+
+    // When
+    render(<RuntimeErrorState {...errorStateProps} />)
+  })
+
+  it("should show stack when encountering runtime error", () => {
+    // Then
+    const reportError = screen.getByText("broken!")
+    expect(reportError).toBeDefined()
+
+    // Despite appearances, this is the stack trace
+    const stackTrace = screen.getByText("Unable to get stack trace")
+    expect(stackTrace).toBeDefined()
+  })
+
+  it("should have a button bar", () => {
+    // Then
+    const copyCta = screen.getByText(ButtonLanguage.copyReport)
+    expect(copyCta).toBeDefined()
+
+    const reloadCta = screen.getByText(ButtonLanguage.reloadApp)
+    expect(reloadCta).toBeDefined()
+  })
+
+  it("should have an email link", () => {
+    // Then
+    const emailLink = screen.getByText(RuntimeErrorStateLanguage.link)
+    expect(emailLink.closest("a")).toHaveAttribute("href", expect.stringContaining("mailto:support@coder.com"))
+  })
+})
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
diff --git a/site/src/components/RuntimeErrorState/createCtas.tsx b/site/src/components/RuntimeErrorState/createCtas.tsx
diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
diff --git a/site/yarn.lock b/site/yarn.lock
