From 65af7ef64ce52df23360e10a067d1ecf2c4fcd34 Mon Sep 17 00:00:00 2001 From: Matchu Date: Wed, 5 May 2021 00:22:28 -0700 Subject: [PATCH] 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 --- src/app/HomePage.js | 8 +- src/app/PageLayout.js | 51 +-------- src/app/WardrobePage/ItemsAndSearchPanels.js | 102 ++++++++++-------- src/app/WardrobePage/WardrobePageLayout.js | 7 +- .../WardrobePreviewAndControls.js | 8 +- src/app/util.js | 69 +++++++++++- 6 files changed, 139 insertions(+), 106 deletions(-) diff --git a/src/app/HomePage.js b/src/app/HomePage.js index 99cbc6b..e6a9629 100644 --- a/src/app/HomePage.js +++ b/src/app/HomePage.js @@ -29,6 +29,7 @@ import { ErrorMessage, Heading1, Heading2, + TestErrorSender, useCommonStyles, useLocalStorage, usePageTitle, @@ -51,12 +52,6 @@ function HomePage() { const [previewState, setPreviewState] = React.useState(null); - React.useEffect(() => { - if (window.location.href.includes("send-test-error-for-sentry")) { - throw new Error("Test error for Sentry"); - } - }); - return ( Maybe we'll rename it to Impress 2021โ€ฆ or maybe not! ๐Ÿค” + ); } diff --git a/src/app/PageLayout.js b/src/app/PageLayout.js index 291b7d0..3e3bbc7 100644 --- a/src/app/PageLayout.js +++ b/src/app/PageLayout.js @@ -1,11 +1,9 @@ import React from "react"; -import { Box, Flex, Grid, Link } from "@chakra-ui/react"; +import { Box } 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"; +import { MajorErrorMessage } from "./util"; const GlobalHeader = loadable(() => import("./GlobalHeader")); const GlobalFooter = loadable(() => import("./GlobalFooter")); @@ -41,49 +39,4 @@ function PageLayout({ children }) { ); } -function MajorErrorMessage({ error }) { - return ( - - - - - - - Ah dang, I broke it ๐Ÿ˜– - - - There was an error displaying this page. I'll get info about it - automatically, but you can tell me more at{" "} - - matchu@openneo.net - - ! - - - - "{error.message}" - - - - ); -} - export default PageLayout; diff --git a/src/app/WardrobePage/ItemsAndSearchPanels.js b/src/app/WardrobePage/ItemsAndSearchPanels.js index 0b3657c..9eeb9af 100644 --- a/src/app/WardrobePage/ItemsAndSearchPanels.js +++ b/src/app/WardrobePage/ItemsAndSearchPanels.js @@ -1,5 +1,6 @@ import React from "react"; import { Box, Flex } from "@chakra-ui/react"; +import * as Sentry from "@sentry/react"; import ItemsPanel from "./ItemsPanel"; import SearchToolbar, { @@ -7,6 +8,7 @@ import SearchToolbar, { searchQueryIsEmpty, } from "./SearchToolbar"; import SearchPanel from "./SearchPanel"; +import { MajorErrorMessage, TestErrorSender } from "../util"; /** * ItemsAndSearchPanels manages the shared layout and state for: @@ -21,60 +23,68 @@ import SearchPanel from "./SearchPanel"; * performing some wiring to help them interact with each other via simple * state and refs. */ -function ItemsAndSearchPanels({ loading, outfitState, outfitSaving, dispatchToOutfit }) { +function ItemsAndSearchPanels({ + loading, + outfitState, + outfitSaving, + dispatchToOutfit, +}) { const [searchQuery, setSearchQuery] = React.useState(emptySearchQuery); const scrollContainerRef = React.useRef(); const searchQueryRef = React.useRef(); const firstSearchResultRef = React.useRef(); return ( - - - - - {!searchQueryIsEmpty(searchQuery) ? ( - - - - + + + + + - ) : ( - - - + {!searchQueryIsEmpty(searchQuery) ? ( + + + + - - )} - + ) : ( + + + + + + )} + + ); } diff --git a/src/app/WardrobePage/WardrobePageLayout.js b/src/app/WardrobePage/WardrobePageLayout.js index 65523ba..d06afad 100644 --- a/src/app/WardrobePage/WardrobePageLayout.js +++ b/src/app/WardrobePage/WardrobePageLayout.js @@ -32,7 +32,12 @@ function WardrobePageLayout({ previewAndControls, itemsAndSearch }) { height="100%" width="100%" > - + {previewAndControls} diff --git a/src/app/WardrobePage/WardrobePreviewAndControls.js b/src/app/WardrobePage/WardrobePreviewAndControls.js index a304dba..0190242 100644 --- a/src/app/WardrobePage/WardrobePreviewAndControls.js +++ b/src/app/WardrobePage/WardrobePreviewAndControls.js @@ -2,13 +2,14 @@ import React from "react"; import { Box, DarkMode } from "@chakra-ui/react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; +import * as Sentry from "@sentry/react"; import OutfitThumbnail, { outfitThumbnailFragment, getOutfitThumbnailRenderSize, } from "../components/OutfitThumbnail"; import { useOutfitPreview } from "../components/OutfitPreview"; -import { loadable } from "../util"; +import { loadable, MajorErrorMessage, TestErrorSender } from "../util"; const OutfitControls = loadable(() => import("./OutfitControls")); @@ -34,7 +35,8 @@ function WardrobePreviewAndControls({ }); return ( - <> + + {preview} @@ -46,7 +48,7 @@ function WardrobePreviewAndControls({ appearance={appearance} /> - + ); } diff --git a/src/app/util.js b/src/app/util.js index cc1c4ce..d9898b3 100644 --- a/src/app/util.js +++ b/src/app/util.js @@ -1,8 +1,19 @@ import React from "react"; -import { Box, Heading, useColorModeValue } from "@chakra-ui/react"; +import { + Box, + Flex, + Grid, + Heading, + Link, + useColorModeValue, +} from "@chakra-ui/react"; import loadableLibrary from "@loadable/component"; import * as Sentry from "@sentry/react"; +import ErrorGrundoImg from "./images/error-grundo.png"; +import ErrorGrundoImg2x from "./images/error-grundo@2x.png"; +import { WarningIcon } from "@chakra-ui/icons"; + /** * Delay hides its content at first, then shows it after the given delay. * @@ -375,3 +386,59 @@ export function logAndCapture(e) { console.error(e); Sentry.captureException(e); } + +export function MajorErrorMessage({ error }) { + return ( + + + + + + + Ah dang, I broke it ๐Ÿ˜– + + + There was an error displaying this page. I'll get info about it + automatically, but you can tell me more at{" "} + + matchu@openneo.net + + ! + + + + "{error.message}" + + + + ); +} + +export function TestErrorSender() { + React.useEffect(() => { + if (window.location.href.includes("send-test-error-for-sentry")) { + throw new Error("Test error for Sentry"); + } + }); + + return null; +}