feat: added error boundary

Kira-Pilot · Kira-Pilot · commit d12d8fc08db3 · 2022-05-19T20:04:55.000Z
closes #1013
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", "mailto:support@coder.com")
+  })
+})
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
@@ -1,15 +1,15 @@
 import Box from "@material-ui/core/Box"
+import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
 import React, { useEffect, useReducer } from "react"
-import { Link } from "react-router-dom"
 import { mapStackTrace } from "sourcemapped-stacktrace"
 import { Margins } from "../Margins/Margins"
 import { Section } from "../Section/Section"
 import { Typography } from "../Typography/Typography"
 import { reducer, RuntimeErrorReport, stackTraceAvailable, stackTraceUnavailable } from "./RuntimeErrorReport"
 
-const Language = {
+export const Language = {
   title: "Coder encountered an error",
   body: "Please copy the crash log using the button below and",
   link: "send it to us.",
@@ -40,14 +40,7 @@ const ErrorStateDescription = () => {
   return (
     <Typography variant="body2" color="textSecondary">
       {Language.body}&nbsp;
-      <Link
-        to="#"
-        onClick={(e) => {
-          window.location.href = "mailto:support@coder.com"
-          e.preventDefault()
-        }}
-        className={styles.link}
-      >
+      <Link href="mailto:support@coder.com" className={styles.link}>
         {Language.link}
       </Link>
     </Typography>
diff --git a/site/src/components/RuntimeErrorState/createCtas.tsx b/site/src/components/RuntimeErrorState/createCtas.tsx
@@ -4,7 +4,7 @@ import RefreshIcon from "@material-ui/icons/Refresh"
 import React from "react"
 import { CopyButton } from "../CopyButton/CopyButton"
 
-const Language = {
+export const Language = {
   reloadApp: "Reload Application",
   copyReport: "Copy Report",
 }

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import RefreshIcon from "@material-ui/icons/Refresh"`
`4`	`4`	`import React from "react"`
`5`	`5`	`import { CopyButton } from "../CopyButton/CopyButton"`
`6`	`6`
`7`		`-const Language = {`
	`7`	`+export const Language = {`
`8`	`8`	`reloadApp: "Reload Application",`
`9`	`9`	`copyReport: "Copy Report",`
`10`	`10`	`}`