langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-08-26 18:36:52 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

Minified React error #31 - Application error: a client-side exception has occurred #5292

New Issue
Closed
opened 2026-02-21 18:10:17 -05:00 by yindo · 5 comments
yindo commented 2026-02-21 18:10:17 -05:00
Owner
Copy Link
Copy Source

Originally created by @danialcheung on GitHub (Aug 29, 2024).

Originally assigned to: @iamjoel on GitHub.

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • 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.

Dify version

0.7.1, 0.7.2

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Application error: a client-side exception has occurred shows up after an LLM has given its reply to a user. This occurs during a workflow preview, as well as at the 'explore' section. Frequency is undetermined as sometimes it will take a few messages for it to show an error, whereas other times it will output an error instantly after the first message has been replied to.

Upgraded from 0.7.1 to 0.7.2 and the error persists.
image

✔️ Expected Behavior

An error to not occur.

❌ Actual Behavior

Application error: a client-side exception has occurred caused by Minified React error #31.

Originally created by @danialcheung on GitHub (Aug 29, 2024). Originally assigned to: @iamjoel on GitHub. ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [X] Please do not modify this template :) and fill in all the required fields. ### Dify version 0.7.1, 0.7.2 ### Cloud or Self Hosted Self Hosted (Docker) ### Steps to reproduce `Application error: a client-side exception has occurred` shows up after an LLM has given its reply to a user. This occurs during a workflow preview, as well as at the 'explore' section. Frequency is undetermined as sometimes it will take a few messages for it to show an error, whereas other times it will output an error instantly after the first message has been replied to. Upgraded from `0.7.1` to `0.7.2` and the error persists. ![image](https://github.com/user-attachments/assets/f931fcb7-d55f-480d-b63d-b5436cc26e49) ### ✔️ Expected Behavior An error to not occur. ### ❌ Actual Behavior `Application error: a client-side exception has occurred` caused by `Minified React error #31`.
yindo added the 🐞 bug label 2026-02-21 18:10:17 -05:00
yindo closed this issue 2026-02-21 18:10:17 -05:00
yindo commented 2026-02-21 18:10:18 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Aug 29, 2024):

Hello @danialcheung! I'm here to help you with any bugs, questions, or contributions you may have for the Dify repository. Feel free to ask for assistance while we wait for a human maintainer.

I found some relevant information that might help address the issue you're encountering.

Similar Issues and Discussions

  1. Application error: a client-side exception has occurred (see the browser console for more information) - This discussion is still open and might provide some insights [1].
  2. Application error: a client-side exception has occurred - This issue is closed but was last updated on May 22, 2024. It might contain useful information or solutions [2].

Suggested Solutions

  • Configuration and Network Issues: Ensure that your application can communicate with the code execution service. A common solution is to change the connection address to http://host.docker.internal:19530/ instead of 127.0.0.1:19530. Make sure Docker's WSL 2 based engine is configured to add *.docker.internal names to the host's etc/hosts file.
  • Environment Variables: Verify that your CODE_EXECUTION_ENDPOINT and CODE_EXECUTION_API_KEY environment variables are correctly configured and that the code execution service is running and accessible.
  • Exception Handling: Improve exception handling in your code_executor.py to better diagnose issues: 
    try:
    response = post(str(url), json=data, headers=headers, timeout=CODE_EXECUTION_TIMEOUT)
    if response.status_code == 503:
        raise CodeExecutionException('Code execution service is unavailable')
    elif response.status_code != 200:
        raise Exception(f'Failed to execute code, got status code {response.status_code}, please check if the sandbox service is running')
except CodeExecutionException as e:
    raise e
except Exception as e:
    raise CodeExecutionException('Failed to execute code, this is likely a network issue, please check if the sandbox service is running')

React Error #31

Minified React error #31 typically occurs due to issues with component state or props. Here are some general steps to resolve it:

  1. Check Component State and Props: Ensure that all required props are being passed correctly and that the component state is being managed properly.
  2. Update Dependencies: Make sure all your dependencies, especially React and related libraries, are up to date.
  3. Error Boundaries: Implement error boundaries in your React application to catch and handle errors gracefully.

Workflow Preview Feature

The WorkflowPreview component in Dify is responsible for displaying different panels based on the workflow state. It has dependencies on several React components like ResultText, ResultPanel, TracingPanel, etc. Ensure these components are functioning correctly and that their state and props are managed properly [3].

Error Handling in Dify

The api/extensions/ext_sentry.py module is responsible for handling client-side exceptions and error reporting in Dify. It initializes Sentry for error tracking and integrates it with Flask and Celery [4].

