May 20, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022 · May 19, 2022
diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
 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,
diff --git a/site/src/components/RuntimeErrorState/ReportButtons.tsx b/site/src/components/RuntimeErrorState/ReportButtons.tsx
    marginLeft: 0,
    flex: theme.spacing(1),
    textTransform: "uppercase",
    fontSize: theme.typography.button.fontSize,
  },

  copyButton: {
    width: "100%",
    marginRight: theme.spacing(1),
    backgroundColor: theme.palette.primary.main,
    textTransform: "uppercase",
    fontSize: theme.typography.button.fontSize,
  },
 }))
diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
 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 = {
  title: "Coder encountered an error",
  body: "Please copy the crash log using the button below and",
  link: "send it to us.",
 }

 interface RuntimeErrorStateProps {
 */
 const ErrorStateTitle = () => {
  const styles = useStyles()

  return (
    <Box className={styles.title} display="flex" alignItems="center">
      <ErrorOutlineIcon />
  )
 }

 /**
 * A description for our error boundary UI
 */
 const ErrorStateDescription = () => {
  const styles = useStyles()
  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}
      >
        {Language.link}
      </Link>
    </Typography>
  )
 }

 /**
 * An error UI that is displayed when our error boundary (ErrorBoundary.tsx) is triggered
 */
  return (
    <Box display="flex" flexDirection="column">
      <Margins>
        <Section className={styles.reportContainer} title={<ErrorStateTitle />}>
        <Section className={styles.reportContainer} title={<ErrorStateTitle />} description={<ErrorStateDescription />}>
          <RuntimeErrorReport error={reportState.error} mappedStack={reportState.mappedStack} />
        </Section>
      </Margins>
      color: theme.palette.error.main,
    },
  },

  link: {
    textDecoration: "none",
    color: theme.palette.primary.main,
  },
  reportContainer: {
    display: "flex",
    justifyContent: "center",
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
 }))

 export const Stack: React.FC<StackProps> = ({ children, spacing = 2 }) => {
  throw new Error("uh oh")

  const styles = useStyles({ spacing })
  return <div className={styles.stack}>{children}</div>
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,6 +35,8 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "
		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,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,12 +59,14 @@ const useStyles = makeStyles((theme) => ({
		marginLeft: 0,
		flex: theme.spacing(1),
		textTransform: "uppercase",
		fontSize: theme.typography.button.fontSize,
		},

		copyButton: {
		width: "100%",
		marginRight: theme.spacing(1),
		backgroundColor: theme.palette.primary.main,
		textTransform: "uppercase",
		fontSize: theme.typography.button.fontSize,
		},
		}))
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,13 +2,17 @@ import Box from "@material-ui/core/Box"
		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 = {
		title: "Coder encountered an error",
		body: "Please copy the crash log using the button below and",
		link: "send it to us.",
		}

		interface RuntimeErrorStateProps {
Expand All		@@ -20,7 +24,6 @@ interface RuntimeErrorStateProps {
		*/
		const ErrorStateTitle = () => {
		const styles = useStyles()

		return (
		<Box className={styles.title} display="flex" alignItems="center">
		<ErrorOutlineIcon />
Expand All		@@ -29,6 +32,28 @@ const ErrorStateTitle = () => {
		)
		}

		/**
		* A description for our error boundary UI
		*/
		const ErrorStateDescription = () => {
		const styles = useStyles()
		return (
		<Typography variant="body2" color="textSecondary">
		{Language.body}
		<Link
		to="#"
		onClick={(e) => {
		window.location.href = "mailto:support@coder.com"
		e.preventDefault()
		}}
		className={styles.link}
		>
		{Language.link}
		</Link>
		</Typography>
		)
		}

		/**
		* An error UI that is displayed when our error boundary (ErrorBoundary.tsx) is triggered
		*/
Expand All		@@ -47,7 +72,7 @@ export const RuntimeErrorState: React.FC<RuntimeErrorStateProps> = ({ error }) =
		return (
		<Box display="flex" flexDirection="column">
		<Margins>
		<Section className={styles.reportContainer} title={<ErrorStateTitle />}>
		<Section className={styles.reportContainer} title={<ErrorStateTitle />} description={<ErrorStateDescription />}>
		<RuntimeErrorReport error={reportState.error} mappedStack={reportState.mappedStack} />
		</Section>
		</Margins>
Expand All		@@ -65,7 +90,10 @@ const useStyles = makeStyles((theme) => ({
		color: theme.palette.error.main,
		},
		},

		link: {
		textDecoration: "none",
		color: theme.palette.primary.main,
		},
		reportContainer: {
		display: "flex",
		justifyContent: "center",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,8 +14,6 @@ const useStyles = makeStyles((theme) => ({
		}))

		export const Stack: React.FC<StackProps> = ({ children, spacing = 2 }) => {
		throw new Error("uh oh")

		const styles = useStyles({ spacing })
		return <div className={styles.stack}>{children}</div>
		}