Blank UI Errors

[LTrainExpress]

I get this on the dev console and and blank page after selecting a pump. once I am in the mode I have to do a git clean -xdf and re-install to clear it. Otherwise every time I go to the webClient I get this.

react-dom.development.js:24994 Download the React DevTools for a better development experience: https://fb.me/react-devtools PoolController.tsx:401 Checking webClient server for SSDP address every second; Pumps.tsx:60 Uncaught TypeError: Cannot read property 'desc' of undefined at Pumps.tsx:60 at Array.map () at Pump (Pumps.tsx:56) at renderWithHooks (react-dom.development.js:14803) at updateFunctionComponent (react-dom.development.js:17034) at beginWork (react-dom.development.js:18610) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) react-dom.development.js:19527 The above error occurred in the component: in Pump (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19527 DataFetchAPI.tsx:189 TypeError: Cannot read property 'desc' of undefined at Pumps.tsx:60 at Array.map () at Pump (Pumps.tsx:56) at renderWithHooks (react-dom.development.js:14803) at updateFunctionComponent (react-dom.development.js:17034) at beginWork (react-dom.development.js:18610) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Pump (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Circuits (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Chlorinator (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Features (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 PoolController.tsx:405 webClient server found pool app at: http://192.168.1.162:4200 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88

[LTrainExpress]

After the pull I still get a blank page, but this is the new error: react-dom.development.js:24994 Download the React DevTools for a better development experience: https://fb.me/react-devtools PoolController.tsx:417 Checking webClient server for SSDP address every second; Pumps.tsx:59 Uncaught TypeError: data.pumps.map is not a function at Pump (Pumps.tsx:59) at renderWithHooks (react-dom.development.js:14803) at updateFunctionComponent (react-dom.development.js:17034) at beginWork (react-dom.development.js:18610) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22157) at workLoopSync (react-dom.development.js:22130) react-dom.development.js:19527 The above error occurred in the component: in Pump (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:19527 DataFetchAPI.tsx:189 TypeError: data.pumps.map is not a function at Pump (Pumps.tsx:59) at renderWithHooks (react-dom.development.js:14803) at updateFunctionComponent (react-dom.development.js:17034) at beginWork (react-dom.development.js:18610) at HTMLUnknownElement.callCallback (react-dom.development.js:188) at Object.invokeGuardedCallbackDev (react-dom.development.js:237) at invokeGuardedCallback (react-dom.development.js:292) at beginWork$1 (react-dom.development.js:23203) at performUnitOfWork (react-dom.development.js:22157) at workLoopSync (react-dom.development.js:22130) react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Pump (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Circuits (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Features (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Chlorinator (created by PoolController) in div (created by Container) in Container (created by PoolController) in div (created by PoolController) in div (created by PoolController) in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 PoolController.tsx:421 webClient server found pool app at: http:/localhost:4200/ react-dom.development.js:88 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in PoolController (created by App) in App (created by Context.Consumer) in Route in Router (created by BrowserRouter) in BrowserRouter printWarning @ react-dom.development.js:88 http/socket.io/?EIO=3&transport=polling&t=N8LAlAL:1 Failed to load resource: net::ERR_NAME_NOT_RESOLVED http/socket.io/?EIO=3&transport=polling&t=N8LAm2k:1 Failed to load resource: net::ERR_NAME_NOT_RESOLVED http/socket.io/?EIO=3&transport=polling&t=N8LAnK6:1 Failed to load resource: net::ERR_NAME_NOT_RESOLVED polling-xhr.js:268 GET http://http/socket.io/?EIO=3&transport=polling&t=N8LAoSk net::ERR_NAME_NOT_RESOLVED Request.create @ polling-xhr.js:268 Request @ polling-xhr.js:170 XHR.request @ polling-xhr.js:96 XHR.doPoll @ polling-xhr.js:126 Polling.poll @ polling.js:118 Polling.doOpen @ polling.js:63 Transport.open @ transport.js:84 Socket.open @ socket.js:250 Socket @ socket.js:122 Socket @ socket.js:28 Manager.open.Manager.connect @ manager.js:226 (anonymous) @ manager.js:540 polling-xhr.js:268 GET http://http/socket.io/?EIO=3&transport=polling&t=N8LAqEA net::ERR_NAME_NOT_RESOLVED Request.create @ polling-xhr.js:268 Request @ polling-xhr.js:170 XHR.request @ polling-xhr.js:96 XHR.doPoll @ polling-xhr.js:126 Polling.poll @ polling.js:118 Polling.doOpen @ polling.js:63 Transport.open @ transport.js:84 Socket.open @ socket.js:250 Socket @ socket.js:122 Socket @ socket.js:28 Manager.open.Manager.connect @ manager.js:226 (anonymous) @ manager.js:540 setTimeout (async) Manager.reconnect @ manager.js:530 (anonymous) @ manager.js:544 (anonymous) @ manager.js:247 Emitter.emit @ index.js:145 Socket.onError @ socket.js:690 (anonymous) @ socket.js:281 Emitter.emit @ index.js:145 Transport.onError @ transport.js:71 (anonymous) @ polling-xhr.js:132 Emitter.emit @ index.js:145 Request.onError @ polling-xhr.js:314 (anonymous) @ polling-xhr.js:261 setTimeout (async) xhr.onreadystatechange @ polling-xhr.js:260 XMLHttpRequest.send (async) Request.create @ polling-xhr.js:268 Request @ polling-xhr.js:170 XHR.request @ polling-xhr.js:96 XHR.doPoll @ polling-xhr.js:126 Polling.poll @ polling.js:118 Polling.doOpen @ polling.js:63 Transport.open @ transport.js:84 Socket.open @ socket.js:250 Socket @ socket.js:122 Socket @ socket.js:28 Manager.open.Manager.connect @ manager.js:226 (anonymous) @ manager.js:540

