JSON temporary parsing failure leads to ECharts chart rendering error "ECharts error -Wrong JSON format"

[yuhuan0669]

Self Checks

• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Content

Background

When using workflow ECharts to render charts, the error "ECharts error -Wrong JSON format" is initially reported. After a while, the chart renders normally.

Error Symptoms

The following JSON parsing-related errors appear in the console:

SyntaxError: JSON.parse: unterminated string at line 2 column 11 of the JSON data
SyntaxError: JSON.parse: unexpected end of data at line 2 column 13 of the JSON data
SyntaxError: JSON.parse: end of data while reading object contents at line 2 column 15 of the JSON data
In addition, an error unrelated to media playback also appeared (possibly unrelated to the issue):

Analysis

By observing the Raw JSON string output in the console, it can be seen that before successful rendering, each attempt to parse the JSON string involves incomplete fragments, for example:

{ "tooltip":
{ "tooltip": { "trigger": "axis"
{ "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": [ "2023-11-01", "2023-11-02"
These incomplete strings cause the JSON.parse method to throw exceptions. The complete JSON string should be a valid ECharts configuration object, but in reality, fragmented data is being passed to the parser during the process.

A possible cause is a streaming parsing attempt: The code might be trying to parse the JSON in parts without waiting for the complete data to arrive.

Solution

To solve this problem, streaming parsing needs to be avoided, and it must be ensured that JSON.parse receives the complete JSON string.

Appendix: Complete JSON Example

Below is an example of a complete ECharts configuration JSON:

JSON

{
"tooltip": {
"trigger": "axis"
},
"xAxis": {
"type": "category",
"data": ["2023-11-01", "2023-11-02", "2023-11-03", "2023-11-04", "2023-11-05"],
"axisLabel": {
"rotate": 45,
"interval": 0
}
},
"yAxis": {
"type": "value",
"name": "Avg Value",
"axisLabel": {
"formatter": "{value}"
}
},
"series": [
{
"name": "Avg Value",
"type": "line",
"data": [150, 200, 180, 210, 190],
"smooth": true,
"lineStyle": {
"width": 2,
"color": "#5470C6"
},
"symbol": "circle",
"symbolSize": 6
}
],
"title": {
"text": "Avg Value Over Time",
"left": "center"
},
"grid": {
"left": "10%",
"right": "10%",
"bottom": "15%",
"containLabel": true
}
}
Request for Assistance

[jason-lee-x]

You may have to upgrade?

Cuz your data rendering well on my Env.

[wanghaozi]

"When using workflow ECharts to render charts, the error "ECharts error -Wrong JSON format" is initially reported. After a while, the chart renders normally." Same problem, I guess that caused by un-complete response, when it response completely, the echarts goes well.

[jason-lee-x]

yeah, I think they have to hide this unnecessary information in case of the user think our application crashed

I think that is quite important but now on still has no one to fix it