IO-3162 Sentry package upgrades and refactors.

client/src/graphql/apollo-error-handling.js

@@ -6,7 +6,6 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
   if (graphQLErrors) {
     graphQLErrors.forEach(({ message, locations, path }) => {
       console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
-      Sentry.captureException({ message, locations, path });
     });
   }
   if (networkError) console.log(`[Network error]: ${JSON.stringify(networkError)}`);

client/src/index.jsx

@@ -1,10 +1,12 @@
+import "./utils/sentry"; //Must be first.
 import * as Sentry from "@sentry/react";
+import { ConfigProvider } from "antd";
 import Dinero from "dinero.js";
-import React from "react";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
+import { registerSW } from "virtual:pwa-register";
 import AppContainer from "./App/App.container";
 import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";
 import "./index.css";
@@ -12,56 +14,18 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
-import { ConfigProvider } from "antd";
-import InstanceRenderManager from "./utils/instanceRenderMgr";
-import { registerSW } from "virtual:pwa-register";
 
 window.global ||= window;
 
 registerSW({ immediate: true });
-//import { BrowserTracing } from "@sentry/tracing";
-//import "antd/dist/antd.css";
-// import "antd/dist/antd.less";
 
 // Dinero.defaultCurrency = "CAD";
 // Dinero.globalLocale = "en-CA";
 Dinero.globalRoundingMode = "HALF_EVEN";
 
-if (import.meta.env.PROD) {
-  Sentry.init({
-    dsn: InstanceRenderManager({
-      imex: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
-      rome: "https://a6acc91c073e414196014b8484627a61@o492140.ingest.sentry.io/4504561071161344"
-    }),
+const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
 
-    ignoreErrors: [
-      "ResizeObserver loop",
-      "ResizeObserver loop limit exceeded",
-      "Module specifier, 'fs' does not start",
-      "Module specifier, 'zlib' does not start with"
-    ],
-    integrations: [
-      Sentry.replayIntegration({
-        maskAllText: false,
-        blockAllMedia: true
-      }),
-      Sentry.browserTracingIntegration()
-    ],
-    tracePropagationTargets: [
-      "api.imex.online",
-      "api.test.imex.online",
-      "db.imex.online",
-      "api.romeonline.io",
-      "api.test.romeonline.io",
-      "db.romeonline.io"
-    ],
-    tracesSampleRate: 1.0,
-    replaysOnErrorSampleRate: 1.0,
-    environment: import.meta.env.MODE
-  });
-}
-
-const router = createBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />));
+const router = sentryCreateBrowserRouter(createRoutesFromElements(<Route path="*" element={<AppContainer />} />));
 
 if (import.meta.env.DEV) {
   let styles =

client/src/pages/manage/manage.page.component.jsx

@@ -142,7 +142,7 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
         const fetchedAlerts = await response.json();
         setAlerts(fetchedAlerts);
       } catch (error) {
-        console.error("Error fetching alerts:", error);
+        console.warn("Error fetching alerts:", error.message);
       }
     };
 

client/src/redux/user/user.sagas.js

@@ -351,7 +351,7 @@ export function* SetAuthLevelFromShopDetails({ payload }) {
         ? window.$crisp.push(["set", "session:segments", [["allAccess"]]])
         : window.$crisp.push(["set", "session:segments", [["basic"]]]);
     } catch (error) {
-      console.error("Couldnt find $crisp.");
+      console.warn("Couldnt find $crisp.", error.message);
     }
   } catch (error) {
     yield put(signInFailure(error.message));

client/src/utils/sentry.js

@@ -0,0 +1,60 @@
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
+import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from "react-router-dom";
+import InstanceRenderManager from "./instanceRenderMgr";
+
+//if (import.meta.env.PROD) {
+Sentry.init({
+  dsn: InstanceRenderManager({
+    imex: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
+    rome: "https://a6acc91c073e414196014b8484627a61@o492140.ingest.sentry.io/4504561071161344"
+  }),
+
+  ignoreErrors: [
+    "ResizeObserver loop",
+    "ResizeObserver loop limit exceeded",
+    "Module specifier, 'fs' does not start",
+    "Module specifier, 'zlib' does not start with",
+    "Messaging: This browser doesn't support the API's required to use the Firebase SDK.",
+    "Failed to update a ServiceWorker for scope"
+  ],
+  integrations: [
+    // See docs for support of different versions of variation of react router
+    // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes
+    }),
+    Sentry.replayIntegration()
+  ],
+  //   integrations: [
+  //     Sentry.reactRouterV6BrowserTracingIntegration({
+  //       useEffect,
+  //       useLocation,
+  //       useNavigationType,
+  //       createRoutesFromChildren,
+  //       matchRoutes
+  //     }),
+  //     Sentry.replayIntegration({
+  //       maskAllText: false,
+  //       blockAllMedia: true
+  //     }),
+  //     Sentry.browserTracingIntegration()
+  //   ],
+  tracePropagationTargets: [
+    "api.imex.online",
+    "api.test.imex.online",
+    "db.imex.online",
+    "api.romeonline.io",
+    "api.test.romeonline.io",
+    "db.romeonline.io"
+  ],
+  tracesSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  environment: import.meta.env.MODE,
+  //debug: import.meta.env.DEV
+});
+//}