Migrate web to ESLint 10 flat config (#24326)

* migrate web to eslint 10 flat config

ESLint 10 dropped `.eslintrc` support, so `.eslintrc.cjs` is replaced with `eslint.config.js` and the lint scripts no longer pass `--ext` or `--ignore-path`. typescript-eslint moves to 8, react-hooks to 7, and react-refresh to 0.5, and the unused jest and vitest-globals plugins are removed. Lint behaves as it did before: catch variables aren't checked, unused disable directives aren't reported, and rules newly added to the recommended sets are off until the code passes them. typescript-eslint 8 flags constants used only in `typeof`, so those are now exported, or replaced with a union type where the export would trip react-refresh.

* fix lint findings from the eslint 10 recommended rules

Remove the rule overrides from the flat config migration and fix what they were hiding. Unused catch bindings are dropped, 20 disable directives that suppressed nothing are removed (react-hooks 5.2 and 7.1.1 report identical exhaustive-deps findings with inline config ignored), dead initial values are dropped, short-circuit calls become if statements or optional calls, rethrown errors pass `cause`, and the disabled "No recordings" tooltip in `ReviewTimeline` is removed along with its memo and the `getRecordingAvailability` prop. The 3 react-refresh warnings for files that export contexts or classes are left for a later refactor.

AGENTS.md

@@ -160,7 +160,7 @@ When reviewing code, do NOT comment on:
 
 ### Code Quality
 
-- **Linting**: ESLint (see `web/.eslintrc.cjs`)
+- **Linting**: ESLint (see `web/eslint.config.js`)
 - **Formatting**: Prettier with Tailwind CSS plugin
 - **Type Safety**: TypeScript strict mode enabled
 

web/.eslintrc.cjs

@@ -1,74 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:vitest-globals/recommended",
-    "plugin:prettier/recommended",
-  ],
-  env: { browser: true, es2021: true, "vitest-globals/env": true },
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  settings: {
-    jest: {
-      version: 27,
-    },
-  },
-  ignorePatterns: ["*.d.ts", "/src/components/ui/*"],
-  plugins: ["react-hooks", "react-refresh"],
-  rules: {
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "error",
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-    "comma-dangle": [
-      "error",
-      {
-        objects: "always-multiline",
-        arrays: "always-multiline",
-        imports: "always-multiline",
-      },
-    ],
-    "no-unused-vars": [
-      "error",
-      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-    "no-console": "error",
-    "prettier/prettier": [
-      "warn",
-      {
-        plugins: ["prettier-plugin-tailwindcss"],
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: ["**/*.{ts,tsx}"],
-      parser: "@typescript-eslint/parser",
-      plugins: ["@typescript-eslint"],
-      extends: [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "prettier",
-      ],
-    },
-  ],
-};

web/eslint.config.js

@@ -0,0 +1,44 @@
+import path from "node:path";
+import js from "@eslint/js";
+import { defineConfig, globalIgnores, includeIgnoreFile } from "eslint/config";
+import prettierRecommended from "eslint-plugin-prettier/recommended";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default defineConfig([
+  includeIgnoreFile(path.join(import.meta.dirname, ".gitignore")),
+  globalIgnores(["src/components/ui/", "**/*.d.ts", "**/*.cjs", "**/*.mjs"]),
+  js.configs.recommended,
+  tseslint.configs.recommended,
+  prettierRecommended,
+  {
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "error",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "no-console": "error",
+      "prettier/prettier": "warn",
+    },
+  },
+]);

web/package.json

@@ -7,9 +7,9 @@
     "dev": "vite --host",
     "postinstall": "patch-package",
     "build": "tsc && vite build --base=/BASE_PATH/",
-    "lint": "eslint --ext .jsx,.js,.tsx,.ts --ignore-path .gitignore . && npm run e2e:lint",
+    "lint": "eslint . && npm run e2e:lint",
     "e2e:lint": "node e2e/scripts/lint-specs.mjs",