If the issue persists, consider checking the browser console for specific error messages and reviewing the application and service logs for more detailed insights.

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Aug 29, 2024): <!-- Greeting --> Hello @danialcheung! I'm here to help you with any bugs, questions, or contributions you may have for the Dify repository. Feel free to ask for assistance while we wait for a human maintainer. <!-- Answer --> I found some relevant information that might help address the issue you're encountering. ### Similar Issues and Discussions 1. **[Application error: a client-side exception has occurred (see the browser console for more information)](https://github.com/langgenius/dify/discussions/3934)** - This discussion is still open and might provide some insights <sup>[[1]](https://github.com/langgenius/dify/discussions/3934)</sup>. 2. **[Application error: a client-side exception has occurred](https://github.com/langgenius/dify/issues/4522)** - This issue is closed but was last updated on May 22, 2024. It might contain useful information or solutions <sup>[[2]](https://github.com/langgenius/dify/issues/4522)</sup>. ### Suggested Solutions - **Configuration and Network Issues**: Ensure that your application can communicate with the code execution service. A common solution is to change the connection address to `http://host.docker.internal:19530/` instead of `127.0.0.1:19530`. Make sure Docker's WSL 2 based engine is configured to add `*.docker.internal` names to the host's `etc/hosts` file. - **Environment Variables**: Verify that your `CODE_EXECUTION_ENDPOINT` and `CODE_EXECUTION_API_KEY` environment variables are correctly configured and that the code execution service is running and accessible. - **Exception Handling**: Improve exception handling in your `code_executor.py` to better diagnose issues: ```python try: response = post(str(url), json=data, headers=headers, timeout=CODE_EXECUTION_TIMEOUT) if response.status_code == 503: raise CodeExecutionException('Code execution service is unavailable') elif response.status_code != 200: raise Exception(f'Failed to execute code, got status code {response.status_code}, please check if the sandbox service is running') except CodeExecutionException as e: raise e except Exception as e: raise CodeExecutionException('Failed to execute code, this is likely a network issue, please check if the sandbox service is running') ``` ### React Error #31 Minified React error #31 typically occurs due to issues with component state or props. Here are some general steps to resolve it: 1. **Check Component State and Props**: Ensure that all required props are being passed correctly and that the component state is being managed properly. 2. **Update Dependencies**: Make sure all your dependencies, especially React and related libraries, are up to date. 3. **Error Boundaries**: Implement error boundaries in your React application to catch and handle errors gracefully. ### Workflow Preview Feature The `WorkflowPreview` component in Dify is responsible for displaying different panels based on the workflow state. It has dependencies on several React components like `ResultText`, `ResultPanel`, `TracingPanel`, etc. Ensure these components are functioning correctly and that their state and props are managed properly <sup>[[3]](https://github.com/langgenius/dify/blob/main/web/app/components/workflow/panel/workflow-preview.tsx)</sup>. ### Error Handling in Dify The `api/extensions/ext_sentry.py` module is responsible for handling client-side exceptions and error reporting in Dify. It initializes Sentry for error tracking and integrates it with Flask and Celery <sup>[[4]](https://github.com/langgenius/dify/blob/main/api/extensions/ext_sentry.py)</sup>. If the issue persists, consider checking the browser console for specific error messages and reviewing the application and service logs for more detailed insights. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
yindo commented 2026-02-21 18:10:18 -05:00
Author
Owner
Copy Link
Copy Source

@danialcheung commented on GitHub (Aug 29, 2024):

Update: I have found that disabling the "Follow-up" feature has solved the issue for now.

@danialcheung commented on GitHub (Aug 29, 2024): **Update**: I have found that disabling the "Follow-up" feature has solved the issue for now.
yindo commented 2026-02-21 18:10:18 -05:00
Author
Owner
Copy Link
Copy Source

@iamjoel commented on GitHub (Sep 2, 2024):

Could you please give me the app DSL to reproduce it? @danialcheung

@iamjoel commented on GitHub (Sep 2, 2024): Could you please give me the app DSL to reproduce it? @danialcheung
yindo commented 2026-02-21 18:10:18 -05:00
Author
Owner
Copy Link
Copy Source

@danialcheung commented on GitHub (Sep 2, 2024):

@iamjoel Sure, I've made a simple workflow that causes the error. Nothing special about it other than having the 'Follow-up' feature enabled. Just rename the extension back to .yml
For Debugging.yml.txt

@danialcheung commented on GitHub (Sep 2, 2024): @iamjoel Sure, I've made a simple workflow that causes the error. Nothing special about it other than having the 'Follow-up' feature enabled. Just rename the extension back to `.yml` [For Debugging.yml.txt](https://github.com/user-attachments/files/16842906/For.Debugging.yml.txt)
yindo commented 2026-02-21 18:10:18 -05:00
Author
Owner
Copy Link
Copy Source

@iamjoel commented on GitHub (Sep 2, 2024):

Maybe the issue is caused by qwen2:72b to generate the 'Follow-up' suggestions. I don't have the api key of qwen2:72b . I can't reproduce the issue when I use models of openai with 'Follow-up' feature enabled.
When the issue happens, see if the suggested-questions api return the errror info. @danialcheung

image
@iamjoel commented on GitHub (Sep 2, 2024): Maybe the issue is caused by qwen2:72b to generate the 'Follow-up' suggestions. I don't have the api key of qwen2:72b . I can't reproduce the issue when I use models of openai with 'Follow-up' feature enabled. When the issue happens, see if the `suggested-questions` api return the errror info. @danialcheung <img width="460" alt="image" src="https://github.com/user-attachments/assets/8cfb245d-b745-49ed-8cf4-8d37a037bc66">
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#5292
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?