search

nilclass / jumperlab

A UI for @Architeuthis-Flux's awesome Jumperless breadboard
Other
13 stars 4 forks source link

Changing net colors quickly crashes Jumperlab #5

Closed Architeuthis-Flux closed 9 months ago

Architeuthis-Flux commented 9 months ago

Hey, first of all, the recent changes to Jumperlab and jlctl have made it so much more stable. Thanks!

I know this is probably some imported widget so maybe it's a problem with that, but when I change the color of a net twice within ~1/4 to ~1/2 second, Jumperlab crashes with:

Uncaught runtime errors:

ERROR
Cannot read properties of null (reading 'value')
TypeError: Cannot read properties of null (reading 'value')
    at http://localhost:3000/static/js/bundle.js:4810:30
    at http://localhost:3000/static/js/bundle.js:2571:68
    at Array.map (<anonymous>)
    at http://localhost:3000/static/js/bundle.js:2571:35
    at basicStateReducer (http://localhost:3000/static/js/bundle.js:43039:45)
    at updateReducer (http://localhost:3000/static/js/bundle.js:43148:26)
    at updateState (http://localhost:3000/static/js/bundle.js:43434:14)
    at Object.useState (http://localhost:3000/static/js/bundle.js:44231:20)
    at useState (http://localhost:3000/static/js/bundle.js:59111:25)
    at JumperlessState (http://localhost:3000/static/js/bundle.js:2527:80)
ERROR
(etc... there's a bunch of copies of this same error, presumably one for each net)

Here's a crappy screen recording of me making it happen a few times:

https://github.com/nilclass/jumperlab/assets/20519442/a038650d-99ce-4a0a-92c9-2abc3e4f061c

There may be more important things to tackle (like having visible wires go to the Nano and special functions), but changing the color of a net in real time is an awesome demo.

nilclass commented 9 months ago

I know this is probably some imported widget

It's just an <input type="color" />, the widget for choosing the color is provided by the browser.

I cannot reproduce this issue, because I can't operate the color picker in my browser very fast. But I am seeing strange behavior whenever I change the color of one of the special nets. Sometimes that disconnects everything, sometimes the board just does not respond to the ::netlist command - but it keeps responding to other commands afterwards, so it's not stuck. Maybe this is related? In any case, I'm not able to crash the UI this way.

Unfortunately the trace above is from minified code, it's hard to figure out what's going on there. There is usually another trace, with correct file names and line numbers printed to the browser console. That could help track this down, if you manage to reproduce it again

Architeuthis-Flux commented 9 months ago

Huh, interesting. Well I'll spend some time looking into it and try to find out what's going on with that. It may even have something to do with my pull request where it's choosing colors, idk.

For now, here's the full console log after the crash. The first one is probably irrelevant.

react-dom.development.js:798 Error: <svg> attribute height: Expected length, "auto".
setValueForProperty @ react-dom.development.js:798
setInitialDOMProperties @ react-dom.development.js:9720
setInitialProperties @ react-dom.development.js:9921
finalizeInitialChildren @ react-dom.development.js:10950
completeWork @ react-dom.development.js:22193
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 13 more frames
Show less

NetlistPanel.tsx:28 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at NetlistPanel.tsx:28:1
    at JumperlessState.tsx:169:1
    at Array.map (<anonymous>)
    at JumperlessState.tsx:169:1
    at basicStateReducer (react-dom.development.js:16540:1)
    at updateReducer (react-dom.development.js:16664:1)
    at updateState (react-dom.development.js:17004:1)
    at Object.useState (react-dom.development.js:17915:1)
    at useState (react.development.js:1622:1)
    at JumperlessState (JumperlessState.tsx:122:1)
(anonymous) @ NetlistPanel.tsx:28
(anonymous) @ JumperlessState.tsx:169
(anonymous) @ JumperlessState.tsx:169
basicStateReducer @ react-dom.development.js:16540
updateReducer @ react-dom.development.js:16664
updateState @ react-dom.development.js:17004
useState @ react-dom.development.js:17915
useState @ react.development.js:1622
JumperlessState @ JumperlessState.tsx:122
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
finishEventHandler @ react-dom.development.js:3976
batchedUpdates @ react-dom.development.js:3994
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 24 more frames
Show less

NetlistPanel.tsx:28 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at NetlistPanel.tsx:28:1
    at JumperlessState.tsx:169:1
    at Array.map (<anonymous>)
    at JumperlessState.tsx:169:1
    at basicStateReducer (react-dom.development.js:16540:1)
    at updateReducer (react-dom.development.js:16664:1)
    at updateState (react-dom.development.js:17004:1)
    at Object.useState (react-dom.development.js:17915:1)
    at useState (react.development.js:1622:1)
    at JumperlessState (JumperlessState.tsx:122:1)
(anonymous) @ NetlistPanel.tsx:28
(anonymous) @ JumperlessState.tsx:169
(anonymous) @ JumperlessState.tsx:169
basicStateReducer @ react-dom.development.js:16540
updateReducer @ react-dom.development.js:16664
updateState @ react-dom.development.js:17004
useState @ react-dom.development.js:17915
useState @ react.development.js:1622
JumperlessState @ JumperlessState.tsx:122
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
finishEventHandler @ react-dom.development.js:3976
batchedUpdates @ react-dom.development.js:3994
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 25 more frames
Show less

 The above error occurred in the <JumperlessState> component:

    at JumperlessState (http://localhost:3000/static/js/bundle.js:2524:3)
    at ConnectionWrapper (http://localhost:3000/static/js/bundle.js:3703:3)
    at SettingsWrapper (http://localhost:3000/static/js/bundle.js:2938:3)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
finishEventHandler @ react-dom.development.js:3976
batchedUpdates @ react-dom.development.js:3994
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
onVisualColorChange_ @ unknown
onColorSelectionRingUpdate_ @ unknown
updateColor @ unknown
set fillColor @ unknown
onHueSliderUpdate_ @ unknown
onColorSelectionRingUpdate_ @ unknown
updateColor @ unknown
onPositionChange_ @ unknown
setX @ unknown
shiftX @ unknown
moveColorSelectionRingTo_ @ unknown
pointerDown @ unknown
onHueSliderMouseDown_ @ unknown
Show 19 more frames
Show less

NetlistPanel.tsx:28 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at NetlistPanel.tsx:28:1
    at JumperlessState.tsx:169:1
    at Array.map (<anonymous>)
    at JumperlessState.tsx:169:1
    at basicStateReducer (react-dom.development.js:16540:1)
    at updateReducer (react-dom.development.js:16664:1)
    at updateState (react-dom.development.js:17004:1)
    at Object.useState (react-dom.development.js:17915:1)
    at useState (react.development.js:1622:1)
    at JumperlessState (JumperlessState.tsx:122:1)
(anonymous) @ NetlistPanel.tsx:28
(anonymous) @ JumperlessState.tsx:169
(anonymous) @ JumperlessState.tsx:169
basicStateReducer @ react-dom.development.js:16540
updateReducer @ react-dom.development.js:16664
updateState @ react-dom.development.js:17004
useState @ react-dom.development.js:17915
useState @ react.development.js:1622
JumperlessState @ JumperlessState.tsx:122
renderWithHooks @ react-dom.development.js:16305
updateFunctionComponent @ react-dom.development.js:19588
beginWork @ react-dom.development.js:21601
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
finishEventHandler @ react-dom.development.js:3976
batchedUpdates @ react-dom.development.js:3994
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 22 more frames
Show less
nilclass commented 9 months ago

@Architeuthis-Flux That trace is more helpful! I pushed a possible fix, let me know if it works.

I believe what's happening is that React sometimes calls the function passed to updateNet asynchronously. Since react also re-uses event objects, the event properties (like currentTarget in this case) aren't accessible anymore after the event handler returns. So if the callback was called asynchronously, e.currentTarget.value it couldn't access e.currentTarget.value. Capturing the input value in a variable first should fix it.