-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): toast on queue item errors, improved error descriptions
Show error toasts on queue item error events instead of invocation error events. This allows errors that occurred outside node execution to be surfaced to the user. The error description component is updated to show the new error message if available. Commercial handling is retained, but local now uses the same component to display the error message itself.
- Loading branch information
1 parent
50dd569
commit f5a775a
Showing
4 changed files
with
86 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
invokeai/frontend/web/src/features/toast/ErrorToastDescription.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { Flex, IconButton, Text } from '@invoke-ai/ui-library'; | ||
import { t } from 'i18next'; | ||
import { upperFirst } from 'lodash-es'; | ||
import { useMemo } from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { PiCopyBold } from 'react-icons/pi'; | ||
|
||
function onCopy(sessionId: string) { | ||
navigator.clipboard.writeText(sessionId); | ||
} | ||
|
||
const ERROR_TYPE_TO_TITLE: Record<string, string> = { | ||
OutOfMemoryError: 'toast.outOfMemoryError', | ||
}; | ||
|
||
const COMMERCIAL_ERROR_TYPE_TO_DESC: Record<string, string> = { | ||
OutOfMemoryError: 'toast.outOfMemoryErrorDesc', | ||
}; | ||
|
||
export const getTitleFromErrorType = (errorType: string) => { | ||
return t(ERROR_TYPE_TO_TITLE[errorType] ?? 'toast.serverError'); | ||
}; | ||
|
||
type Props = { errorType: string; errorMessage?: string | null; sessionId: string; isLocal: boolean }; | ||
|
||
export default function ErrorToastDescription({ errorType, errorMessage, sessionId, isLocal }: Props) { | ||
const { t } = useTranslation(); | ||
const description = useMemo(() => { | ||
// Special handling for commercial error types | ||
const descriptionTKey = isLocal ? null : COMMERCIAL_ERROR_TYPE_TO_DESC[errorType]; | ||
if (descriptionTKey) { | ||
return t(descriptionTKey); | ||
} | ||
if (errorMessage) { | ||
return upperFirst(errorMessage); | ||
} | ||
}, [errorMessage, errorType, isLocal, t]); | ||
return ( | ||
<Flex flexDir="column"> | ||
{description && <Text fontSize="md">{description}</Text>} | ||
{!isLocal && ( | ||
<Flex gap="2" alignItems="center"> | ||
<Text fontSize="sm" fontStyle="italic"> | ||
{t('toast.sessionRef', { sessionId })} | ||
</Text> | ||
<IconButton | ||
size="sm" | ||
aria-label="Copy" | ||
icon={<PiCopyBold />} | ||
onClick={onCopy.bind(null, sessionId)} | ||
variant="ghost" | ||
sx={sx} | ||
/> | ||
</Flex> | ||
)} | ||
</Flex> | ||
); | ||
} | ||
|
||
const sx = { svg: { fill: 'base.50' } }; |
30 changes: 0 additions & 30 deletions
30
invokeai/frontend/web/src/features/toast/ToastWithSessionRefDescription.tsx
This file was deleted.
Oops, something went wrong.