github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-29 08:07:34 -05:00
Code Issues 2.4k Packages Projects Releases 129 Wiki Activity

The UI stop working after invalid parameter passed to toast.error() #3307

New Issue
Closed
opened 2025-11-11 15:28:49 -06:00 by GiteaMirror · 4 comments
GiteaMirror commented 2025-11-11 15:28:49 -06:00
Owner
Copy Link
Copy Source

Originally created by @weixu365 on GitHub (Jan 16, 2025).

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

Originally created by @weixu365 on GitHub (Jan 16, 2025). # 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" />
GiteaMirror commented 2025-11-11 15:28:50 -06:00
Author
Owner
Copy Link
Copy Source

@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}`);

@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}`);```
GiteaMirror commented 2025-11-11 15:28:50 -06:00
Author
Owner
Copy Link
Copy Source

@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.
@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.
GiteaMirror commented 2025-11-11 15:28:50 -06:00
Author
Owner
Copy Link
Copy Source

@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}` };
Image
@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" />
GiteaMirror commented 2025-11-11 15:28:50 -06:00
Author
Owner
Copy Link
Copy Source

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

Should be semi-addressed with a863f98c533e1325a106ab98480045c8a376af89!

@tjbck commented on GitHub (Jan 21, 2025): Should be semi-addressed with a863f98c533e1325a106ab98480045c8a376af89!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
GiteaMirror ninjasurge (Kaehlen Rog)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#3307