-    "lint:fix": "eslint --ext .jsx,.js,.tsx,.ts --ignore-path .gitignore --fix .",
+    "lint:fix": "eslint --fix .",
     "preview": "vite preview",
     "prettier:write": "prettier -u -w --ignore-path .gitignore \"*.{ts,tsx,js,jsx,css,html}\"",
     "test": "vitest",
@@ -102,6 +102,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.59.1",
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/jest-dom": "^6.6.2",
@@ -111,20 +112,17 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/strftime": "^0.9.8",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/coverage-v8": "^4.1.11",
     "autoprefixer": "^10.4.20",
     "esbuild": "^0.28.2",
-    "eslint": "^8.57.0",
+    "eslint": "^10.10.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.5.6",
-    "eslint-plugin-react-refresh": "^0.4.8",
-    "eslint-plugin-vitest-globals": "^1.6.1",
     "fake-indexeddb": "^6.0.0",
+    "globals": "^17.12.0",
     "i18next-cli": "^1.5.11",
     "jest-websocket-mock": "^2.5.0",
     "jsdom": "^24.1.1",
@@ -136,6 +134,7 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.9",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.70.0",
     "vite": "^8.3.0",
     "vitest": "^4.1.11"
   },

web/public/notifications-worker.js

@@ -52,7 +52,7 @@ self.addEventListener("push", function (event) {
               }
             })
             .then(show)
-        : show(), // eslint-disable-line comma-dangle
+        : show(),
     );
   } else {
     // pass
@@ -77,7 +77,7 @@ self.addEventListener("notificationclick", (event) => {
                 "X-CSRF-TOKEN": 1,
               },
               body: JSON.stringify({ ids: [event.notification.data.id] }),
-            }), // eslint-disable-line comma-dangle
+            }),
           );
         }
         break;

web/src/components/auth/AuthForm.tsx

@@ -27,7 +27,7 @@ import { LuExternalLink } from "react-icons/lu";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { Card, CardContent } from "@/components/ui/card";
 
-interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
+type UserAuthFormProps = React.HTMLAttributes<HTMLDivElement>;
 
 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   const { t } = useTranslation(["components/auth", "common"]);

web/src/components/camera/AutoUpdatingCameraImage.tsx

