guarding component web socket a little better

This commit is contained in:
Carter 2026-03-06 13:04:46 -06:00
parent db9742ed32
commit 55bff3af00

View file

@ -172,15 +172,25 @@ export default function DevicePage() {
// Streams all component changes for this device. // Streams all component changes for this device.
// When the backend receives a new reading and updates a component, // When the backend receives a new reading and updates a component,
// this fires and updates the component in state without a page refresh. // this fires and updates the component in state without a page refresh.
useWebSocket<{ key: string; component: Component }>({ useWebSocket<{ key: string; component: Component } | null>({
path: `/v1/live/devices/${deviceID}/components`, path: `/live/devices/${deviceID}/components`,
parse: (e) => { parse: (e) => {
const raw = JSON.parse(e.data); try {
const comp = Component.any(raw); const raw = JSON.parse(e.data);
return { key: comp.key(), component: comp }; const comp = Component.any(raw);
if (!comp?.settings) {
console.warn("[ws] received component without settings:", raw);
return null;
}
return { key: comp.key(), component: comp };
} catch (err) {
console.warn("[ws] failed to parse component:", err);
return null;
}
}, },
onMessage: ({ key, component }) => { onMessage: (data) => {
// Functional update so we always work with the latest state if (!data) return;
const { key, component } = data;
setComponents((prev) => { setComponents((prev) => {
const updated = new Map(prev); const updated = new Map(prev);
updated.set(key, component); updated.set(key, component);