Implement Sentry error logging for GUI (#1153)

Author: Eirenliel

.github/workflows/build-gui.yml

@@ -79,11 +79,15 @@ jobs:
           node-version-file: '.node-version'
           cache: 'pnpm'
 
+      - name: Install dependencies
+        shell: bash
+        run: pnpm i
+
       - name: Build
         shell: bash
-        run: |
-          pnpm i
-          pnpm run skipbundler --config $( ./gui/scripts/gitversion.mjs )
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm run skipbundler --config $( ./gui/scripts/gitversion.mjs )
 
       - if: matrix.os == 'windows-latest'
         name: Upload a Build Artifact (Windows)

.github/workflows/gradle.yaml

@@ -112,10 +112,13 @@ jobs:
           node-version-file: '.node-version'
           cache: 'pnpm'
 
-      - name: Build GUI
-        run: |
-          pnpm i
-          cd gui && pnpm run build
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: cd gui && pnpm run build
 
       - name: Build with Gradle
         run: ./gradlew :server:android:assembleDebug
@@ -191,10 +194,13 @@ jobs:
           node-version-file: '.node-version'
           cache: 'pnpm'
 
+      - name: Install dependencies
+        run: pnpm i
+
       - name: Build
-        run: |
-          pnpm i
-          pnpm run tauri build --config $( ./gui/scripts/gitversion.mjs )
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm run tauri build --config $( ./gui/scripts/gitversion.mjs )
 
       - name: Make GUI tarball
         run: |
@@ -266,11 +272,15 @@ jobs:
           node-version-file: '.node-version'
           cache: 'pnpm'
 
-      - name: Build
+      - name: Install dependencies
         run: |
           rustup target add x86_64-apple-darwin
           pnpm i
-          pnpm run tauri build --target universal-apple-darwin --config $( ./gui/scripts/gitversion.mjs )
+
+      - name: Build
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm run tauri build --target universal-apple-darwin --config $( ./gui/scripts/gitversion.mjs )
 
       - name: Modify Application
         run: |
@@ -338,11 +348,15 @@ jobs:
           node-version-file: '.node-version'
           cache: 'pnpm'
 
+      - name: Install dependencies
+        shell: bash
+        run: pnpm i
+
       - name: Build
         shell: bash
-        run: |
-          pnpm i
-          pnpm run skipbundler --config $( ./gui/scripts/gitversion.mjs )
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm run skipbundler --config $( ./gui/scripts/gitversion.mjs )
 
       - name: Bundle to zips
         shell: bash

gui/.gitignore

@@ -32,3 +32,6 @@ vite.config.ts.timestamp*
 
 # eslint
 .eslintcache
+
+# Sentry Config File
+.env.sentry-build-plugin

gui/package.json

@@ -11,6 +11,8 @@
     "@hookform/resolvers": "^3.6.0",
     "@react-three/drei": "^9.114.3",
     "@react-three/fiber": "^8.17.10",
+    "@sentry/react": "^9.9.0",
+    "@sentry/vite-plugin": "^2.22.7",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.48.0",
     "@tauri-apps/api": "^2.0.2",
@@ -91,7 +93,7 @@
     "spdx-satisfies": "^5.0.1",
     "tailwind-gradient-mask-image": "^1.2.0",
     "tailwindcss": "^3.4.13",
-    "vite": "^5.4.8",
-    "typescript-eslint": "^8.8.0"
+    "typescript-eslint": "^8.8.0",
+    "vite": "^5.4.8"
   }
-}
+}

gui/public/i18n/en/translation.ftl

@@ -359,6 +359,7 @@ settings-sidebar-utils = Utilities
 settings-sidebar-serial = Serial console
 settings-sidebar-appearance = Appearance
 settings-sidebar-notifications = Notifications
+settings-sidebar-behavior = Behavior
 settings-sidebar-firmware-tool = DIY Firmware Tool
 settings-sidebar-advanced = Advanced
 
@@ -531,9 +532,6 @@ settings-general-gesture_control-numberTrackersOverThreshold-description = Incre
 
 ## Appearance settings
 settings-interface-appearance = Appearance
-settings-general-interface-dev_mode = Developer Mode
-settings-general-interface-dev_mode-description = This mode can be useful if you need in-depth data or to interact with connected trackers on a more advanced level.
-settings-general-interface-dev_mode-label = Developer Mode
 settings-general-interface-theme = Color theme
 settings-general-interface-show-navbar-onboarding = Show "{ navbar-onboarding }" on navigation bar
 settings-general-interface-show-navbar-onboarding-description = This changes if the "{ navbar-onboarding }" button shows on the navigation bar.
@@ -565,6 +563,12 @@ settings-general-interface-feedback_sound-volume = Feedback sound volume
 settings-general-interface-connected_trackers_warning = Connected trackers warning
 settings-general-interface-connected_trackers_warning-description = This option will show a pop-up every time you try exiting SlimeVR while having one or more connected trackers. It reminds you to turn off your trackers when you are done to preserve battery life.
 settings-general-interface-connected_trackers_warning-label = Connected trackers warning on exit
