impress-2020/src/app/PageLayout.js
Matchu 65af7ef64c Add general error message for wardrobe crashes
Boom, pulled some stuff out into util! Now we also have error boundaries in both panels of the wardrobe page.

You can test this one by visiting `/outfits/new?send-test-error-for-sentry`, just like on the home page! Util component for fake errors owo
2021-05-05 00:22:28 -07:00

42 lines
993 B
JavaScript

import React from "react";
import { Box } from "@chakra-ui/react";
import { loadable } from "./util";
import * as Sentry from "@sentry/react";
import { MajorErrorMessage } from "./util";
const GlobalHeader = loadable(() => import("./GlobalHeader"));
const GlobalFooter = loadable(() => import("./GlobalFooter"));
function PageLayout({ children }) {
return (
<Box
paddingX="6"
paddingY="3"
maxWidth="1024px"
margin="0 auto"
minHeight="100vh"
display="flex"
flexDirection="column"
>
<Box
width="100%"
marginBottom="6"
// Leave space while content is still loading
minHeight="2rem"
>
<GlobalHeader />
</Box>
<Box flex="1 0 0">
<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
{children}
</Sentry.ErrorBoundary>
</Box>
<Box width="100%" marginTop="12">
<GlobalFooter />
</Box>
</Box>
);
}
export default PageLayout;