Frontend app cannot display processing results when backend takes a long time to respond #6595

Closed
opened 2026-02-21 18:16:28 -05:00 by yindo · 3 comments
Owner

Originally created by @lilacs2039 on GitHub (Nov 6, 2024).

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.11.0

Cloud or Self Hosted

Cloud

Steps to reproduce

Run the bug reproduction application below so that it takes about 100 seconds to respond.
(This emulates repeating a time spending LLM operation with an iteration node.)

https://udify.app/workflow/bmImLooCSfmkCjZq

Execution example 1: If it takes about 100 seconds, the response result cannot be displayed.

image

Execution example 2: It can be displayed normally for about 20 seconds.

image

remarks

You can see that normal results can be obtained from the network tab of Chrome developer tools.
In other words, this seems to be a bug related to front-end rendering.

✔️ Expected Behavior

It is expected that the results will be displayed successfully regardless of the processing time.

Actual Behavior

Frontend app cannot display processing results when backend takes a long time to respond.

Originally created by @lilacs2039 on GitHub (Nov 6, 2024). ### 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.11.0 ### Cloud or Self Hosted Cloud ### Steps to reproduce Run the bug reproduction application below so that it takes about 100 seconds to respond. (This emulates repeating a time spending LLM operation with an iteration node.) https://udify.app/workflow/bmImLooCSfmkCjZq Execution example 1: If it takes about 100 seconds, the response result cannot be displayed. ![image](https://github.com/user-attachments/assets/63aa5932-e12a-41fc-8029-58327f4ea14e) Execution example 2: It can be displayed normally for about 20 seconds. ![image](https://github.com/user-attachments/assets/d2d6d58c-69f1-4844-8c46-9b3d2d0e43f6) ### remarks You can see that normal results can be obtained from the network tab of Chrome developer tools. In other words, this seems to be a bug related to front-end rendering. ### ✔️ Expected Behavior It is expected that the results will be displayed successfully regardless of the processing time. ### ❌ Actual Behavior Frontend app cannot display processing results when backend takes a long time to respond.
yindo added the 🐞 bug label 2026-02-21 18:16:28 -05:00
yindo closed this issue 2026-02-21 18:16:28 -05:00
Author
Owner

@lilacs2039 commented on GitHub (Nov 6, 2024):

App DSL

app:
  description: ''
  icon: 🤖
  icon_background: '#FFEAD5'
  mode: workflow
  name: emulate_long_term_response
  use_icon_as_answer_icon: false
