Crash inside ForceGraph2d component

[Ars25Terra]

Hello, maybe you can help me.

I'm using ForceGraph2d with react.

It works fine, but occasionally (the case is not clear), when dragging nodes it crashes with following error:

TypeError: r is null _iterableToArray3 canvas-color-tracker.mjs:26 _toConsumableArray3 canvas-color-tracker.mjs:32 lookup canvas-color-tracker.mjs:97 hexIndex force-graph.mjs:1049 hexIndex force-graph.mjs:1047 onChange8 force-graph.mjs:1041 getSetProp kapsule.mjs:170 _call react-kapsule.mjs:125 index react-kapsule.mjs:134 index react-kapsule.mjs:133 React 12 workLoop scheduler.development.js:266 flushWork scheduler.development.js:239 performWorkUntilDeadline scheduler.development.js:533

Are there any advice or workarounds for this?

[vasturiano]

@Ars25Terra thanks for reaching out. It's not so easy to figure this out without a means to reproduce it. Was this happening in your app only? Are you able to make a simplified example on https://codesandbox.io/ which can reproduce this issue?

[RomanKornev]

@Ars25Terra @vasturiano I can replicate it pretty consistently in my local app (vite+react). It's a static graph with a search bar that's filtering the data. As I type, the graph is filtered and rerendered.

Some of the things I noticed:

• It only happens in dev mode. When running in production mode I was not able to replicate the issue at all.
• It only happens for large graphs, starting from 500+ nodes. If I increase the number of nodes, the probability of getting this crash increases.

I've managed to catch it when debugging and the __indexColor property is indeed null: https://github.com/vasturiano/force-graph/blob/34648d0464c84b1f22195513cb09fa9b3e6c5c4f/src/force-graph.js#L134-L138 If I modify the check above to

if (!d.hasOwnProperty('__indexColor') || d.__indexColor === null) return true;

then the problem disappears, but I am unsure of the implications of this change.

My guess would be that there is some race condition which is only visible when the CPU is choking when trying to process the data. But why does that never happen in production mode is a mystery to me.

[Ars25Terra]

@vasturiano, exactly what @RomanKornev mentions, but somehow I get __indexColor null also in production

[Ars25Terra]

@vasturiano unfortunately it's not easy to provide example on https://codesandbox.io/, but I did a deep research and found out the following.

__indexColor in force-graph becomes null, when registry in canvas-color-tracker is full. As far as I understood this happens on big graphs, as "register" function in canvas-color-tracker constantly pushes new objects with new indexColors and finally registry is filled. When registry is full it returns null for indexColor.