More sentry metrics

gui/package.json

@@ -12,7 +12,7 @@
     "@react-hookz/deep-equal": "^3.0.3",
     "@react-three/drei": "^9.114.3",
     "@react-three/fiber": "^8.17.10",
-    "@sentry/react": "^10.29.0",
+    "@sentry/react": "10.29.0",
     "@sentry/vite-plugin": "^2.22.7",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/react-query": "^5.48.0",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@dword-design/eslint-plugin-import-alias": "^4.0.9",
-    "@openapi-codegen/cli": "^2.0.2",
+    "@openapi-codegen/cli": "^3.1.0",
     "@openapi-codegen/typescript": "^8.0.2",
     "@stylistic/eslint-plugin": "^5.5.0",
     "@tailwindcss/forms": "^0.5.9",
@@ -84,19 +84,18 @@
     "@types/react-modal": "3.16.3",
     "@types/semver": "^7.5.8",
     "@types/three": "^0.163.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
-    "eslint": "^9.39.0",
-    "eslint-config-airbnb": "^19.0.4",
+    "eslint": "^9.39.1",
     "eslint-import-resolver-typescript": "^3.10.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^15.10.0",
     "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",

gui/src/components/commons/Button.tsx

@@ -107,7 +107,14 @@ export function Button({
       to={to}
       className={classes}
       state={state}
-      onClick={(ev) => disabled && ev.preventDefault()}
+      onClick={(ev) => {
+        if (disabled) {
+          ev.preventDefault()
+          return;
+        }
+        if (props.onClick)
+          return props.onClick(ev as any)
+      }}
     >
       <ButtonContent icon={icon} loading={loading}>
         {id && (

gui/src/components/onboarding/pages/body-proportions/ScaledProportions.tsx

@@ -35,6 +35,7 @@ import { ProgressBar } from '@/components/commons/ProgressBar';
 import { useBreakpoint } from '@/hooks/breakpoint';
 import { useConfig } from '@/hooks/config';
 import { ProportionsResetModal } from './ProportionsResetModal';
+import * as Sentry from '@sentry/react'
 
 const statusSteps = [
   // Order matters be carefull
@@ -237,6 +238,7 @@ function UserHeightStatus({
 export function ScaledProportionsPage() {
   const [hmdHeight, setHmdHeight] = useState(0);
   const [tmpHeight, setTmpHeight] = useState(0);
+  const [lastUsed, setLastUsed] = useState<'manual' | 'auto' | null>(null)
   const { config, setConfig } = useConfig();
   const { applyProgress, state } = useOnboarding();
 
@@ -297,6 +299,7 @@ export function ScaledProportionsPage() {
       new SkeletonResetAllRequestT()
     );
     setConfig({ lastUsedProportions: 'scaled' });
+    setLastUsed('manual')
   };
 
   useRPCPacket(
@@ -311,6 +314,7 @@ export function ScaledProportionsPage() {
 
       if (res.status === UserHeightCalibrationStatus.DONE) {
         setConfig({ lastUsedProportions: 'scaled' });
+        setLastUsed('auto')
       }
     }
   );
@@ -330,6 +334,9 @@ export function ScaledProportionsPage() {
 
     return () => {
       cancel();
+      if (lastUsed !== null) {
+        Sentry.metrics.count('scaled_proportions', 1, { attributes: { calibration: lastUsed } })
+      }
     };
   }, []);
 

gui/src/components/onboarding/pages/mounting/MountingChoose.tsx

@@ -5,6 +5,7 @@ import { SkipSetupWarningModal } from '@/components/onboarding/SkipSetupWarningM
 import classNames from 'classnames';
 import { Typography } from '@/components/commons/Typography';
 import { Button } from '@/components/commons/Button';
+import * as Sentry from '@sentry/react'
 
 export function MountingChoose() {
   const { l10n } = useLocalization();
@@ -66,6 +67,9 @@ export function MountingChoose() {
                   variant="primary"
                   to={'/onboarding/mounting/auto'}
                   className="self-start mt-auto"
+                  onClick={() => {
+                    Sentry.metrics.count('mounting_choose', 1, { attributes: { choose: 'auto' } })
+                  }}
                   state={{ alonePage: state.alonePage }}
                 >
                   {l10n.getString('onboarding-manual_mounting-auto_mounting')}
@@ -111,6 +115,9 @@ export function MountingChoose() {
                   to="/onboarding/mounting/manual"
                   className="self-start mt-auto"
                   state={{ alonePage: state.alonePage }}
+                  onClick={() => {
+                    Sentry.metrics.count('mounting_choose', 1, { attributes: { choose: 'manual' } })
+                  }}
                 >
                   {l10n.getString(
                     'onboarding-automatic_mounting-manual_mounting'

gui/src/components/settings/pages/HomeScreenSettings.tsx

@@ -16,6 +16,7 @@ import classNames from 'classnames';
 import { ReactNode, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { TrackingChecklistStepId } from 'solarxr-protocol';
+import * as Sentry from '@sentry/react'
 
 type StepsForm = { steps: Record<TrackingChecklistStepId, boolean> };
 export function TrackingChecklistSettings({
@@ -133,8 +134,10 @@ export function LayoutSelector({
 export function HomeLayoutSettings() {
   const { config, setConfig } = useConfig();
 
-  const setLayout = (layout: Config['homeLayout']) =>
+  const setLayout = (layout: Config['homeLayout']) => {
     setConfig({ homeLayout: layout });
+    Sentry.metrics.count('change_layout', 1, { attributes: { layout } })
+  }
 
   return (
     <div className="flex flex-col gap-2">

gui/src/hooks/autobone.ts

@@ -13,6 +13,7 @@ import { useWebsocketAPI } from './websocket-api';
 import { useLocalization } from '@fluent/react';
 import { log } from '@/utils/logging';
 import { useConfig } from './config';
+import * as Sentry from '@sentry/react'
 
 export enum ProcessStatus {
   PENDING,
@@ -81,6 +82,7 @@ export function useProvideAutobone(): AutoboneContext {
   const applyProcessing = () => {
     sendRPCPacket(RpcMessage.AutoBoneApplyRequest, new AutoBoneApplyRequestT());
     setConfig({ lastUsedProportions: 'autobone' });
+    Sentry.metrics.count('autobone', 1);
   };
 
   useRPCPacket(

gui/src/hooks/manual-proportions.ts

@@ -8,6 +8,8 @@ import {
 import { useWebsocketAPI } from './websocket-api';
 import { useEffect, useMemo, useState } from 'react';
 import { useConfig } from './config';
+import * as Sentry from '@sentry/react'
+
 
 type LabelBase = {
   value: number;
@@ -193,6 +195,7 @@ export function useManualProportions({ type }: { type: 'linear' | 'ratio' }): {
       }
       sendRPCPacket(RpcMessage.SkeletonConfigRequest, new SkeletonConfigRequestT());
       setConfig({ lastUsedProportions: 'manual' });
+      Sentry.metrics.count('manual_proportions_change', 1, { attributes: params })
     },
   };
 }

gui/src/hooks/reset.ts

@@ -12,6 +12,7 @@ import { useAtomValue } from 'jotai';
 import { assignedTrackersAtom, serverGuardsAtom } from '@/store/app-store';
 import { FEET_BODY_PARTS, FINGER_BODY_PARTS } from './body-parts';
 import { useLocaleConfig } from '@/i18n/config';
+import * as Sentry from '@sentry/react'
 
 export type ResetBtnStatus = 'idle' | 'counting' | 'finished';
 
@@ -45,8 +46,11 @@ export function useReset(options: UseResetOptions, onReseted?: () => void) {
     req.resetType = options.type;
     req.bodyParts = parts;
     sendRPCPacket(RpcMessage.ResetRequest, req);
+
+    Sentry.metrics.count('reset_click', 1, { attributes: options });
   };
 
+
   const onResetFinished = () => {
     setStatus('finished');
     if (onReseted) onReseted();

gui/src/hooks/user.ts

@@ -1,9 +1,8 @@
-import { locale } from '@tauri-apps/plugin-os';
-import { hostname, platform, version } from 'os';
+import { locale, hostname, platform, version  } from '@tauri-apps/plugin-os';
 import { hash } from './crypto';
 
 export async function getUserID() {
   // FIXME: This does not support android. It currently return the same id for all android users
 
-  return hash(`${hostname()}-${await locale()}-${platform()}-${version()}`);
+  return hash(`${await hostname()}-${await locale()}-${platform()}-${version()}`);
 }