Error occurs if donut chart.destroy() is called shortly after chart.unload()

[slaweet]

Description

Errors occur when donut chart.destroy() is called shortly after (reproduced with <600ms) chart.unload()

The use case:

• There's a page with many charts. User can adjust filters so that the charts fetch new data and unload the old. Some requests take a long time to load, so the user might not wait for them and navigates to a different page, which can happen shortly after one of the charts receives a data update.

Steps to check or reproduce

1. open: https://codesandbox.io/p/sandbox/billboard-error-after-destroy-l8z3fn?file=%2Fsrc%2Findex.js
2. the code contains timeouts that simulate the essence of the use case described above
3. after 2500ms, it throws:

TypeError
Cannot read properties of null (reading 'data_types')
ChartInternal.isTypeOf
https://l8z3fn.csb.app/node_modules/billboard.js/dist/billboard.js:8608:30
ChartInternal.isPieType
https://l8z3fn.csb.app/node_modules/billboard.js/dist/billboard.js:8635:15
ChartInternal.isArcType
https://l8z3fn.csb.app/node_modules/billboard.js/dist/billboard.js:8647:15
ChartInternal.getArc
https://l8z3fn.csb.app/node_modules/billboard.js/dist/billboard.js:6876:24
SVGPathElement.eval
https://l8z3fn.csb.app/node_modules/billboard.js/dist/billboard.js:7118:43
SVGPathElement.eval
https://l8z3fn.csb.app/node_modules/d3-transition/src/transition/attrTween.js:8:31
tick
https://l8z3fn.csb.app/node_modules/d3-transition/src/transition/schedule.js:110:16
timerFlush
https://l8z3fn.csb.app/node_modules/d3-timer/src/timer.js:53:48
wake
https://l8z3fn.csb.app/node_modules/d3-timer/src/timer.js:62:5

[netil]

@slaweet. thanks for report. I'll check it.

[netil]

The direct root cause, is within internal .isTypeOf() trying reference this.config.data_types when this.config is null ad already updated a bulletproof code as:

billboard.js/src/ChartInternal/internals/type.ts

Line 122 in 7e4fa71

const dataType = this.config && (this.config.data_types?.[id] || this.config.data_type);

if you try with the nightly(or 3.11.0-next.1 RC) build, will see that error doesn't occur.

• https://codesandbox.io/p/sandbox/billboard-error-after-destroy-forked-hcnlsx?file=%2Fpackage.json

In this scenario, error happens on:

• The transition is on the way asynchronously
• .destroy() called, and all internal property became null
  

  billboard.js/src/ChartInternal/shape/arc.ts

  Line 762 in 7e4fa71

  return $$.getArc(interpolated, true);

• Asynchronous transition update, is calling internal method which is nullish now