hustcc / hustcc/echarts-for-react

[Bug] Cannot read properties of null (reading 'getAttribute')

Open
#620 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
5k
Forks
650
PR merge metrics
No merged PRs in 30d

Description

# Description

A race condition where a chart mounts/unmounts too fast can lead to a TypeError

## StackTrace

```
TypeError: Cannot read properties of null (reading 'getAttribute')
at getAttribute (../../node_modules/echarts/lib/util/model.js:639:14)
at getInstanceByDom (../../node_modules/echarts/lib/core/echarts.js:2113:20)
at EChartsReactCore.prototype.getEchartsInstance (../../node_modules/echarts-for-react/esm/core.js:93:29)
at EChartsReactCore.prototype.updateEChartsOption (../../node_modules/echarts-for-react/esm/core.js:183:35)
at t. (../../node_modules/echarts-for-react/esm/core.js:126:48)
at step (../../node_modules/tslib/tslib.es6.mjs:147:21)
at Object.next (../../node_modules/tslib/tslib.es6.mjs:128:51)
at fulfilled (../../node_modules/tslib/tslib.es6.mjs:118:56)
```

## My findings

I believe the bug happens in `initEchartsInstance` because the echart initialization can be too slow. By the time we get it, it might already be unmounted, leading to null.

```ts
public async initEchartsInstance(): Promise {
return new Promise((resolve) => {
// create temporary echart instance
this.echarts.init(this.ele, this.props.theme, this.props.opts);
const echartsInstance = this.getEchartsInstance(); // <-- HERE

echartsInstance.on('finished', () => {...}
```

To confirm my theory, I added an artificial 5-second timeout between the init and the getter and was able to reproduce the error 100% of the time

```ts
public async initEchartsInstance(): Promise {
// create temporary echart instance
this.echarts.init(this.ele, this.props.theme, this.props.opts);

// add an artificial 5 second timeout
await new Promise((resolve) => setTimeout(resolve, 5000));

return new Promise((resolve) => {
const echartsInstance = this.getEchartsInstance();

echartsInstance.on('finished', () => {...}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.