@@ -39,8 +39,6 @@ export default function AutoUpdatingCameraImage({
         timeoutRef.current = null;
       }
     };
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reloadInterval]);
 
   const handleLoad = useCallback(() => {
@@ -75,7 +73,7 @@ export default function AutoUpdatingCameraImage({
   const [isCached, setIsCached] = useState(false);
 
   const cacheKey = useMemo(() => {
-    let baseParam = "";
+    let baseParam: string;
 
     if (periodicCache && !isCached) {
       const date = new Date(key);

web/src/components/camera/ResizingCameraImage.tsx

@@ -80,7 +80,7 @@ export default function CameraImage({
         const ctx = canvasRef.current.getContext("2d");
         ctx?.drawImage(img, 0, 0, scaledWidth, scaledHeight);
       }
-      onload && onload(event);
+      onload?.(event);
     },
     [img, scaledHeight, scaledWidth, setHasLoaded, onload, canvasRef],
   );

web/src/components/classification/ClassificationModelEditDialog.tsx

@@ -386,6 +386,7 @@ export default function ClassificationModelEditDialog({
                   "Unknown error";
                 throw new Error(
                   `Failed to rename ${oldName} to ${newName}: ${errorMessage}`,
+                  { cause: err },
                 );
               }
             },

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -127,7 +127,7 @@ export default function ClassificationModelWizardDialog({
         await axios.delete(
           `/classification/${wizardState.step1Data.modelName}`,
         );
-      } catch (error) {
+      } catch {
         // Silently fail - user is already cancelling
       }
     }

web/src/components/classification/wizard/Step3ChooseExamples.tsx

@@ -189,7 +189,7 @@ export default function Step3ChooseExamples({
               },
             );
           }
-        } catch (error) {
+        } catch {
           // Silently fail - unselected images will remain but won't cause issues
           // since the frontend filters out images that don't match expected format
         }

web/src/components/filter/CamerasFilterButton.tsx

@@ -81,8 +81,6 @@ export function CamerasFilterButton({
 
   useEffect(() => {
     setCurrentCameras(selectedCameras);
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedCameras]);
 
   const trigger = (

web/src/components/filter/ReviewFilterGroup.tsx

@@ -26,14 +26,7 @@ import { getTranslatedLabel } from "@/utils/i18n";
 import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 import { cn } from "@/lib/utils";
 
-const REVIEW_FILTERS = [
+type ReviewFilters = "cameras" | "reviewed" | "date" | "general" | "motionOnly";
-  "cameras",
-  "reviewed",
-  "date",
-  "general",
-  "motionOnly",
-] as const;
-type ReviewFilters = (typeof REVIEW_FILTERS)[number];
 const DEFAULT_REVIEW_FILTERS: ReviewFilters[] = [
   "cameras",
   "reviewed",
@@ -353,8 +346,6 @@ function GeneralFilterButton({
       showAll: showAll,
       ...filter,
     });
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedLabels, selectedZones, showAll, filter]);
 
   const trigger = (

web/src/components/filter/SearchFilterGroup.tsx

@@ -306,8 +306,6 @@ function GeneralFilterButton({
 
   useEffect(() => {
     setCurrentLabels(selectedLabels);
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedLabels]);
 
   const trigger = (
@@ -496,8 +494,6 @@ function SortTypeButton({
 
   useEffect(() => {
     setCurrentSortType(selectedSortType);
-    // only refresh when state changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSortType]);
 
   const trigger = (

web/src/components/input/InputWithTags.tsx

@@ -264,9 +264,9 @@ export default function InputWithTags({
         type == "max_speed"
       ) {
         const newFilters = { ...filters };
-        let timestamp = 0;
+        let timestamp: number;
         let score = 0;
-        let speed = 0;
+        let speed: number;
 
         switch (type) {
           case "before":

web/src/components/menu/LiveContextMenu.tsx

@@ -193,8 +193,6 @@ export default function LiveContextMenu({
     } else {
       return MdVolumeUp;
     }
-    // only update when specific fields change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [volumeState, audioState]);
 
   const handleVolumeIconClick = (e: React.MouseEvent) => {

web/src/components/overlay/CreateRoleDialog.tsx

@@ -92,7 +92,7 @@ export default function CreateRoleDialog({
     try {
       await onCreate(values.role, values.cameras);
       form.reset();
-    } catch (error) {
+    } catch {
       // Error handled in parent
     } finally {
       setIsLoading(false);

web/src/components/overlay/DeleteRoleDialog.tsx

@@ -32,7 +32,7 @@ export default function DeleteRoleDialog({
     setIsLoading(true);
     try {
       await onDelete();
-    } catch (error) {
+    } catch {
       // Error handled in parent
     } finally {
       setIsLoading(false);

web/src/components/overlay/EditRoleCamerasDialog.tsx

@@ -74,7 +74,7 @@ export default function EditRoleCamerasDialog({
     try {
       await onSave(values.cameras);
       form.reset();
-    } catch (error) {
+    } catch {
       // Error handled in parent
     } finally {
       setIsLoading(false);

web/src/components/overlay/ExportDialog.tsx

@@ -675,7 +675,7 @@ export function ExportContent({
       setSelectedOption(option);
 
       const now = new Date(latestTime * 1000);
-      let start = 0;
+      let start: number;
 
       switch (option) {
         case "1":

web/src/components/overlay/chip/GenAISummaryChip.tsx

@@ -64,7 +64,7 @@ export function GenAISummaryDialog({
     const threatLevel = aiAnalysis.potential_threat_level ?? 0;
 
     if (threatLevel > 0) {
-      let label = "";
+      let label: string;
 
       switch (threatLevel) {
         case ThreatLevel.NEEDS_REVIEW:

web/src/components/overlay/detail/TrackingDetails.tsx

@@ -599,7 +599,6 @@ export function TrackingDetails({
       playlist,
       startPosition: 0,
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event]);
 
   // Determine camera aspect ratio category

web/src/components/player/GenericVideoPlayer.tsx

@@ -35,7 +35,7 @@ export function GenericVideoPlayer({
         // missing media is a 404; 502 still covers a failed or
         // unreachable mapping request, which is equally unplayable
         setSourceExists(response.status !== 502 && response.status !== 404);
-      } catch (error) {
+      } catch {
         setSourceExists(false);
       }
     };

web/src/components/player/JSMpegPlayer.tsx

@@ -203,7 +203,7 @@ export default function JSMpegPlayer({
           try {
             videoElement.player?.destroy();
             // eslint-disable-next-line no-empty
-          } catch (e) {}
+          } catch {}
 
           if (videoWrapper) {
             videoWrapper.innerHTML = "";

web/src/components/player/MsePlayer.tsx

@@ -357,7 +357,7 @@ function MSEPlayer({
           if (originalHandler) {
             try {
               originalHandler(msg);
-            } catch (e) {
+            } catch {
               // Don't reject - we got the response, just let the error bubble
             }
           }
@@ -478,7 +478,7 @@ function MSEPlayer({
               msRef.current?.setLiveSeekableRange(end, end + 15);
             }
           }
-        } catch (e) {
+        } catch {
           // no-op
         }
       });
@@ -497,7 +497,7 @@ function MSEPlayer({
         } else {
           try {
             sb?.appendBuffer(data as ArrayBuffer);
-          } catch (e) {
+          } catch {
             // no-op
           }
         }

web/src/components/player/PreviewPlayer.tsx

@@ -249,9 +249,6 @@ function PreviewVideoPlayer({
         previewRef.current?.load();
       }, 1000);
       setChangeoverTimeout(timeout);
-
-      // we only want this to change when current preview changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
     [setCurrentHourFrame, videoSize],
   );

web/src/components/player/VideoControls.tsx

@@ -147,8 +147,6 @@ export default function VideoControls({
     } else {
       return MdVolumeUp;
     }
-    // only update when specific fields change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [volume, muted]);
 
   const onKeyboardShortcut = useCallback(

web/src/components/player/WebRTCPlayer.tsx

@@ -118,7 +118,7 @@ export default function WebRtcPlayer({
           ? await navigator.mediaDevices.getUserMedia(constraints)
           : await navigator.mediaDevices.getDisplayMedia(constraints);
       return stream.getTracks();
-    } catch (e) {
+    } catch {
       return [];
     }
   }

web/src/components/settings/ZoneEditPane.tsx

@@ -396,7 +396,7 @@ export default function ZoneEditPane({
         ? `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${polygon.name}`
         : `cameras.${polygon.camera}.zones.${polygon.name}`;
 
-      let mutatedConfig = config;
+      let mutatedConfig: typeof config;
       let alertQueries = "";
       let detectionQueries = "";
 
@@ -404,9 +404,6 @@ export default function ZoneEditPane({
 
       if (renamingZone) {
         // rename - delete old zone and replace with new
-        let renameAlertQueries = "";
-        let renameDetectionQueries = "";
-
         // Only handle review queries for base config (not profiles)
         if (!editingProfile) {
           const zoneInAlerts =
@@ -417,7 +414,7 @@ export default function ZoneEditPane({
               polygon.name,
             ) ?? false;
 
-          ({
+          const {
             alertQueries: renameAlertQueries,
             detectionQueries: renameDetectionQueries,
           } = reviewQueries(
@@ -427,7 +424,7 @@ export default function ZoneEditPane({
             polygon.camera,
             cameraConfig?.review.alerts.required_zones || [],
             cameraConfig?.review.detections.required_zones || [],
-          ));
+          );
 
           try {
             await axios.put(
@@ -591,7 +588,6 @@ export default function ZoneEditPane({
         });
     },
     [
-      config,
       updateConfig,
       polygon,
       scaledWidth,

web/src/components/settings/wizard/Step2ProbeOrSnapshot.tsx

@@ -142,7 +142,7 @@ export default function Step2ProbeOrSnapshot({
               reader.onload = () => resolve(reader.result as string);
               reader.readAsDataURL(snapshotBlob);
             });
-          } catch (snapshotError) {
+          } catch {
             snapshotBase64 = undefined;
           }
         }
@@ -307,7 +307,7 @@ export default function Step2ProbeOrSnapshot({
             data.username,
             data.password,
           );
-        } catch (error) {
+        } catch {
           return null;
         }
       }

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -236,7 +236,6 @@ export function MotionReviewTimeline({
       scrollToSegment={scrollToSegment}
       isZooming={isZooming}
       zoomDirection={zoomDirection}
-      getRecordingAvailability={getRecordingAvailability}
       onZoomChange={onZoomChange}
       possibleZoomLevels={possibleZoomLevels}
       currentZoomLevel={currentZoomLevel}

web/src/components/timeline/ReviewTimeline.tsx

@@ -41,7 +41,6 @@ export type ReviewTimelineProps = {
   scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
   isZooming: boolean;
   zoomDirection: TimelineZoomDirection;
-  getRecordingAvailability?: (time: number) => boolean | undefined;
   onZoomChange?: (newZoomLevel: number) => void;
   possibleZoomLevels?: ZoomLevel[];
   currentZoomLevel?: number;
@@ -70,7 +69,6 @@ export function ReviewTimeline({
   scrollToSegment,
   isZooming,
   zoomDirection,
-  getRecordingAvailability,
   onZoomChange,
   possibleZoomLevels,
   currentZoomLevel,
@@ -353,25 +351,6 @@ export function ReviewTimeline({
     }
   }, [isDragging, onHandlebarDraggingChange]);
 
-  const isHandlebarInNoRecordingPeriod = useMemo(() => {
-    if (!getRecordingAvailability || handlebarTime === undefined) return false;
-
-    // Check current segment
-    const currentAvailability = getRecordingAvailability(handlebarTime);
-    if (currentAvailability !== false) return false;
-
-    // Check if at least one adjacent segment also has no recordings
-    const beforeAvailability = getRecordingAvailability(
-      handlebarTime - segmentDuration,
-    );
-    const afterAvailability = getRecordingAvailability(
-      handlebarTime + segmentDuration,
-    );
-
-    // If current segment has no recordings AND at least one adjacent segment also has no recordings
-    return beforeAvailability === false || afterAvailability === false;
-  }, [getRecordingAvailability, handlebarTime, segmentDuration]);
-
   return (
     <>
       <div
@@ -427,12 +406,6 @@ export function ReviewTimeline({
                     ></div>
                   </div>
                 </div>
-                {/* TODO: determine if we should keep this tooltip */}
-                {false && isHandlebarInNoRecordingPeriod && (
-                  <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 rounded-md bg-destructive/80 px-4 py-1 text-center text-xs text-white shadow-lg">
-                    No recordings
-                  </div>
-                )}
               </div>
             )}
             {showExportHandles && (

web/src/hooks/use-date-locale.ts

@@ -61,7 +61,7 @@ export function useDateLocale(): Locale {
         try {
           const loadedLocale = await localeLoader();
           setLocale(loadedLocale);
-        } catch (error) {
+        } catch {
           setLocale(enUS);
         }
       } else {

web/src/hooks/use-fullscreen.ts

@@ -153,17 +153,11 @@ export function useFullscreen<T extends HTMLElement = HTMLElement>(
     // @ts-expect-error we need to check that fullscreen exists
     if (document.exitFullscreen) return true;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((document as any).msExitFullscreen)
+    if ((document as any).msExitFullscreen) return true;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return true;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((document as any).webkitExitFullscreen)
+    if ((document as any).webkitExitFullscreen) return true;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return true;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if ((document as any).mozCancelFullScreen)
+    if ((document as any).mozCancelFullScreen) return true;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return true;
     return false;
   }, []);
 

web/src/hooks/use-overlay-state.tsx

@@ -39,7 +39,6 @@ export function useOverlayState<S>(
       });
     },
     // locationRef is stable so we don't need it in deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [key, navigate, preserveSearch],
   );
 
@@ -93,7 +92,6 @@ export function usePersistedOverlayState<S extends string>(
       navigate(loc.pathname, { state: newLocationState, replace });
     },
     // locationRef is stable so we don't need it in deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [key, navigate, setPersistedValue],
   );
 
@@ -151,7 +149,6 @@ export function useUserPersistedOverlayState<S extends string>(
       navigate(loc.pathname, { state: newLocationState, replace });
     },
     // locationRef is stable so we don't need it in deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [key, navigate, setPersistedValue],
   );
 
@@ -188,7 +185,6 @@ export function useHashState<S extends string>(): [
       }
     },
     // locationRef is stable so we don't need it in deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [navigate],
   );
 

web/src/hooks/use-session-persistence.ts

@@ -19,7 +19,7 @@ export function useSessionPersistence<S>(
         window.sessionStorage.setItem(key, JSON.stringify(defaultValue));
         return defaultValue;
       }
-    } catch (err) {
+    } catch {
       return defaultValue;
     }
   });
@@ -29,7 +29,7 @@ export function useSessionPersistence<S>(
       try {
         window.sessionStorage.setItem(key, JSON.stringify(newValue));
         // eslint-disable-next-line no-empty
-      } catch (err) {}
+      } catch {}
       setStoredValue(newValue);
     },
     [key],

web/src/pages/ConfigEditor.tsx

@@ -81,7 +81,7 @@ function ConfigEditor() {
           "Unknown error";
 
         setError(errorMessage);
-        throw new Error(errorMessage);
+        throw new Error(errorMessage, { cause: error });
       }
     },
     [editorRef, t],
@@ -102,7 +102,7 @@ function ConfigEditor() {
     try {
       await onHandleSaveConfig("saveonly");
       setRestartDialogOpen(true);
-    } catch (error) {
+    } catch {
       // If save fails, error is already set in onHandleSaveConfig, no dialog opens
     }
   }, [onHandleSaveConfig]);

web/src/types/classification.ts

@@ -1,4 +1,4 @@
-const TRAIN_FILTERS = ["class", "score"] as const;
+export const TRAIN_FILTERS = ["class", "score"] as const;
 export type TrainFilters = (typeof TRAIN_FILTERS)[number];
 
 export type TrainFilter = {

web/src/types/export.ts

@@ -114,7 +114,7 @@ export type DeleteClipType = {
 
 // filtering
 
-const EXPORT_FILTERS = ["cameras"] as const;
+export const EXPORT_FILTERS = ["cameras"] as const;
 export type ExportFilters = (typeof EXPORT_FILTERS)[number];
 export const DEFAULT_EXPORT_FILTERS: ExportFilters[] = ["cameras"];
 

web/src/types/filter.ts

@@ -11,7 +11,7 @@ export type FilterList = {
 
 export const LAST_24_HOURS_KEY = "last24Hours";
 
-const DRAWER_FEATURES = [
+export const DRAWER_FEATURES = [
   "export",
   "calendar",
   "filter",

web/src/types/search.ts

@@ -1,4 +1,4 @@
-const SEARCH_FILTERS = [
+export const SEARCH_FILTERS = [
   "cameras",
   "date",
   "time",

web/src/utils/cameraUtil.ts

@@ -71,7 +71,7 @@ export async function detectReolinkCamera(
     }
 
     return null;
-  } catch (error) {
+  } catch {
     return null;
   }
 }
@@ -94,7 +94,7 @@ export function maskUri(uri: string): string {
       urlObj.searchParams.set("password", "*".repeat(4));
       return urlObj.toString();
     }
-  } catch (e) {
+  } catch {
     // ignore
   }
   return uri;

web/src/utils/dateUtil.ts

@@ -97,7 +97,7 @@ const formatMap: {
 const getResolvedTimeZone = () => {
   try {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  } catch (error) {
+  } catch {
     const offsetMinutes = new Date().getTimezoneOffset();
     return `UTC${offsetMinutes < 0 ? "+" : "-"}${Math.abs(offsetMinutes / 60)
       .toString()
@@ -224,7 +224,7 @@ export const formatUnixTimestampToDateTime = (
     }
 
     return formattedDateTime;
-  } catch (error) {
+  } catch {
     return "Invalid time";
   }
 };

web/src/utils/isIFrame.ts

@@ -1,7 +1,7 @@
 export const isInIframe = (() => {
   try {
     return window.self !== window.top;
-  } catch (e) {
+  } catch {
     // If we get a security error, we're definitely in an iframe
     return true;
   }

web/src/utils/lifecycleUtil.ts

@@ -42,7 +42,7 @@ export function getLifecycleItemDescription(
         label,
       });
     case "attribute": {
-      let title = "";
+      let title: string;
       if (
         lifecycleItem.data.attribute == "face" ||
         lifecycleItem.data.attribute == "license_plate"

web/src/utils/timelineUtil.tsx

@@ -13,7 +13,6 @@ export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] {
   const startDay = new Date(timeRange.after * 1000);
   startDay.setUTCMinutes(0, 0, 0);
   let start = startDay.getTime() / 1000;
-  let end = 0;
 
   for (let i = 0; i < 24; i++) {
     startDay.setHours(startDay.getHours() + 1);
@@ -22,7 +21,7 @@ export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] {
       break;
     }
 
-    end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
+    const end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
     data.push({
       after: start,
       before: end,

web/src/utils/zoneEdutUtil.ts

@@ -36,8 +36,6 @@ export const reviewQueries = (
   alertsZones: string[],
   detectionsZones: string[],
 ) => {
-  let alertQueries = "";
-  let detectionQueries = "";
   let same_alerts = false;
   let same_detections = false;
 
@@ -50,7 +48,7 @@ export const reviewQueries = (
     alerts.delete(name);
   }
 
-  alertQueries = [...alerts]
+  let alertQueries = [...alerts]
     .map((zone) => `&cameras.${camera}.review.alerts.required_zones=${zone}`)
     .join("");
 
@@ -63,7 +61,7 @@ export const reviewQueries = (
     detections.delete(name);
   }
 
-  detectionQueries = [...detections]
+  let detectionQueries = [...detections]
     .map(
       (zone) => `&cameras.${camera}.review.detections.required_zones=${zone}`,
     )

web/src/views/classification/ModelTrainingView.tsx

@@ -1101,8 +1101,8 @@ function ObjectTrainGrid({
         return undefined;
       }
 
-      let label: string | undefined = undefined;
+      let label: string | undefined;
-      let score: number | undefined = undefined;
+      let score: number | undefined;
 
       if (model.object_config.classification_type === "attribute") {
         label = event.data[model.name] as string | undefined;

web/src/views/events/EventView.tsx

@@ -722,7 +722,7 @@ function DetectionReview({
 
       try {
         if (node) minimapObserver.current.observe(node);
-      } catch (e) {
+      } catch {
         // no op
       }
     },

web/src/views/live/DraggableGridLayout.tsx

@@ -668,7 +668,9 @@ export default function DraggableGridLayout({
                     playInBackground={false}
                     showStats={statsStates[camera.name]}
                     onClick={() => {
-                      !isEditMode && onSelectCamera(camera.name);
+                      if (!isEditMode) {
+                        onSelectCamera(camera.name);
+                      }
                     }}
                     onError={(e) => {
                       setPreferredLiveModes((prevModes) => {

web/src/views/live/LiveCameraView.tsx

@@ -926,7 +926,7 @@ function FrigateCameraFeatures({
         );
         setActiveToastId(toastId);
       }
-    } catch (error) {
+    } catch {
       toast.error(t("manualRecording.failedToStart"), {
         position: "top-center",
       });
@@ -948,7 +948,7 @@ function FrigateCameraFeatures({
           position: "top-center",
         });
       }
-    } catch (error) {
+    } catch {
       toast.error(t("manualRecording.failedToEnd"), {
         position: "top-center",
       });
@@ -973,7 +973,7 @@ function FrigateCameraFeatures({
       xhr.setRequestHeader("X-CACHE-BYPASS", "1");
       xhr.withCredentials = true;
       xhr.send(payload);
-    } catch (e) {
+    } catch {
       // Silently ignore errors during unload
     }
   }, []);

web/src/views/live/LiveDashboardView.tsx

@@ -243,7 +243,7 @@ export default function LiveDashboardView({
 
       try {
         if (node) visibleCameraObserver.current.observe(node);
-      } catch (e) {
+      } catch {
         // no op
       }
     },

web/src/views/recording/RecordingView.tsx

@@ -672,7 +672,7 @@ export function RecordingView({
 
       try {
         if (node) visiblePreviewObserver.current.observe(node);
-      } catch (e) {
+      } catch {
         // no op
       }
     },

web/src/views/search/SearchView.tsx

@@ -296,7 +296,6 @@ export default function SearchView({
   useEffect(() => {
     setSelectedObjects([]);
     // unselect items when search term or filter changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchTerm, searchFilter]);
 
   // confidence score

web/src/views/settings/AuthenticationView.tsx

@@ -778,7 +778,7 @@ export default function AuthenticationView({
           if (selectedRoleForDelete) {
             try {
               await onDeleteRole(selectedRoleForDelete);
-            } catch (error) {
+            } catch {
               // Error handling is already done in onDeleteRole
             }
           }

web/src/views/settings/MasksAndZonesView.tsx

@@ -642,8 +642,6 @@ export default function MasksAndZonesView({
       }
       prevScaledRef.current = { w: scaledWidth, h: scaledHeight };
     }
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     cameraConfig,
     containerRef,

web/src/views/system/EnrichmentMetrics.tsx

@@ -178,7 +178,7 @@ export default function EnrichmentMetrics({
         isSpeed = false;
       }
 
-      let categoryName = "";
+      let categoryName: string;
       // Get translated category name
       if (categoryKey.endsWith("_classification")) {
         const name = categoryKey.replace("_classification", "");

web/src/views/system/GeneralMetrics.tsx

@@ -97,14 +97,13 @@ export default function GeneralMetrics({
     let vaCount = 0;
     let nvCount = 0;
 
-    statsHistory.length > 0 &&
+    Object.values(statsHistory[0]?.gpu_usages ?? {}).forEach((stats) => {
-      Object.values(statsHistory[0]?.gpu_usages ?? {}).forEach((stats) => {
+      if (stats.vendor === "nvidia") {
-        if (stats.vendor === "nvidia") {
+        nvCount += 1;
-          nvCount += 1;
+      } else if (stats.vendor === "intel" || stats.vendor === "amd") {
-        } else if (stats.vendor === "intel" || stats.vendor === "amd") {
+        vaCount += 1;
-          vaCount += 1;
+      }
-        }
+    });
-      });
 
     return [vaCount > 0 || nvCount > 0, nvCount > 0 ? "nvinfo" : "vainfo"];
   }, [statsHistory]);