Upgrade Sentry, react-router-dom and setup tracing

apps/pwa/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pwa",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "author": "Horus Lugo <[email protected]>",
   "license": "MIT",
   "private": true,
@@ -16,8 +16,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@sentry/react": "^7.33.0",
-    "@sentry/tracing": "^7.33.0",
+    "@sentry/react": "^8.45.0",
     "animejs": "^3.2.1",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
@@ -33,7 +32,7 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-hyper-scroller": "^3.1.0-beta.2",
-    "react-router-dom": "^6.14.2",
+    "react-router-dom": "6.28.0",
     "react-zoom-pan-pinch": "^3.0.7",
     "workbox-precaching": "^6.5.4",
     "zustand": "^4.3.2"

apps/pwa/src/services/sentry.tsx

@@ -1,6 +1,12 @@
 import { BRANCH, COMMIT_HASH } from "@/constants";
 import * as SentrySDK from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
+import { useEffect } from "react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router-dom";
 
 export function initSentry() {
   if (import.meta.env.DEV) {
@@ -11,7 +17,16 @@ export function initSentry() {
     dsn:
       "https://[email protected]/5638124",
     tunnel: "/api/sentry",
-    integrations: [new Integrations.BrowserTracing()],
+    integrations: [
+      SentrySDK.browserTracingIntegration(),
+      SentrySDK.reactRouterV6BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+    ],
     // We recommend adjusting this value in production, or using tracesSampler
     // for finer control
     tracesSampleRate: 1.0,