Add general error message when page crashes

Previously, we would tear down to a blank white page. Now, for errors within most page content, we show a cute error message with a grundo programmer!

To test, visit `/?send-test-error-for-sentry`, which will trigger an intentional render error on the home page.

Note that this does _not_ cover pages that don't use PageLayout, namely the wardrobe page! I'll want to add other boundaries there…

src/app/PageLayout.js

@@ -1,6 +1,11 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, Flex, Grid, Link } from "@chakra-ui/react";
 import { loadable } from "./util";
+import * as Sentry from "@sentry/react";
+import { WarningIcon } from "@chakra-ui/icons";
+
+import ErrorGrundoImg from "./images/error-grundo.png";
+import ErrorGrundoImg2x from "./images/error-grundo@2x.png";
 
 const GlobalHeader = loadable(() => import("./GlobalHeader"));
 const GlobalFooter = loadable(() => import("./GlobalFooter"));
@@ -24,7 +29,11 @@ function PageLayout({ children }) {
       >
         <GlobalHeader />
       </Box>
-      <Box flex="1 0 0">{children}</Box>
+      <Box flex="1 0 0">
+        <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+          {children}
+        </Sentry.ErrorBoundary>
+      </Box>
       <Box width="100%" marginTop="12">
         <GlobalFooter />
       </Box>
@@ -32,4 +41,49 @@ function PageLayout({ children }) {
   );
 }
 
+function MajorErrorMessage({ error }) {
+  return (
+    <Flex justify="center" marginTop="8">
+      <Grid
+        templateAreas='"icon title" "icon description" "icon details"'
+        templateColumns="auto 1fr"
+        maxWidth="500px"
+        columnGap="4"
+      >
+        <Box gridArea="icon" marginTop="2">
+          <Box
+            as="img"
+            src={ErrorGrundoImg}
+            srcSet={`${ErrorGrundoImg} 1x, ${ErrorGrundoImg2x} 2x`}
+            borderRadius="full"
+            boxShadow="md"
+            width="100px"
+            height="100px"
+            alt=""
+          />
+        </Box>
+        <Box gridArea="title" fontSize="lg" marginBottom="1">
+          Ah dang, I broke it 😖
+        </Box>
+        <Box gridArea="description" marginBottom="2">
+          There was an error displaying this page. I'll get info about it
+          automatically, but you can tell me more at{" "}
+          <Link href="mailto:matchu@openneo.net" color="green.400">
+            matchu@openneo.net
+          </Link>
+          !
+        </Box>
+        <Box gridArea="details" fontSize="xs" opacity="0.8">
+          <WarningIcon
+            marginRight="1.5"
+            marginTop="-2px"
+            aria-label="Error message"
+          />
+          "{error.message}"
+        </Box>
+      </Grid>
+    </Flex>
+  );
+}
+
 export default PageLayout;