Remove Sentry from wardrobe JS

I haven't opened Sentry in a long time, and it's clogging up my Network
logs while debugging. Let's delete some telemetry!

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 (
 		<BrowserRouter>
 			<QueryClientProvider client={reactQueryClient}>
@@ -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

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 (
-		<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+		<ErrorBoundary>
 			<TestErrorSender />
 			<Flex direction="column" height="100%">
 				{isShowingSearchFooter && <Box height="2" />}
@@ -85,7 +84,7 @@ function ItemsAndSearchPanels({
 					</Box>
 				)}
 			</Flex>
-		</Sentry.ErrorBoundary>
+		</ErrorBoundary>
 	);
 }
 

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 (
-		<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+		<ErrorBoundary>
 			<TestErrorSender />
 			<Box>
 				<Box paddingX="4" paddingY="4">
@@ -73,7 +72,7 @@ function SearchFooter({ searchQuery, onChangeSearchQuery, outfitState }) {
 					</Box>
 				</Box>
 			</Box>
-		</Sentry.ErrorBoundary>
+		</ErrorBoundary>
 	);
 }
 

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 (
-		<Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+		<ErrorBoundary>
 			<TestErrorSender />
 			<Center position="absolute" top="0" bottom="0" left="0" right="0">
 				<DarkMode>{preview}</DarkMode>
@@ -46,7 +45,7 @@ function WardrobePreviewAndControls({
 					appearance={appearance}
 				/>
 			</Box>
-		</Sentry.ErrorBoundary>
+		</ErrorBoundary>
 	);
 }
 

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" }) {
 				<Box gridArea="description" marginBottom="2">
 					{variant === "unexpected" && (
 						<>
-							There was an error displaying this page. I'll get info about it
+							There was an error displaying this page. If it keeps happening,
-							automatically, but you can tell me more at{" "}
+							you can tell me more at{" "}
 							<Link href="mailto:matchu@openneo.net" color="green.400">
 								matchu@openneo.net
 							</Link>
@@ -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")) {
+		if (window.location.href.includes("send-test-error")) {
-			throw new Error("Test error for Sentry");
+			throw new Error("Test error for debugging <ErrorBoundary>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 <MajorErrorMessage error={this.state.error} />;
+		}
+
+		return this.props.children;
+	}
+}

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",

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"