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 99cbc6bc..e6a96297 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 291b7d03..3e3bbc78 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 0b3657c0..9eeb9af1 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 65523baa..d06afad5 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 a304dbaa..01902428 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 cc1c4cef..d9898b35 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; +}