diff --git a/app/javascript/wardrobe-2020/AppProvider.js b/app/javascript/wardrobe-2020/AppProvider.js index a351982c..e5af1ff2 100644 --- a/app/javascript/wardrobe-2020/AppProvider.js +++ b/app/javascript/wardrobe-2020/AppProvider.js @@ -1,6 +1,4 @@ import React from "react"; -import * as Sentry from "@sentry/react"; -import { Integrations } from "@sentry/tracing"; import { ChakraProvider, Box, @@ -43,8 +41,6 @@ const globalStyles = theme.styles.global; theme.styles.global = {}; export default function AppProvider({ children }) { - React.useEffect(() => setupLogging(), []); - return ( @@ -58,47 +54,6 @@ export default function AppProvider({ children }) { ); } -function setupLogging() { - Sentry.init({ - dsn: "https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379", - autoSessionTracking: true, - integrations: [ - new Integrations.BrowserTracing({ - beforeNavigate: (context) => ({ - ...context, - // Assume any path segment starting with a digit is an ID, and replace - // it with `:id`. This will help group related routes in Sentry stats. - // NOTE: I'm a bit uncertain about the timing on this for tracking - // client-side navs... but we now only track first-time - // pageloads, and it definitely works correctly for them! - name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"), - }), - - // We have a _lot_ of location changes that don't actually signify useful - // navigations, like in the wardrobe page. It could be useful to trace - // them with better filtering someday, but frankly we don't use the perf - // features besides Web Vitals right now, and those only get tracked on - // first-time pageloads, anyway. So, don't track client-side navs! - startTransactionOnLocationChange: false, - }), - ], - denyUrls: [ - // Don't log errors that were probably triggered by extensions and not by - // our own app. (Apparently Sentry's setting to ignore browser extension - // errors doesn't do this anywhere near as consistently as I'd expect?) - // - // Adapted from https://gist.github.com/impressiver/5092952, as linked in - // https://docs.sentry.io/platforms/javascript/configuration/filtering/. - /^chrome-extension:\/\//, - /^moz-extension:\/\//, - ], - - // Since we're only tracking first-page loads and not navigations, 100% - // sampling isn't actually so much! Tune down if it becomes a problem, tho. - tracesSampleRate: 1.0, - }); -} - /** * ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its * children (or, well, any element with the chakra-css-reset class). It also diff --git a/app/javascript/wardrobe-2020/WardrobePage/ItemsAndSearchPanels.js b/app/javascript/wardrobe-2020/WardrobePage/ItemsAndSearchPanels.js index 881ed06d..a0ce4126 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/ItemsAndSearchPanels.js +++ b/app/javascript/wardrobe-2020/WardrobePage/ItemsAndSearchPanels.js @@ -1,11 +1,10 @@ import React from "react"; import { Box, Flex, useBreakpointValue } from "@chakra-ui/react"; -import * as Sentry from "@sentry/react"; import ItemsPanel from "./ItemsPanel"; import SearchToolbar, { searchQueryIsEmpty } from "./SearchToolbar"; import SearchPanel from "./SearchPanel"; -import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util"; +import { ErrorBoundary, TestErrorSender, useLocalStorage } from "../util"; /** * ItemsAndSearchPanels manages the shared layout and state for: @@ -40,7 +39,7 @@ function ItemsAndSearchPanels({ const isShowingSearchFooter = canUseSearchFooter && hasRoomForSearchFooter; return ( - + {isShowingSearchFooter && } @@ -85,7 +84,7 @@ function ItemsAndSearchPanels({ )} - + ); } diff --git a/app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js b/app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js index acd9d1ac..f1b6479a 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js +++ b/app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js @@ -1,8 +1,7 @@ import React from "react"; -import * as Sentry from "@sentry/react"; import { Box, Flex } from "@chakra-ui/react"; import SearchToolbar from "./SearchToolbar"; -import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util"; +import { ErrorBoundary, TestErrorSender, useLocalStorage } from "../util"; import PaginationToolbar from "../components/PaginationToolbar"; import { useSearchResults } from "./useSearchResults"; @@ -34,7 +33,7 @@ function SearchFooter({ searchQuery, onChangeSearchQuery, outfitState }) { } return ( - + @@ -73,7 +72,7 @@ function SearchFooter({ searchQuery, onChangeSearchQuery, outfitState }) { - + ); } diff --git a/app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js b/app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js index 2ee5e10a..a2ba89f6 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js +++ b/app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js @@ -2,11 +2,10 @@ import React from "react"; import { Box, Center, DarkMode } from "@chakra-ui/react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; -import * as Sentry from "@sentry/react"; import OutfitThumbnail from "../components/OutfitThumbnail"; import { useOutfitPreview } from "../components/OutfitPreview"; -import { loadable, MajorErrorMessage, TestErrorSender } from "../util"; +import { loadable, ErrorBoundary, TestErrorSender } from "../util"; const OutfitControls = loadable(() => import("./OutfitControls")); @@ -33,7 +32,7 @@ function WardrobePreviewAndControls({ }); return ( - +
{preview} @@ -46,7 +45,7 @@ function WardrobePreviewAndControls({ appearance={appearance} /> - + ); } diff --git a/app/javascript/wardrobe-2020/util.js b/app/javascript/wardrobe-2020/util.js index 419e3202..b543bb58 100644 --- a/app/javascript/wardrobe-2020/util.js +++ b/app/javascript/wardrobe-2020/util.js @@ -8,7 +8,6 @@ import { useColorModeValue, } from "@chakra-ui/react"; import loadableLibrary from "@loadable/component"; -import * as Sentry from "@sentry/react"; import { WarningIcon } from "@chakra-ui/icons"; import { buildImpress2020Url } from "./impress-2020-config"; @@ -414,14 +413,17 @@ export function loadable(load, options) { } /** - * logAndCapture will print an error to the console, and send it to Sentry. + * logAndCapture will print an error to the console. + * + * NOTE: Previously, this would log to Sentry, but we actually just don't log + * JS errors anymore, because we haven't done in-depth JS debugging in a + * while. * * This is useful when there's a graceful recovery path, but it's still a * genuinely unexpected error worth logging. */ export function logAndCapture(e) { console.error(e); - Sentry.captureException(e); } export function getGraphQLErrorMessage(error) { @@ -475,8 +477,8 @@ export function MajorErrorMessage({ error = null, variant = "unexpected" }) { {variant === "unexpected" && ( <> - There was an error displaying this page. I'll get info about it - automatically, but you can tell me more at{" "} + There was an error displaying this page. If it keeps happening, + you can tell me more at{" "} matchu@openneo.net @@ -523,10 +525,29 @@ export function MajorErrorMessage({ error = null, variant = "unexpected" }) { export function TestErrorSender() { React.useEffect(() => { - if (window.location.href.includes("send-test-error-for-sentry")) { - throw new Error("Test error for Sentry"); + if (window.location.href.includes("send-test-error")) { + throw new Error("Test error for debugging s"); } }); return null; } + +export class ErrorBoundary extends React.Component { + constructor(props) { + super(props); + this.state = { error: null }; + } + + static getDerivedStateFromError(error) { + return { error }; + } + + render() { + if (this.state.error != null) { + return ; + } + + return this.props.children; + } +} diff --git a/package.json b/package.json index 4018623c..db1ecf94 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,6 @@ "@emotion/styled": "^11.0.0", "@hotwired/turbo-rails": "^8.0.4", "@loadable/component": "^5.12.0", - "@sentry/react": "^5.30.0", - "@sentry/tracing": "^5.30.0", "@tanstack/react-query": "^5.4.3", "apollo-link-persisted-queries": "^0.2.2", "easeljs": "^1.0.2", diff --git a/yarn.lock b/yarn.lock index 388d8158..d6b99ee3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1477,100 +1477,6 @@ __metadata: languageName: node linkType: hard -"@sentry/browser@npm:5.30.0": - version: 5.30.0 - resolution: "@sentry/browser@npm:5.30.0" - dependencies: - "@sentry/core": "npm:5.30.0" - "@sentry/types": "npm:5.30.0" - "@sentry/utils": "npm:5.30.0" - tslib: "npm:^1.9.3" - checksum: 10c0/6793e1b49a8cdb1f025115bcc591bf67c97b6515f62a33ffcbb7b1ab66e459ebc471797d02e471be1ebf14092b56eb25ed914f043962388cc224bc961e334a17 - languageName: node - linkType: hard - -"@sentry/core@npm:5.30.0": - version: 5.30.0 - resolution: "@sentry/core@npm:5.30.0" - dependencies: - "@sentry/hub": "npm:5.30.0" - "@sentry/minimal": "npm:5.30.0" - "@sentry/types": "npm:5.30.0" - "@sentry/utils": "npm:5.30.0" - tslib: "npm:^1.9.3" - checksum: 10c0/6407b9c2a6a56f90c198f5714b3257df24d89d1b4ca6726bd44760d0adabc25798b69fef2c88ccea461c7e79e3c78861aaebfd51fd3cb892aee656c3f7e11801 - languageName: node - linkType: hard - -"@sentry/hub@npm:5.30.0": - version: 5.30.0 - resolution: "@sentry/hub@npm:5.30.0" - dependencies: - "@sentry/types": "npm:5.30.0" - "@sentry/utils": "npm:5.30.0" - tslib: "npm:^1.9.3" - checksum: 10c0/386c91d06aa44be0465fc11330d748a113e464d41cd562a9e1d222a682cbcb14e697a3e640953e7a0239997ad8a02b223a0df3d9e1d8816cb823fd3613be3e2f - languageName: node - linkType: hard - -"@sentry/minimal@npm:5.30.0": - version: 5.30.0 - resolution: "@sentry/minimal@npm:5.30.0" - dependencies: - "@sentry/hub": "npm:5.30.0" - "@sentry/types": "npm:5.30.0" - tslib: "npm:^1.9.3" - checksum: 10c0/34ec05503de46d01f98c94701475d5d89cc044892c86ccce30e01f62f28344eb23b718e7cf573815e46f30a4ac9da3129bed9b3d20c822938acfb40cbe72437b - languageName: node - linkType: hard - -"@sentry/react@npm:^5.30.0": - version: 5.30.0 - resolution: "@sentry/react@npm:5.30.0" - dependencies: - "@sentry/browser": "npm:5.30.0" - "@sentry/minimal": "npm:5.30.0" - "@sentry/types": "npm:5.30.0" - "@sentry/utils": "npm:5.30.0" - hoist-non-react-statics: "npm:^3.3.2" - tslib: "npm:^1.9.3" - peerDependencies: - react: 15.x || 16.x || 17.x - react-dom: 15.x || 16.x || 17.x - checksum: 10c0/2a80eb40038ac3d9b2ff9346cfecb39a248a14fedfc45ca5f32a4194620ea6dccf9f53ccc43c6d151687178e4741f80e4218c5e0ac66e174c341088a30517abf - languageName: node - linkType: hard - -"@sentry/tracing@npm:^5.30.0": - version: 5.30.0 - resolution: "@sentry/tracing@npm:5.30.0" - dependencies: - "@sentry/hub": "npm:5.30.0" - "@sentry/minimal": "npm:5.30.0" - "@sentry/types": "npm:5.30.0" - "@sentry/utils": "npm:5.30.0" - tslib: "npm:^1.9.3" - checksum: 10c0/46830265bc54a3203d7d9f0d8d9f2f7d9d2c6a977e07ccdae317fa3ea29c388b904b3bef28f7a0ba9c074845d67feab63c6d3c0ddce9aeb275b6c966253fb415 - languageName: node - linkType: hard - -"@sentry/types@npm:5.30.0": - version: 5.30.0 - resolution: "@sentry/types@npm:5.30.0" - checksum: 10c0/99c6e55c0a82c8ca95be2e9dbb35f581b29e4ff7af74b23bc62b690de4e35febfa15868184a2303480ef86babd4fea5273cf3b5ddf4a27685b841a72f13a0c88 - languageName: node - linkType: hard - -"@sentry/utils@npm:5.30.0": - version: 5.30.0 - resolution: "@sentry/utils@npm:5.30.0" - dependencies: - "@sentry/types": "npm:5.30.0" - tslib: "npm:^1.9.3" - checksum: 10c0/ca8eebfea7ac7db6d16f6c0b8a66ac62587df12a79ce9d0d8393f4d69880bb8d40d438f9810f7fb107a9880fe0d68bbf797b89cbafd113e89a0829eb06b205f8 - languageName: node - linkType: hard - "@tanstack/query-core@npm:5.32.1": version: 5.32.1 resolution: "@tanstack/query-core@npm:5.32.1" @@ -3557,8 +3463,6 @@ __metadata: "@emotion/styled": "npm:^11.0.0" "@hotwired/turbo-rails": "npm:^8.0.4" "@loadable/component": "npm:^5.12.0" - "@sentry/react": "npm:^5.30.0" - "@sentry/tracing": "npm:^5.30.0" "@tanstack/react-query": "npm:^5.4.3" "@typescript-eslint/eslint-plugin": "npm:^7.8.0" "@typescript-eslint/parser": "npm:^7.8.0"