kind: app
version: 0.1.3
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      allowed_file_extensions:
      - .JPG
      - .JPEG
      - .PNG
      - .GIF
      - .WEBP
      - .SVG
      allowed_file_types:
      - image
      allowed_file_upload_methods:
      - local_file
      - remote_url
      enabled: false
      fileUploadConfig:
        audio_file_size_limit: 50
        batch_count_limit: 5
        file_size_limit: 15
        image_file_size_limit: 10
        video_file_size_limit: 100
        workflow_file_upload_limit: 10
      image:
        enabled: false
        number_limits: 3
        transfer_methods:
        - local_file
        - remote_url
      number_limits: 3
    opening_statement: ''
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        isInIteration: true
        iteration_id: '1730885068561'
        sourceType: iteration-start
        targetType: code
      id: 1730885068561start-source-1730885075574-target
      source: 1730885068561start
      sourceHandle: source
      target: '1730885075574'
      targetHandle: target
      type: custom
      zIndex: 1002
    - data:
        isInIteration: true
        iteration_id: '1730885068561'
        sourceType: code
        targetType: template-transform
      id: 1730885075574-source-1730885078311-target
      source: '1730885075574'
      sourceHandle: source
      target: '1730885078311'
      targetHandle: target
      type: custom
      zIndex: 1002
    - data:
        isInIteration: false
        sourceType: start
        targetType: code
      id: 1730885060907-source-1730885153260-target
      source: '1730885060907'
      sourceHandle: source
      target: '1730885153260'
      targetHandle: target
      type: custom
      zIndex: 0
    - data:
        isInIteration: false
        sourceType: code
        targetType: iteration
      id: 1730885153260-source-1730885068561-target
      source: '1730885153260'
      sourceHandle: source
      target: '1730885068561'
      targetHandle: target
      type: custom
      zIndex: 0
    - data:
        isInIteration: false
        sourceType: iteration
        targetType: template-transform
      id: 1730885068561-source-1730885322480-target
      source: '1730885068561'
      sourceHandle: source
      target: '1730885322480'
      targetHandle: target
      type: custom
      zIndex: 0
    - data:
        isInIteration: false
        sourceType: template-transform
        targetType: end
      id: 1730885322480-source-1730885084416-target
      source: '1730885322480'
      sourceHandle: source
      target: '1730885084416'
      targetHandle: target
      type: custom
      zIndex: 0
    nodes:
    - data:
        desc: ''
        selected: false
        title: 開始
        type: start
        variables:
        - label: delay_count(waits x10 sec. )
          max_length: 48
          options: []
          required: true
          type: number
          variable: delay_count
      height: 89
      id: '1730885060907'
      position:
        x: 383
        y: 128.28963538105157
      positionAbsolute:
        x: 383
        y: 128.28963538105157
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    - data:
        desc: ''
        error_handle_mode: terminated
        is_parallel: false
        iterator_selector:
        - '1730885153260'
        - result
        output_selector:
        - '1730885078311'
        - output
        output_type: array[string]
        parallel_nums: 10
        selected: false
        start_node_id: 1730885068561start
        title: イテレーション
        type: iteration
        width: 690
      height: 147
      id: '1730885068561'
      position:
        x: 684.2599210214667
        y: 282
      positionAbsolute:
        x: 684.2599210214667
        y: 282
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 690
      zIndex: 1
    - data:
        desc: ''
        isInIteration: true
        selected: false
        title: ''
        type: iteration-start
      draggable: false
      height: 48
      id: 1730885068561start
      parentId: '1730885068561'
      position:
        x: 24
        y: 68
      positionAbsolute:
        x: 708.2599210214667
        y: 350
      selectable: false
      sourcePosition: right
      targetPosition: left
      type: custom-iteration-start
      width: 44
      zIndex: 1002
    - data:
        code: "import time\ndef main() -> dict:\n    time.sleep(10)\n    return {\n\
          \        \"result\": \"\",\n    }\n"
        code_language: python3
        desc: ''
        isInIteration: true
        iteration_id: '1730885068561'
        outputs:
          result:
            children: null
            type: string
        selected: false
        title: コード
        type: code
        variables: []
      height: 53
      id: '1730885075574'
      parentId: '1730885068561'
      position:
        x: 128
        y: 71.77976306440041
      positionAbsolute:
        x: 812.2599210214667
        y: 353.7797630644004
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
      zIndex: 1002
    - data:
        desc: ''
        isInIteration: true
        iteration_id: '1730885068561'
        selected: false
        template: 10 seconds have passed.
        title: テンプレート
        type: template-transform
        variables: []
      height: 53
      id: '1730885078311'
      parentId: '1730885068561'
      position:
        x: 431
        y: 68
      positionAbsolute:
        x: 1115.2599210214667
        y: 350
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
      zIndex: 1002
    - data:
        desc: ''
        outputs:
        - value_selector:
          - '1730885322480'
          - output
          variable: output
        selected: false
        title: 終了
        type: end
      height: 89
      id: '1730885084416'
      position:
        x: 1236.5911175420847
        y: 614.6191496672326
      positionAbsolute:
        x: 1236.5911175420847
        y: 614.6191496672326
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    - data:
        code: "def main(delay_count: int) -> dict:\n    return {\n        \"result\"\
          : [i for i in range(delay_count)],\n    }"
        code_language: python3
        desc: ''
        outputs:
          result:
            children: null
            type: array[number]
        selected: false
        title: コード 2
        type: code
        variables:
        - value_selector:
          - '1730885060907'
          - delay_count
          variable: delay_count
      height: 53
      id: '1730885153260'
      position:
        x: 675.3016769802954
        y: 128.28963538105157
      positionAbsolute:
        x: 675.3016769802954
        y: 128.28963538105157
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    - data:
        desc: ''
        selected: false
        template: '{{ arg1 | join("\n")}}'
        title: テンプレート 2
        type: template-transform
        variables:
        - value_selector:
          - '1730885068561'
          - output
          variable: arg1
      height: 53
      id: '1730885322480'
      position:
        x: 650.5890456691232
        y: 623.4385968175002
      positionAbsolute:
        x: 650.5890456691232
        y: 623.4385968175002
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 243
    viewport:
      x: -521.917658648957
      y: 900.3567724190433
      zoom: 0.7937005438926702

