chore: Centralize clientside logging

app/components/CollectionIcon.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import Collection from "~/models/Collection";
 import { icons } from "~/components/IconPicker";
 import useStores from "~/hooks/useStores";
+import Logger from "~/utils/logger";
 
 type Props = {
   collection: Collection;
@@ -36,7 +37,9 @@ function ResolvedCollectionIcon({
       const Component = icons[collection.icon].component;
       return <Component color={color} size={size} />;
     } catch (error) {
-      console.warn("Failed to render custom icon " + collection.icon);
+      Logger.warn("Failed to render custom icon", {
+        icon: collection.icon,
+      });
     }
   }
 

app/components/ErrorBoundary.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -11,6 +10,7 @@ import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
 import isHosted from "~/utils/isHosted";
+import Logger from "~/utils/logger";
 
 type Props = WithTranslation & {
   reloadOnChunkMissing?: boolean;
@@ -26,7 +26,6 @@ class ErrorBoundary extends React.Component<Props> {
 
   componentDidCatch(error: Error) {
     this.error = error;
-    console.error(error);
 
     if (
       this.props.reloadOnChunkMissing &&
@@ -40,9 +39,7 @@ class ErrorBoundary extends React.Component<Props> {
       return;
     }
 
-    if (env.SENTRY_DSN) {
-      Sentry.captureException(error);
-    }
+    Logger.error("ErrorBoundary", error);
   }
 
   handleReload = () => {