frigate/web
Josh Hawkins f66af071d6 fix React 19 infinite re-render loop on live dashboard
The "Maximum update depth exceeded" error was caused by two issues:

1. useDeferredStreamMetadata returned a new `{}` default on every render
   when SWR data was undefined, creating an unstable reference that
   triggered the useEffect in useCameraLiveMode on every render cycle.
   Fixed by using a stable module-level EMPTY_METADATA constant.

2. useResizeObserver's rest parameter `...refs` created a new array on
   every render, causing its useEffect to re-run and re-observe elements
   continuously. Fixed by stabilizing refs with useRef and only
   reconnecting the observer when actual DOM elements change.
2026-03-05 08:08:04 -06:00
..
.vscode Update web readme (#12062) 2024-06-19 08:11:51 -06:00
images llc to inc and 2025 to 2026 (#21484) 2026-01-01 09:56:09 -06:00
patches add runtime patches for React 19 compatibility 2026-03-04 19:59:52 -06:00
public Debug replay (#22212) 2026-03-04 10:07:34 -06:00
src fix React 19 infinite re-render loop on live dashboard 2026-03-05 08:08:04 -06:00
themes Detail Stream tweaks (#20533) 2025-10-16 14:15:23 -06:00
.eslintrc.cjs Auth! (#11347) 2024-05-18 10:36:13 -06:00
.gitignore chore: i18n use cache key (#20885) 2025-11-14 09:36:46 -06:00
.prettierrc Use prettier-plugin-tailwindcss (#11373) 2024-05-14 09:06:44 -06:00
components.json Add shadcn sidebar component (#20292) 2025-09-30 15:02:35 -06:00
index.html clarify trademark and license interaction (#21019) 2025-11-23 08:42:48 -07:00
login.html clarify trademark and license interaction (#21019) 2025-11-23 08:42:48 -07:00
package-lock.json remove unused carousel component and fix React 19 peer deps 2026-03-05 05:55:58 -06:00
package.json remove unused carousel component and fix React 19 peer deps 2026-03-05 05:55:58 -06:00
postcss.config.js Fix linter and fix lint issues (#10141) 2024-02-28 16:23:56 -06:00
README.md Update web readme (#12062) 2024-06-19 08:11:51 -06:00
site.webmanifest Update webmanifest to use /BASE_PATH/ (#17310) 2025-03-23 05:34:33 -06:00
tailwind.config.cjs Full UI configuration (#22151) 2026-02-27 08:55:36 -07:00
tsconfig.json Use new UI (#8983) 2024-01-31 12:56:11 +00:00
tsconfig.node.json Use new UI (#8983) 2024-01-31 12:56:11 +00:00
vite.config.ts Full UI configuration (#22151) 2026-02-27 08:55:36 -07:00

This is the Frigate frontend which connects to and provides a User Interface to the Python backend.

Web Development

Installing Web Dependencies Via NPM

Within /web, run:

npm install

Running development frontend

Within /web, run:

PROXY_HOST=<ip_address:port> npm run dev

The Proxy Host can point to your existing Frigate instance. Otherwise defaults to localhost:5000 if running Frigate on the same machine.

Extensions

Install these IDE extensions for an improved development experience:

  • eslint