+
+## Behavior settings
+settings-interface-behavior = Behavior
+settings-general-interface-dev_mode = Developer Mode
+settings-general-interface-dev_mode-description = This mode can be useful if you need in-depth data or to interact with connected trackers on a more advanced level.
+settings-general-interface-dev_mode-label = Developer Mode
 settings-general-interface-use_tray = Minimize to system tray
 settings-general-interface-use_tray-description = Lets you close the window without closing the SlimeVR Server so you can continue using it without having the GUI bothering you.
 settings-general-interface-use_tray-label = Minimize to system tray
@@ -576,6 +580,15 @@ settings-general-interface-discord_presence-message = { $amount ->
     [one] Using 1 tracker
     *[other] Using { $amount } trackers
 }
+settings-interface-behavior-error_tracking = Error collection via Sentry.io
+settings-interface-behavior-error_tracking-description =
+    To provide the best user experience, we collect anonymized error reports, performance metrics, and operating system information. This helps us detect bugs and issues with SlimeVR. These metrics are collected via Sentry.io.
+
+    <b>We do not collect personal information</b> such as your IP address or wireless credentials. SlimeVR values your privacy!
+
+    Do you consent to the collection of anonymized error data?
+
+settings-interface-behavior-error_tracking-label = Send errors to developers
 
 ## Serial settings
 settings-serial = Serial Console
