frontend: App.jsx setInterval for metadata refresh never cleared - accumulates on remount, continues after logout #17498

Bug Description

App.jsx starts a setInterval for metadata refresh but never stores the return value and never clears it. If the component is unmounted and remounted, a new interval is added each time without cancelling the previous one. Stale intervals continue making authenticated HTTP requests after the user logs out.

Affected file

rontend/src/App/App.jsx, line 133:

js setInterval(this.fetchMetadata, 1000 * 60 * 60 * 1); // return value discarded - interval can never be cleared

For contrast, ViewerApp.jsx line 112 correctly stores and clears the interval:
js // ViewerApp.jsx - correct pattern this._metadataInterval = setInterval(this.fetchMetadata, interval); // componentWillUnmount: clearInterval(this._metadataInterval);

Failure scenario

1. User logs in. App mounts. Interval 1 starts, making metadata requests every hour.
2. HMR reload in development (or future routing change) unmounts and remounts App. Interval 2 starts.
3. Interval 1 is still running - now two concurrent hourly requests fire.
4. Over repeated HMR cycles, N intervals accumulate.
5. User logs out. Stale intervals continue calling etchMetadata, triggering 401 responses and unnecessary network activity for the session lifetime.

Fix

`js
componentDidMount() {
this._metadataInterval = setInterval(this.fetchMetadata, 1000 * 60 * 60 * 1);
// ... rest of componentDidMount
}

componentWillUnmount() {
clearInterval(this._metadataInterval);
}
`

Environment

ToolJet main branch (2026-08-13), React (class component).