@lilacs2039 commented on GitHub (Nov 6, 2024): App DSL ```yml app: description: '' icon: 🤖 icon_background: '#FFEAD5' mode: workflow name: emulate_long_term_response use_icon_as_answer_icon: false kind: app version: 0.1.3 workflow: conversation_variables: [] environment_variables: [] features: file_upload: allowed_file_extensions: - .JPG - .JPEG - .PNG - .GIF - .WEBP - .SVG allowed_file_types: - image allowed_file_upload_methods: - local_file - remote_url enabled: false fileUploadConfig: audio_file_size_limit: 50 batch_count_limit: 5 file_size_limit: 15 image_file_size_limit: 10 video_file_size_limit: 100 workflow_file_upload_limit: 10 image: enabled: false number_limits: 3 transfer_methods: - local_file - remote_url number_limits: 3 opening_statement: '' retriever_resource: enabled: true sensitive_word_avoidance: enabled: false speech_to_text: enabled: false suggested_questions: [] suggested_questions_after_answer: enabled: false text_to_speech: enabled: false language: '' voice: '' graph: edges: - data: isInIteration: true iteration_id: '1730885068561' sourceType: iteration-start targetType: code id: 1730885068561start-source-1730885075574-target source: 1730885068561start sourceHandle: source target: '1730885075574' targetHandle: target type: custom zIndex: 1002 - data: isInIteration: true iteration_id: '1730885068561' sourceType: code targetType: template-transform id: 1730885075574-source-1730885078311-target source: '1730885075574' sourceHandle: source target: '1730885078311' targetHandle: target type: custom zIndex: 1002 - data: isInIteration: false sourceType: start targetType: code id: 1730885060907-source-1730885153260-target source: '1730885060907' sourceHandle: source target: '1730885153260' targetHandle: target type: custom zIndex: 0 - data: isInIteration: false sourceType: code targetType: iteration id: 1730885153260-source-1730885068561-target source: '1730885153260' sourceHandle: source target: '1730885068561' targetHandle: target type: custom zIndex: 0 - data: isInIteration: false sourceType: iteration targetType: template-transform id: 1730885068561-source-1730885322480-target source: '1730885068561' sourceHandle: source target: '1730885322480' targetHandle: target type: custom zIndex: 0 - data: isInIteration: false sourceType: template-transform targetType: end id: 1730885322480-source-1730885084416-target source: '1730885322480' sourceHandle: source target: '1730885084416' targetHandle: target type: custom zIndex: 0 nodes: - data: desc: '' selected: false title: 開始 type: start variables: - label: delay_count(waits x10 sec. ) max_length: 48 options: [] required: true type: number variable: delay_count height: 89 id: '1730885060907' position: x: 383 y: 128.28963538105157 positionAbsolute: x: 383 y: 128.28963538105157 selected: false sourcePosition: right targetPosition: left type: custom width: 243 - data: desc: '' error_handle_mode: terminated is_parallel: false iterator_selector: - '1730885153260' - result output_selector: - '1730885078311' - output output_type: array[string] parallel_nums: 10 selected: false start_node_id: 1730885068561start title: イテレーション type: iteration width: 690 height: 147 id: '1730885068561' position: x: 684.2599210214667 y: 282 positionAbsolute: x: 684.2599210214667 y: 282 selected: false sourcePosition: right targetPosition: left type: custom width: 690 zIndex: 1 - data: desc: '' isInIteration: true selected: false title: '' type: iteration-start draggable: false height: 48 id: 1730885068561start parentId: '1730885068561' position: x: 24 y: 68 positionAbsolute: x: 708.2599210214667 y: 350 selectable: false sourcePosition: right targetPosition: left type: custom-iteration-start width: 44 zIndex: 1002 - data: code: "import time\ndef main() -> dict:\n time.sleep(10)\n return {\n\ \ \"result\": \"\",\n }\n" code_language: python3 desc: '' isInIteration: true iteration_id: '1730885068561' outputs: result: children: null type: string selected: false title: コード type: code variables: [] height: 53 id: '1730885075574' parentId: '1730885068561' position: x: 128 y: 71.77976306440041 positionAbsolute: x: 812.2599210214667 y: 353.7797630644004 selected: false sourcePosition: right targetPosition: left type: custom width: 243 zIndex: 1002 - data: desc: '' isInIteration: true iteration_id: '1730885068561' selected: false template: 10 seconds have passed. title: テンプレート type: template-transform variables: [] height: 53 id: '1730885078311' parentId: '1730885068561' position: x: 431 y: 68 positionAbsolute: x: 1115.2599210214667 y: 350 selected: false sourcePosition: right targetPosition: left type: custom width: 243 zIndex: 1002 - data: desc: '' outputs: - value_selector: - '1730885322480' - output variable: output selected: false title: 終了 type: end height: 89 id: '1730885084416' position: x: 1236.5911175420847 y: 614.6191496672326 positionAbsolute: x: 1236.5911175420847 y: 614.6191496672326 selected: true sourcePosition: right targetPosition: left type: custom width: 243 - data: code: "def main(delay_count: int) -> dict:\n return {\n \"result\"\ : [i for i in range(delay_count)],\n }" code_language: python3 desc: '' outputs: result: children: null type: array[number] selected: false title: コード 2 type: code variables: - value_selector: - '1730885060907' - delay_count variable: delay_count height: 53 id: '1730885153260' position: x: 675.3016769802954 y: 128.28963538105157 positionAbsolute: x: 675.3016769802954 y: 128.28963538105157 selected: false sourcePosition: right targetPosition: left type: custom width: 243 - data: desc: '' selected: false template: '{{ arg1 | join("\n")}}' title: テンプレート 2 type: template-transform variables: - value_selector: - '1730885068561' - output variable: arg1 height: 53 id: '1730885322480' position: x: 650.5890456691232 y: 623.4385968175002 positionAbsolute: x: 650.5890456691232 y: 623.4385968175002 selected: false sourcePosition: right targetPosition: left type: custom width: 243 viewport: x: -521.917658648957 y: 900.3567724190433 zoom: 0.7937005438926702 ```
Author
Owner