@@ -1291,3 +1304,11 @@ unknown_device-modal-description = There is a new tracker with MAC address <b>{$
     Do you want to connect it to SlimeVR?
 unknown_device-modal-confirm = Sure!
 unknown_device-modal-forget = Ignore it
+
+## Error collection consent modal
+error_collection_modal-title = Can we collect errors?
+error_collection_modal-description = { settings-interface-behavior-error_tracking-description }
+
+    You can change this setting later in the Behavior section of the settings page.
+error_collection_modal-confirm = I agree
+error_collection_modal-cancel = I don't want to

gui/src/App.tsx

@@ -54,6 +54,7 @@ import { AppLayout } from './AppLayout';
 import { Preload } from './components/Preload';
 import { UnknownDeviceModal } from './components/UnknownDeviceModal';
 import { useDiscordPresence } from './hooks/discord-presence';
+import { withSentryReactRouterV6Routing } from '@sentry/react';
 import { ScaledProportionsPage } from './components/onboarding/pages/body-proportions/ScaledProportions';
 import { AdvancedSettings } from './components/settings/pages/AdvancedSettings';
 import { FirmwareUpdate } from './components/firmware-update/FirmwareUpdate';
@@ -64,6 +65,8 @@ export const VersionContext = createContext('');
 export const DOCS_SITE = 'https://docs.slimevr.dev';
 export const SLIMEVR_DISCORD = 'https://discord.gg/slimevr';
 
+const SentryRoutes = withSentryReactRouterV6Routing(Routes);
+
 function Layout() {
   const { isMobile } = useBreakpoint('mobile');
   useDiscordPresence();
@@ -73,7 +76,7 @@ function Layout() {
       <SerialDetectionModal></SerialDetectionModal>
       <VersionUpdateModal></VersionUpdateModal>
       <UnknownDeviceModal></UnknownDeviceModal>
-      <Routes>
+      <SentryRoutes>
         <Route element={<AppLayout />}>
           <Route
             path="/"
@@ -165,7 +168,7 @@ function Layout() {
           </Route>
           <Route path="*" element={<TopBar></TopBar>}></Route>
         </Route>
-      </Routes>
+      </SentryRoutes>
     </>
   );
 }

gui/src/AppLayout.tsx

@@ -1,13 +1,12 @@
 import { useLayoutEffect } from 'react';
 import { useConfig } from './hooks/config';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 export function AppLayout() {
-  const { loading, config } = useConfig();
-  const navigate = useNavigate();
+  const { config } = useConfig();
 
   useLayoutEffect(() => {
-    if (loading || !config) return;
+    if (!config) return;
     if (config.theme !== undefined) {
       document.documentElement.dataset.theme = config.theme;
     }
@@ -25,23 +24,7 @@ export function AppLayout() {
         `${config.textSize}rem`
       );
     }
-  }, [config, loading]);
-
-  useLayoutEffect(() => {
-    if (config && !config.doneOnboarding) {
-      navigate('/onboarding/home');
-    }
-  }, [config?.doneOnboarding]);
-
-  // const location = useLocation();
-  // const navigationType = useNavigationType();
-  // useEffect(() => {
-  //   if (import.meta.env.PROD) return;
-  //   console.log('The current URL is', { ...location });
-  //   console.log('The last navigation action was', navigationType);
-  // }, [location, navigationType]);
-
-  if (loading) return <></>;
+  }, [config]);
 
   return (
     <>

gui/src/components/ErrorConsentModal.tsx

@@ -0,0 +1,57 @@
+import { Localized, useLocalization } from '@fluent/react';
+import { BaseModal } from './commons/BaseModal';
+import { Button } from './commons/Button';
+import { Typography } from './commons/Typography';
+
+export function ErrorConsentModal({
+  isOpen = true,
+  cancel,
+  accept,
+}: {
+  /**
+   * Is the parent/sibling component opened?
+   */
+  isOpen: boolean;
+  /**
+   * Function to trigger when you still want to close the app
+   */
+  accept: () => void;
+  /**
+   * Function to trigger when cancelling app close
+   */
+  cancel?: () => void;
+}) {
+  const { l10n } = useLocalization();
+
+  return (
+    <BaseModal isOpen={isOpen} onRequestClose={cancel} closeable={false}>
+      <div className="flex flex-col gap-3">
+        <>
+          <div className="flex flex-col items-center gap-3 fill-accent-background-20">
+            <div className="flex flex-col items-center gap-2 max-w-[512px]">
+              <Typography variant="main-title">
+                {l10n.getString('error_collection_modal-title')}
+              </Typography>
+              <Localized
+                id={'error_collection_modal-description'}
+                elems={{ b: <b></b> }}
+              >
+                <Typography
+                  variant="standard"
+                  whitespace="whitespace-pre-line"
+                />
+              </Localized>
+            </div>
+          </div>
+
+          <Button variant="primary" onClick={accept}>
+            {l10n.getString('error_collection_modal-confirm')}
+          </Button>
+          <Button variant="tertiary" onClick={cancel}>
+            {l10n.getString('error_collection_modal-cancel')}
+          </Button>
+        </>
+      </div>
+    </BaseModal>
+  );
+}

gui/src/components/SerialDetectionModal.tsx

@@ -110,7 +110,7 @@ export function SerialDetectionModal() {
                 {l10n.getString('serial_detection-new_device-p1')}
               </Typography>
             </div>
-            <div className="flex flex-col gap-3 rounded-xl max-w-sm">
+            <div className="flex flex-col gap-3 rounded-xl max-w-sm sentry-mask">
               <Localized
                 id="onboarding-wifi_creds-ssid"
                 attrs={{ placeholder: true, label: true }}

gui/src/components/TopBar.tsx

@@ -29,6 +29,7 @@ import { TrayOrExitModal } from './TrayOrExitModal';
 import { error } from '@/utils/logging';
 import { useDoubleTap } from 'use-double-tap';
 import { isTrayAvailable } from '@/utils/tauri';
+import { ErrorConsentModal } from './ErrorConsentModal';
 import {
   CloseRequestedEvent,
   getCurrentWindow,
@@ -333,6 +334,11 @@ export function TopBar({
           getCurrentWindow().requestUserAttention(null);
         }}
       ></TrackersStillOnModal>
+      <ErrorConsentModal
+        isOpen={config?.errorTracking === null}
+        accept={() => setConfig({ errorTracking: true })}
+        cancel={() => setConfig({ errorTracking: false })}
+      />
     </>
   );
 }

gui/src/components/commons/BaseModal.tsx

@@ -5,17 +5,19 @@ import ReactModal from 'react-modal';
 export function BaseModal({
   children,
   important = false,
+  closeable = true,
   ...props
 }: {
   isOpen: boolean;
   children: ReactNode;
   important?: boolean;
+  closeable?: boolean;
 } & ReactModal.Props) {
   return (
     <ReactModal
       {...props}
-      shouldCloseOnOverlayClick
-      shouldCloseOnEsc
+      shouldCloseOnOverlayClick={closeable}
+      shouldCloseOnEsc={closeable}
       overlayClassName={
         props.overlayClassName ||
         classNames(

gui/src/components/commons/Input.tsx

@@ -87,7 +87,9 @@ export const InputInside = forwardRef<
       <div className="relative w-full">
         <input
           type={forceText ? 'text' : type}
-          className={classNames(classes, { 'pr-10': type === 'password' })}
+          className={classNames(classes, {
+            'pr-10 sentry-mask': type === 'password',
+          })}
           placeholder={placeholder || undefined}
           autoComplete={autocomplete ? 'off' : 'on'}
           onChange={onChange}

gui/src/components/commons/Typography.tsx

@@ -11,6 +11,7 @@ export function Typography({
   italic = false,
   truncate = false,
   textAlign,
+  sentryMask = false,
 }: {
   variant?:
     | 'main-title'
@@ -37,6 +38,7 @@ export function Typography({
     | 'text-start'
     | 'text-end';
   children?: ReactNode;
+  sentryMask?: boolean;
 }) {
   const tag = useMemo(() => {
     const tags = {
@@ -72,6 +74,7 @@ export function Typography({
         truncate && 'leading-3 text-ellipsis',
         truncate && (config?.textSize ?? 12) > 12 && 'line-clamp-1',
         truncate && (config?.textSize ?? 12) <= 12 && 'line-clamp-2',
+        sentryMask && 'sentry-mask',
       ]),
     },
     children || []