[GH-ISSUE #8636] The UI stop working after invalid parameter passed to toast.error() #15201

Closed
opened 2026-04-19 21:28:27 -05:00 by GiteaMirror · 4 comments
Owner

Originally created by @weixu365 on GitHub (Jan 16, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/8636

Bug Report

The UI freezes and stops working until a page refreshes when a wrong parameter is passed to toast.error() method. This might related to #1611.

Installation Method

I can reproduce the issue in either git clone locally or using the docker image in AWS ECS

Environment

  • Open WebUI Version: [v0.5.4, it should also exist in many other earlier versions]
  • Operating System: [Not related]
  • Browser (if applicable): [Chrome 132, should also exist in any browser]

Confirmation:

  • I have read and followed all the instructions provided in the README.md.
  • I am on the latest version of both Open WebUI and Ollama.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • I have provided the exact steps to reproduce the bug in the "Steps to Reproduce" section below.

Expected Behavior:

Show error message on error, and the UI shouldn't be frozen.

Actual Behavior:

The UI gets frozen, and nothing works until a page refresh

Description

Bug Summary:

The toast.error(message: string | ComponentType) function doesn't support using exception as the parameter
https://github.com/wobsoriano/svelte-sonner/blob/main/src/lib/Toast.svelte#L393-L398

					{#if typeof toast.title !== 'string'}
						<svelte:component
							this={toast.title}
							{...toast.componentProps}
						/>
					{:else}

If the parameter is an exception toast.error(error), svelte-sonner.Toast assumes it's a ComponentType, which raise the following error. The UI get freezed and stop working until a page refresh. This might related to https://github.com/open-webui/open-webui/issues/1611.

dom.js:1228 Uncaught (in promise) TypeError: t is not a constructor
    at se (dom.js:1228:9)
    at Array.wn (Toast.svelte:338:32)
    at Nt (Toast.svelte:335:42)
    at Array._n (Toast.svelte:330:20)
    at Tn (Toast.svelte:304:22)
    at jt (Component.js:148:34)
    at new Pn (Toast.svelte:179:5)
    at Yt (Toaster.svelte:216:40)
    at Zt (Toaster.svelte:194:11)
    at Gt (Toaster.svelte:163:9)

Reproduction Details

Steps to Reproduce:
To reproduce the issue, you can throw an exception in any place that using toast.error(), to trigger this toast.error

throw an exception in: https://github.com/open-webui/open-webui/blob/main/src/lib/apis/index.ts#L64-L66

    if (error) {
        throw error;
    } else {
        throw new SyntaxError(`index.ts:814 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON`);
    }

Potential solutions to fix

To fix the issue, pass the string error message to toast.error(), then the UI behaviours as expected

  • Pass error with a prefix for better readability: toast.error(`Failed to request /chat/completed api: ${error}`)
    Image

  • Simply use toast.error(`${error}`)
    Image

  • Using toast.error(JSON.stringify(error))
    This is used in the existing code, and the result is not good
    4269df041f/src/lib/components/chat/Chat.svelte (L578)

    Image
Originally created by @weixu365 on GitHub (Jan 16, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/8636 # Bug Report The UI freezes and stops working until a page refreshes when a wrong parameter is passed to toast.error() method. This might related to #1611. ## Installation Method I can reproduce the issue in either `git clone locally` or using the docker image in AWS ECS ## Environment - **Open WebUI Version:** [v0.5.4, it should also exist in many other earlier versions] - **Operating System:** [Not related] - **Browser (if applicable):** [Chrome 132, should also exist in any browser] **Confirmation:** - [x] I have read and followed all the instructions provided in the README.md. - [x] I am on the latest version of both Open WebUI and Ollama. - [x] I have included the browser console logs. - [ ] I have included the Docker container logs. - [x] I have provided the exact steps to reproduce the bug in the "Steps to Reproduce" section below. ## Expected Behavior: Show error message on error, and the UI shouldn't be frozen. ## Actual Behavior: The UI gets frozen, and nothing works until a page refresh ## Description **Bug Summary:** The `toast.error(message: string | ComponentType)` function doesn't support using exception as the parameter https://github.com/wobsoriano/svelte-sonner/blob/main/src/lib/Toast.svelte#L393-L398 ``` {#if typeof toast.title !== 'string'} <svelte:component this={toast.title} {...toast.componentProps} /> {:else} ``` If the parameter is an exception `toast.error(error)`, svelte-sonner.Toast assumes it's a ComponentType, which raise the following error. The UI get freezed and stop working until a page refresh. This might related to https://github.com/open-webui/open-webui/issues/1611. ``` dom.js:1228 Uncaught (in promise) TypeError: t is not a constructor at se (dom.js:1228:9) at Array.wn (Toast.svelte:338:32) at Nt (Toast.svelte:335:42) at Array._n (Toast.svelte:330:20) at Tn (Toast.svelte:304:22) at jt (Component.js:148:34) at new Pn (Toast.svelte:179:5) at Yt (Toaster.svelte:216:40) at Zt (Toaster.svelte:194:11) at Gt (Toaster.svelte:163:9) ``` ## Reproduction Details **Steps to Reproduce:** To reproduce the issue, you can throw an exception in any place that using toast.error(), to trigger this [toast.error](https://github.com/open-webui/open-webui/blob/main/src/lib/components/chat/Chat.svelte#L833) throw an exception in: https://github.com/open-webui/open-webui/blob/main/src/lib/apis/index.ts#L64-L66 ``` if (error) { throw error; } else { throw new SyntaxError(`index.ts:814 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON`); } ``` ## Potential solutions to fix To fix the issue, pass the string error message to toast.error(), then the UI behaviours as expected - Pass error with a prefix for better readability: ```toast.error(`Failed to request /chat/completed api: ${error}`)``` <img width="394" alt="Image" src="https://github.com/user-attachments/assets/7b313b5b-1482-471d-915e-8afc7e0dedab" /> - Simply use ```toast.error(`${error}`)``` <img width="392" alt="Image" src="https://github.com/user-attachments/assets/a5c83e27-4a68-4761-baf0-0d7296cab76b" /> - Using `toast.error(JSON.stringify(error))` ***This is used in the existing code, and the result is not good*** https://github.com/open-webui/open-webui/blob/4269df041fef62208d59babe0faae866d2bfbc3c/src/lib/components/chat/Chat.svelte#L578 <img width="384" alt="Image" src="https://github.com/user-attachments/assets/94435afd-6312-45e2-aa71-e98f0d42c33e" />
Author
Owner

@weixu365 commented on GitHub (Jan 16, 2025):

handleOpenAIError assuming the parameters are string: https://github.com/open-webui/open-webui/blob/main/src/lib/components/chat/Chat.svelte#L1591-L1605

Also suggest always convert to string, e.g. toast.error(`${innerError.detail}`);

<!-- gh-comment-id:2597143726 --> @weixu365 commented on GitHub (Jan 16, 2025): handleOpenAIError assuming the parameters are string: https://github.com/open-webui/open-webui/blob/main/src/lib/components/chat/Chat.svelte#L1591-L1605 Also suggest always convert to string, e.g. ```toast.error(`${innerError.detail}`);```
Author
Owner

@weixu365 commented on GitHub (Jan 16, 2025):

If you fine with the toast.error(`${error}`) approach, need to find and replace the following:

  • toast.error(e);
  • toast.error(err);
  • toast.error(error);
  • toast.error(innerError.
<!-- gh-comment-id:2597149719 --> @weixu365 commented on GitHub (Jan 16, 2025): If you fine with the ```toast.error(`${error}`)``` approach, need to find and replace the following: - toast.error(e); - toast.error(err); - toast.error(error); - toast.error(innerError.
Author
Owner

@weixu365 commented on GitHub (Jan 17, 2025):

The same applies to 4269df041f/src/lib/components/chat/Chat.svelte (L832-L837)

messages.at(-1).error = { content: error };

The Error component is using JSON.stringify which shows {}
4269df041f/src/lib/components/chat/Messages/Error.svelte (L13)

The simplest fix is:

messages.at(-1).error = { content: `${error}` };
Image
<!-- gh-comment-id:2597279424 --> @weixu365 commented on GitHub (Jan 17, 2025): The same applies to https://github.com/open-webui/open-webui/blob/4269df041fef62208d59babe0faae866d2bfbc3c/src/lib/components/chat/Chat.svelte#L832-L837 ``` messages.at(-1).error = { content: error }; ``` The Error component is using JSON.stringify which shows `{}` https://github.com/open-webui/open-webui/blob/4269df041fef62208d59babe0faae866d2bfbc3c/src/lib/components/chat/Messages/Error.svelte#L13 The simplest fix is: ``` messages.at(-1).error = { content: `${error}` }; ``` <img width="569" alt="Image" src="https://github.com/user-attachments/assets/dd96a72e-6b47-4a15-9d43-6ee6443347d3" />
Author
Owner

@tjbck commented on GitHub (Jan 21, 2025):

Should be semi-addressed with a863f98c533e1325a106ab98480045c8a376af89!

<!-- gh-comment-id:2603783858 --> @tjbck commented on GitHub (Jan 21, 2025): Should be semi-addressed with a863f98c533e1325a106ab98480045c8a376af89!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#15201