added email body to help link

coder · Kira-Pilot · May 20, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022
commit bea96b41652c54cc8e29fd8c2687523a2c063b44
@@ -49,6 +49,17 @@ export const reducer = (model: ReportState, msg: ReportMessage): ReportState =>
   }
 }
 
+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
  */
@@ -59,16 +70,8 @@ export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): React.R
     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 formattedStackTrace = createFormattedStackTrace(error, mappedStack)
+  return <CodeBlock lines={formattedStackTrace} className={styles.codeBlock} ctas={createCtas(formattedStackTrace)} />
 }
 
 const useStyles = makeStyles(() => ({

@@ -38,6 +38,6 @@ describe("RuntimeErrorState", () => {
   it("should have an email link", () => {
     // Then
     const emailLink = screen.getByText(RuntimeErrorStateLanguage.link)
-    expect(emailLink.closest("a")).toHaveAttribute("href", "mailto:support@coder.com")
+    expect(emailLink.closest("a")).toHaveAttribute("href", expect.stringContaining("mailto:support@coder.com"))
   })
 })
@@ -7,7 +7,13 @@ 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"
+import {
+  createFormattedStackTrace,
+  reducer,
+  RuntimeErrorReport,
+  stackTraceAvailable,
+  stackTraceUnavailable,
+} from "./RuntimeErrorReport"
 
 export const Language = {
   title: "Coder encountered an error",
@@ -35,12 +41,17 @@ const ErrorStateTitle = () => {
 /**
  * A description for our error boundary UI
  */
-const ErrorStateDescription = () => {
+const ErrorStateDescription = ({ emailBody }: { emailBody?: string }) => {
   const styles = useStyles()
   return (
     <Typography variant="body2" color="textSecondary">
       {Language.body}&nbsp;
-      <Link href="mailto:support@coder.com" className={styles.link}>
+      <Link
+        href={`mailto:support@coder.com?subject=Error Report from Coder&body=${
+          emailBody && emailBody.replace(/\r\n|\r|\n/g, "%0D%0A") // preserving line breaks
+        }`}
+        className={styles.link}
+      >
         {Language.link}
       </Link>
     </Typography>
@@ -65,7 +76,15 @@ export const RuntimeErrorState: React.FC<RuntimeErrorStateProps> = ({ error }) =
   return (
     <Box display="flex" flexDirection="column">
       <Margins>
-        <Section className={styles.reportContainer} title={<ErrorStateTitle />} description={<ErrorStateDescription />}>
+        <Section
+          className={styles.reportContainer}
+          title={<ErrorStateTitle />}
+          description={
+            <ErrorStateDescription
+              emailBody={createFormattedStackTrace(reportState.error, reportState.mappedStack).join("\r\n")}
+            />
+          }
+        >
           <RuntimeErrorReport error={reportState.error} mappedStack={reportState.mappedStack} />
         </Section>
       </Margins>