@dosubot[bot] commented on GitHub (Nov 6, 2024):

Hey @lilacs2039! I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this together!

To address the issue where the frontend app cannot display processing results when the backend takes a long time to respond, you should consider using the streaming response mode. This mode allows the frontend to receive and display results incrementally as they are processed, rather than waiting for the entire process to complete. This can significantly improve the user experience for long-running operations.

Here's how you can configure the request to use streaming mode:

curl -X POST '${props.appDetail.api_base_url}/workflows/run' \
--header 'Authorization: Bearer {api_key}' \
--header 'Content-Type: application/json' \
--data-raw '{
    "inputs": {},
    "response_mode": "streaming",
    "user": "abc-123"
}'

By using streaming mode, the frontend can start displaying results as they are generated, which should help in scenarios where the backend takes a long time to respond [1].

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Nov 6, 2024): <!-- Greeting --> Hey @lilacs2039! I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this together! <!-- Answer --> To address the issue where the frontend app cannot display processing results when the backend takes a long time to respond, you should consider using the `streaming` response mode. This mode allows the frontend to receive and display results incrementally as they are processed, rather than waiting for the entire process to complete. This can significantly improve the user experience for long-running operations. Here's how you can configure the request to use `streaming` mode: ```bash curl -X POST '${props.appDetail.api_base_url}/workflows/run' \ --header 'Authorization: Bearer {api_key}' \ --header 'Content-Type: application/json' \ --data-raw '{ "inputs": {}, "response_mode": "streaming", "user": "abc-123" }' ``` By using `streaming` mode, the frontend can start displaying results as they are generated, which should help in scenarios where the backend takes a long time to respond <sup>[[1]](https://github.com/langgenius/dify/blob/main/web/app/components/develop/template/template_workflow.en.mdx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
Author
Owner

@crazywoola commented on GitHub (Nov 6, 2024):

Duplicated

https://github.com/langgenius/dify/blob/0540995e5c9f14f9b5ad19ba794dc5f9a8671142/web/config/index.ts#L251

We have this value in Cloud version by default.

You can see related issues and discussions here https://github.com/langgenius/dify/issues/8395

@crazywoola commented on GitHub (Nov 6, 2024): Duplicated https://github.com/langgenius/dify/blob/0540995e5c9f14f9b5ad19ba794dc5f9a8671142/web/config/index.ts#L251 We have this value in Cloud version by default. You can see related issues and discussions here https://github.com/langgenius/dify/issues/8395
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#6595