[LTrainExpress]

video of when I click refresh. This is after a complete clone and clearing of my browser cache.

[tagyoureit]

Can you add your poolConfig.json and poolState.json from the pool app?

[LTrainExpress]

---

poolState.json:

{ "mode": { "val": 0, "name": "auto", "desc": "Auto" }, "temps": { "units": { "val": 0, "name": "F", "desc": "Fahrenheit" } }, "status": { "val": 0, "name": "initializing", "percent": 0 }, "equipment": { "model": "Virtual Controller", "maxBodies": 1 }, "pumps": [ { "id": 1, "virtualControllerStatus": { "val": 1, "name": "running", "desc": "Running" }, "command": 4, "mode": 0, "driveState": 0, "watts": 0, "rpm": 0, "flow": 0, "ppc": 0, "status": { "name": "off", "desc": "Off", "val": 0 }, "time": 1197, "type": { "val": 0, "name": "none", "desc": "No pump", "maxCircuits": 0, "hasAddress": false } }, { "id": 2, "virtualControllerStatus": { "val": 1, "name": "running", "desc": "Running" } } ], "valves": [], "heaters": [], "circuits": [ { "id": 6, "name": "Pool", "type": { "val": 6, "name": "pool", "desc": "Pool" }, "isOn": false } ], "features": [], "chlorinators": [ { "id": 1 } ], "schedules": [], "circuitGroups": [], "lightGroups": [], "virtualCircuits": [], "intellibrite": {}, "intellichem": {}, "covers": [], "general": {} }

---

poolConfig.json:

{ "lastUpdated": "5/15/2020, 12:17:19 AM", "pool": { "options": { "clockMode": 12, "clockSource": "manual" } }, "equipment": { "maxBodies": 1, "maxCircuits": 0, "maxSchedules": 0, "maxPumps": 2, "maxValves": 0, "maxCircuitGroups": 0, "maxLightGroups": 0, "maxIntelliBrites": 0, "maxChlorinators": 1, "maxCustomNames": 10, "model": "Virtual Controller", "maxFeatures": 10, "equipmentIds": { "circuits": { "start": 6, "end": 6 }, "features": { "start": 7, "end": 17 }, "circuitGroups": { "start": 0, "end": 0 }, "virtualCircuits": { "start": 128, "end": 136 }, "invalidIds": [] } }, "configVersion": {}, "bodies": [ { "id": 1, "isActive": true, "name": "Pool" } ], "schedules": [], "circuits": [ { "id": 6, "name": "Pool", "type": 6, "isActive": true } ], "features": [], "pumps": [ { "id": 1, "isActive": true, "isVirtual": true, "type": 0, "circuits": [] }, { "id": 2, "isActive": true, "isVirtual": true, "type": 0, "circuits": [] } ], "chlorinators": [ { "id": 1 } ], "valves": [], "heaters": [], "covers": [], "circuitGroups": [], "lightGroups": [], "remotes": [], "security": {}, "customNames": [ { "id": 1, "name": "Generic", "isActive": true } ], "eggTimers": [], "intellichem": {}, "appVersion": "6.0.0", "intellibrite": { "id": 0, "isActive": false, "type": 3 }, "general": {}, "controllerType": "virtual" }

[LTrainExpress]

Pulled latest controller this morning, still have the page blanking issue. The webclient does this even if the pool controller is not reachable/running. I think the issue is on the webclient side. For fun I tried it in MS Edge and got the same results as Chrome. I hope this helps. Please let me know if there is anything else I can do to help you debug this.

[tagyoureit]

Try the latest code I pushed up and let me know if you have more success.

[LTrainExpress]

UI is working again! Thanks. Closing this issue.