feat: add sentry's react router integration

Author: suemor233

src/renderer/src/components/common/ErrorView.tsx

@@ -1,4 +1,6 @@
 import { tipcClient } from '@renderer/lib/client'
+import * as Sentry from '@sentry/react'
+import { useEffect } from 'react'
 import { useRouteError } from 'react-router'
 
 import { Button } from '../ui/button'
@@ -7,6 +9,9 @@ export default function ErrorView() {
   const error = useRouteError() as { statusText: string; message: string }
   console.error(error)
 
+  useEffect(() => {
+    Sentry.captureException(error)
+  }, [error])
   return (
     <div className="flex h-screen flex-col items-center justify-center gap-5">
       <p className="text-xl">糟糕发生错误了😭</p>

src/renderer/src/initialize/sentry.ts

@@ -1,13 +1,28 @@
 import { API_URL, isDev, SENTRY_DSN } from '@renderer/lib/env'
 import * as Sentry from '@sentry/react'
+import { useEffect } from 'react'
+import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router'
 
 export const initializeSentry = () => {
   if (isDev) {
     return
   }
   Sentry.init({
     dsn: SENTRY_DSN,
-    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+    integrations: [
+      Sentry.reactRouterV7BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes,
+      }),
+      Sentry.replayIntegration({
+        // NOTE: This will disable built-in masking. Only use this if your site has no sensitive data, or if you've already set up other options for masking or blocking relevant data, such as 'ignore', 'block', 'mask' and 'maskFn'.
+        maskAllText: false,
+        blockAllMedia: false,
+      }),
+    ],
     // Tracing
     tracesSampleRate: 1, //  Capture 100% of the transactions
     // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled