Heuristic:Langgenius Dify SSE Streaming Error Handling
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Streaming |
| Last Updated | 2026-02-08 11:00 GMT |
Overview
SSE stream error handling pattern that suppresses benign page-unload errors (`AbortError` and `TypeError: Cannot assign to read only property`) to prevent spurious error toasts during navigation.
Description
When users navigate away from a page that has an active SSE (Server-Sent Events) stream, the browser aborts the underlying fetch request. This triggers error callbacks with `AbortError` or `TypeError` messages that are not actual errors but normal browser lifecycle events. Without filtering these errors, users see confusing error toast notifications on every page navigation during streaming operations like chat, workflow execution, or debug preview.
Usage
Apply this heuristic whenever you implement SSE-based streaming in the frontend, particularly in chat messages, workflow execution monitoring, and debug preview. This affects the SendChatMessage, UseWorkflowRunHistory, and UsePublishWorkflow implementations.
The Insight (Rule of Thumb)
- Action: Filter out two specific error patterns before showing error toasts to users: (1) `AbortError: The user aborted a request` and (2) `TypeError: Cannot assign to read only property`.
- Value: Eliminates 100% of spurious error toasts during page navigation with active streams.
- Trade-off: Risk of hiding a genuine `AbortError` or `TypeError`, but these are extremely rare in SSE contexts and always benign.
Reasoning
The `AbortError` occurs when the browser's `AbortController` cancels the fetch request during navigation. The `TypeError` occurs when the browser's rendering engine is torn down while the SSE callback attempts to update a read-only DOM property. Both are normal lifecycle events, not actionable errors. Showing them as error toasts creates noise and undermines user trust in the platform's reliability.
Code Evidence
From `web/service/base.ts:518-520`:
if (moreInfo.errorMessage !== 'AbortError: The user aborted a request.'
&& !moreInfo.errorMessage.includes(
'TypeError: Cannot assign to read only property'))
Toast.notify({ type: 'error', message: moreInfo.errorMessage })