Skip to content

[web-console] Improve error popups by including error context #5868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Karakatiza666 merged 1 commit into from
Mar 24, 2026
Merged

[web-console] Improve error popups by including error context #5868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...ckages/web-console/src/lib/components/layout/pipelines/PipelineConfigurationsPopup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
patch.programConfig = JSONbig.parse(json.programConfig)
await pipeline.patch(patch)
} catch (e) {
toastError(e as any)
toastError('Applying pipeline config')(e as any)
throw e
}
}
Expand Down
2 changes: 1 addition & 1 deletion js-packages/web-console/src/lib/components/layout/pipelines/PipelineEditLayout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ example = "1.0"`
if (e instanceof Error) {
setTimeout(() => {
contextDrawer.content = null
toast.toastError(e)
toast.toastError('Parsing pipeline diff')(e)
})
}
return undefined
Expand Down
4 changes: 2 additions & 2 deletions js-packages/web-console/src/lib/components/other/SQLValueTooltip.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
>
<div class="flex flex-nowrap justify-between gap-2">
<span class="flex-1">
{(tooltipData && toast.catchError(displaySQLValue)(tooltipData.value)) || ''}
{(tooltipData && toast.catchError('Displaying SQL value', displaySQLValue)(tooltipData.value)) || ''}
</span>
{#if tooltipData}
<ClipboardCopyButton
class="flex-none p-0"
value={() => toast.catchError(serializeSQLValue)(tooltipData.value) ?? ''}
value={() => toast.catchError('Serializing SQL value', serializeSQLValue)(tooltipData.value) ?? ''}
></ClipboardCopyButton>
{/if}
</div>
Expand Down
4 changes: 2 additions & 2 deletions js-packages/web-console/src/lib/components/pipelines/editor/TabProfileVisualizer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
triagePlugins.forEach((p) => p.triage(bundle, triageResults))
} catch (error) {
triageResults = new TriageResults()
toast.toastError(error instanceof Error ? error : new Error(String(error)), 10000)
toast.toastError('Running triage plugins')(error instanceof Error ? error : new Error(String(error)), 10000)
}
} else {
triageResults = new TriageResults()
Expand Down Expand Up @@ -210,7 +210,7 @@

$effect(() => {
if (errorMessage && getProfileData) {
toast.toastError(new Error(errorMessage), 10000)
toast.toastError('Loading profile data')(new Error(errorMessage), 10000)
}
})

Expand Down
53 changes: 19 additions & 34 deletions js-packages/web-console/src/lib/components/pipelines/list/Actions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipeline.current.name, action, callbacks)
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, action),
toastError
toastError(`Waiting for pipeline to ${action}`)
)
}

Expand Down Expand Up @@ -422,7 +422,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipelineName, 'pause')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'pause'),
toastError
toastError("Waiting for pipeline to pause")
)
},
disabled: () => false,
Expand All @@ -436,7 +436,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipelineName, 'standby')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'standby'),
toastError
toastError("Waiting for pipeline to standby")
)
},
disabled: () => false,
Expand All @@ -450,7 +450,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipelineName, 'activate')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'activate'),
toastError
toastError("Waiting for pipeline to activate")
)
},
disabled: () => false,
Expand All @@ -468,7 +468,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipelineName, 'clear')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'clear'),
toastError
toastError("Waiting for pipeline to clear state")
)
},
'This will delete all checkpoints.'
Expand Down Expand Up @@ -499,7 +499,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipelineName, 'kill')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'kill'),
toastError
toastError("Waiting for pipeline to force stop")
)
},
'The pipeline will stop processing inputs without making a checkpoint, leaving only a previous one, if any.'
Expand All @@ -517,7 +517,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
const { waitFor } = await postPipelineAction(pipelineName, 'stop')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'stop'),
toastError
toastError("Waiting for pipeline to stop")
)
},
'The pipeline will stop processing inputs and make a checkpoint of its state.'
Expand Down Expand Up @@ -653,25 +653,24 @@ groups related actions into multi-action dropdowns when multiple options are ava
{/snippet}
{#snippet start({
text,
getAction,
action,
disabled
}: {
text: string
getAction?: (alt: boolean) => PipelineAction
action?: PipelineAction
disabled?: boolean
})}
<div>
<button
aria-label={getAction?.(false)}
aria-label={text}
class:disabled
class={isMobile.current
? `${buttonClass} ${shortClass} ${importantBtnColor} {iconClass}`
: `${buttonClass} ${longClass} ${importantBtnColor}`}
onclick={async (e) => {
if (!getAction) {
onclick={async () => {
if (!action) {
return
}
const action = getAction(e.ctrlKey || e.shiftKey || e.metaKey)
const pipelineName = pipeline.current.name
performStartAction(action, pipelineName)
}}
Expand All @@ -687,7 +686,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
{#snippet _start()}
{@render start({
text: 'Start',
getAction: () => 'start',
action: 'start',
disabled: unsavedChanges
})}
{#if unsavedChanges}
Expand All @@ -697,7 +696,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
{#snippet _start_paused()}
{@render start({
text: 'Start',
getAction: (alt) => (alt ? 'start_paused' : 'start'),
action: 'start_paused',
Copy link
Copy Markdown

@mythical-fred mythical-fred Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Behavior change: the old getAction: (alt) => (alt ? 'start_paused' : 'start') let users Ctrl/Shift/Meta-click to launch without pausing. That shortcut is gone now — _start_paused always fires start_paused. Intentional?

Copy link
Copy Markdown
Contributor Author

@Karakatiza666 Karakatiza666 Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's intended simplification

Copy link
Copy Markdown

@mythical-fred mythical-fred Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough — intentional removal noted. The test gap is still the open blocker though (the curried toastError and the simplified start action need coverage).

disabled: unsavedChanges
})}
{#if unsavedChanges}
Expand All @@ -707,7 +706,7 @@ groups related actions into multi-action dropdowns when multiple options are ava
{#snippet _resume()}
{@render start({
text: 'Resume',
getAction: () => 'resume',
action: 'resume',
disabled: unsavedChanges
})}
{#if unsavedChanges}
Expand All @@ -717,15 +716,15 @@ groups related actions into multi-action dropdowns when multiple options are ava
{#snippet _standby()}
{@render start({
text: 'Standby',
getAction: () => 'standby',
action: 'standby',
disabled: unsavedChanges
})}
<Tooltip placement="top">Put the pipeline in standby mode</Tooltip>
{/snippet}
{#snippet _activate()}
{@render start({
text: 'Activate',
getAction: () => 'activate',
action: 'activate',
disabled: unsavedChanges
})}
<Tooltip placement="top">Activate the pipeline to start data ingress and processing</Tooltip>
Expand All @@ -744,29 +743,15 @@ groups related actions into multi-action dropdowns when multiple options are ava
{#snippet _pause()}
<button
class="hidden sm:flex {buttonClass} {longClass} {basicBtnColor}"
onclick={async () => {
const pipelineName = pipeline.current.name
const { waitFor } = await postPipelineAction(pipelineName, 'pause')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'pause'),
toastError
)
}}
onclick={buttonConfigs._pause.onclick}
>
<span class="fd fd-pause {iconClass}"></span>
Pause
<span></span>
</button>
<button
class="flex sm:hidden {buttonClass} {shortClass} {basicBtnColor} {iconClass}"
onclick={async () => {
const pipelineName = pipeline.current.name
const { waitFor } = await postPipelineAction(pipelineName, 'pause')
waitFor().then(
(shouldContinue) => shouldContinue && onActionSuccess?.(pipelineName, 'pause'),
toastError
)
}}
onclick={buttonConfigs._pause.onclick}
>
<span class="fd fd-pause {iconClass}"></span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions js-packages/web-console/src/lib/components/pipelines/table/AvailableActions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,12 +115,12 @@
...p,
status: isPremium.value ? 'Stopping' : 'Stopping'
}))
await waitFor().catch(toastError)
await waitFor().catch(toastError("Waiting for pipeline to stop"))
}
if (pipeline.storageStatus !== 'Cleared') {
const { waitFor } = await postPipelineAction(pipeline.name, 'clear')
updatePipeline(pipeline.name, (p) => ({ ...p, storageStatus: 'Clearing' }))
await waitFor().catch(toastError)
await waitFor().catch(toastError("Waiting for pipeline to clear state"))
}
return api.deletePipeline(pipeline.name)
})
Expand Down
2 changes: 1 addition & 1 deletion js-packages/web-console/src/lib/compositions/usePipelineManager.svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const usePipelineManager = (options?: FetchOptions) => {
return error.cause === 'cancelled'
}

const reportError = _reportError(toastError, options, doNotReportIfCancelled)
const reportError = _reportError(toastError('API request'), options, doNotReportIfCancelled)
const trackHealth = _trackHealth(options)

const getPipelineSupportBundle = (
Expand Down
16 changes: 12 additions & 4 deletions js-packages/web-console/src/lib/compositions/useToastNotification.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { toast } from 'svelte-french-toast'

export const useToast = () => {
const toastError = (error: Error, durationMs?: number) => {
const showToastError = (scope: string, error: Error, durationMs?: number) => {
try {
toast.error(error.message, {
const message = scope ? `${scope}: ${error.message}` : error.message
toast.error(message, {
className: 'text-lg !max-w-[500px] whitespace-pre-wrap',
duration: durationMs
})
Expand All @@ -12,16 +13,23 @@ export const useToast = () => {
console.log('Original error: ', error)
}
}
const toastError = (scope: string) => (error: Error, durationMs?: number) => {
Copy link
Copy Markdown

@mythical-fred mythical-fred Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes the toastError public API from (error, durationMs?) => void to a curried (scope) => (error, durationMs?) => void — a behavioral change touching every call site. No tests.

Please add Vitest unit tests for at minimum:

  1. toastError(scope)(error) prepends scope: to the message
  2. toastError('')(error) falls back to bare message (the scope ? ... : ... branch at line 6)
  3. catchError(scope, f) surfaces the scoped message when f throws

Pure functions, no DOM needed. Setup: npm install -D vitest jsdom.

showToastError(scope, error, durationMs)
}
return {
toastError,
catchError<Args extends any[], R>(f: (...args: Args) => R, durationMs?: number) {
catchError<Args extends any[], R>(
scope: string,
f: (...args: Args) => R,
durationMs?: number
) {
return (...args: Args) => {
try {
return f(...args)
} catch (e) {
if (e instanceof Error) {
requestAnimationFrame(() => {
toastError(e, durationMs)
showToastError(scope, e, durationMs)
})
}
return undefined
Expand Down
Loading