OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Remove Sentry from wardrobe JS

Browse source 
I haven't opened Sentry in a long time, and it's clogging up my Network
logs while debugging. Let's delete some telemetry!
This commit is contained in:
Emi Matchu 2025-04-27 12:01:24 -07:00
parent 735ca6c07b
commit a72d043659
7 changed files with 37 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/javascript/wardrobe-2020/AppProvider.js
View file

@ -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

7
app/javascript/wardrobe-2020/WardrobePage/ItemsAndSearchPanels.js
View file

@ -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>
);
}

7
app/javascript/wardrobe-2020/WardrobePage/SearchFooter.js
View file

@ -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>
);
}

7
app/javascript/wardrobe-2020/WardrobePage/WardrobePreviewAndControls.js
View file

@ -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>
);
}

35
app/javascript/wardrobe-2020/util.js
View file

@ -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
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{" "}
<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")) {
throw new Error("Test error for Sentry");
if (window.location.href.includes("send-test-error")) {
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;
}
}

2
package.json
View file

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

96
yarn.lock
View file

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