When the content sent or the content answered by the large model contains some specific echarts codes, the application will crash directly

[FamousMai]

Self Checks

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

Dify version

0.7.1

Cloud or Self Hosted

Cloud

Steps to reproduce

1. When I use the prompt 'Use ECharts to draw an example: Display pie charts on a map' to generate a chart with a large language model, it produces ECharts JavaScript code similar to the example below. This causes the application to immediately crash. Moreover, every time I click to enter the application, it crashes instantly, rendering the application completely unusable.

2. The second scenario that triggers this bug is when the aforementioned ECharts code is directly sent to the application, which also causes an immediate crash.

```echarts
{
  "geo": {
    "map": "china",
    "roam": true
  },
  "tooltip": {},
  "legend": {
    "data": ["Category A", "Category B", "Category C"]
  },
  "series": [
    {
      "name": "City Data",
      "type": "pie",
      "coordinateSystem": "geo",
      "data": [
        {
          "name": "Beijing",
          "value": [116.4074, 39.9042, 30, 20, 10],
          "itemStyle": {"color": "#f18d00"}
        },
        {
          "name": "Shanghai",
          "value": [121.4737, 31.2304, 25, 25, 15],
          "itemStyle": {"color": "#00a0e9"}
        },
        {
          "name": "Guangzhou",
          "value": [113.2644, 23.1291, 20, 15, 25],
          "itemStyle": {"color": "#7cba00"}
        }
      ],
      "label": {
        "show": false
      },
      "emphasis": {
        "label": {
          "show": true
        }
      },
      "radius": "15%"
    }
  ]
}

![image](https://github.com/user-attachments/assets/a5e79b0f-938f-4360-a267-52e93df9b152)

### ✔️ Expected Behavior

Can chat normally

### ❌ Actual Behavior

Unable to chat normally, and entering the application will crash with the error: Application error: a client-side exception has occurred (see the browser console for more information).

[dosubot[bot]]

The issue you're encountering seems to be related to the handling and rendering of ECharts JavaScript code within the Dify application. When the application attempts to process the provided ECharts code, it crashes, leading to a client-side exception.

Potential Causes and Solutions

1. Complex ECharts Configuration:

   • The provided ECharts configuration might be too complex or not properly handled by the application, causing it to crash. Simplifying the ECharts configuration or breaking it down into smaller parts might help identify the problematic section.

2. Error Handling and Validation:

   • Ensure that the application has proper error handling and validation mechanisms in place for user-generated content, especially for complex JavaScript code like ECharts. This can prevent the application from crashing and provide meaningful error messages to the user.

3. Sanitization of User-Generated Code:

   • Implement sanitization and validation of user-generated JavaScript code to prevent security vulnerabilities and client-side exceptions. This can include checking for unsupported configurations or invalid data before rendering the chart.

Steps to Mitigate the Issue

1. Add Error Boundaries:

   • Use React error boundaries to catch JavaScript errors anywhere in the component tree and display a fallback UI instead of crashing the application.

2. Validate ECharts Configuration:

   • Before rendering the chart, validate the ECharts configuration to ensure it meets the expected format and does not contain any unsupported features.

3. Log and Debug:

   • Utilize logging and debugging tools to capture and analyze the error. Integrating with tools like LangSmith can help monitor and trace the application's performance and errors ^[1].

4. Update Dependencies:

   • Ensure that all dependencies, including echarts and echarts-for-react, are up to date to benefit from the latest bug fixes and improvements.

By implementing these measures, you can improve the stability and performance of the Dify application when handling complex ECharts configurations.

To continue talking to Dosu, mention @dosu.

[crazywoola]

@zhujinle Can you take a look at this issue?

[zhujinle]

We have not registered the json information of China map to the system. You need to modify the code to register the China map. See ECharts Doc

The code attempts to access an undefined object that references an unregistered map, causing the program to crash.

And because of the problem of session cache, another rendering was performed when refreshing, which led to a new crash.

The best way at present is to delete cookies from the browser side, thereby disconnecting the link with the session history and preventing the application from rendering again.

ECharts has too many customizable items and there are too many maps that can be imported, I don’t have a very good way to solve the problem of map import. It seems that I can only disable geo syntax or limit chart types?

[FamousMai]

Will the system add support for Chinese maps by default in the future?

Can you add a judgment for unregistered maps? Otherwise, the content returned by the big model contains unregistered map json data, and it can't just crash.

[zhujinle]

Will the system add support for Chinese maps by default in the future?

Can you add a judgment for unregistered maps? Otherwise, the content returned by the big model contains unregistered map json data, and it can't just crash.

As mentioned above, I think ECharts has too many customizable items, and dify is not a project limited to China. Some of the default maps introduced manually may not be comprehensive enough to meet everyone's needs. This will still lead to this problem, and it may also cause too many registrations and affect system loading.

If you have a better on-demand registrations method, welcome to discuss or submit a PR

For the second issue, ECharts will handle numerical errors by itself during testing. I thought it would be the same for other issues, without considering maps and other situations😥. I will open a new PR to add an error boundary.

[baiyi-os]

怎样才能百分百的输出echarts图表