Skip to content

Improve frontend API error handling #494

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

Open
Matthbo wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Improve frontend API error handling #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e19c4f1
Improve Api handling
Matthbo May 19, 2026
235823a
Wrap API error / warning logging for userfriend and advanced outputs
Matthbo May 22, 2026
8d15f10
Linting fixes
Matthbo May 22, 2026
52e819d
Update linting and oversight in flow.tsx
Matthbo May 22, 2026
f582369
Merge branch 'master' into issue/479-frontend-error-handling-of-api-s…
Matthbo May 27, 2026
f63af5c
Change some logApiWarnings to logApiError because they can break feat…
Matthbo May 27, 2026
8e596a7
Add back solution for void
Matthbo May 27, 2026
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
6 changes: 3 additions & 3 deletions src/main/frontend/app/components/directory-picker/directory-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ export default function DirectoryPicker({
setEntries(result.entries)
setCurrentPath(result.resolvedPath)
setParentPath(result.parentPath)
} catch (error_) {
if (error_ instanceof ApiError && error_.status === 403) {
} catch (error) {
if (error instanceof ApiError && error.httpCode === 403) {
setError('Access denied')
} else {
setError(error_ instanceof Error ? error_.message : 'Failed to load directories')
setError(error instanceof Error ? error.message : 'Failed to load directories')
}
} finally {
setLoading(false)
Expand Down
9 changes: 5 additions & 4 deletions src/main/frontend/app/components/file-structure/editor-data-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { TreeItem, TreeItemIndex } from 'react-complex-tree'
import type { FileTreeNode } from '~/types/filesystem.types'
import { fetchProjectRootTree, fetchDirectoryByPath } from '~/services/file-tree-service'
import { logApiError, logApiWarning } from '~/utils/logger'

Check warning on line 4 in src/main/frontend/app/components/file-structure/editor-data-provider.ts

View workflow job for this annotation

GitHub Actions / Build & Run All Tests 

'logApiWarning' is defined but never used. Allowed unused vars must match /^_/u
import { sortChildren } from './tree-utilities'
import type { DataProviderLike } from './use-file-tree-context-menu'
import { BaseFilesDataProvider } from './base-files-data-provider'
Expand Down Expand Up @@ -50,7 +51,7 @@
const tree = await fetchProjectRootTree(this.projectName)

if (!tree) {
console.warn('[EditorFilesDataProvider] Received empty tree from API')
console.warn('Received empty tree from API')
this.data = {}
return
}
Expand All @@ -66,7 +67,7 @@
this.loadedDirectories.add(tree.path)
this.notifyListeners(['root'])
} catch (error) {
console.error('[EditorFilesDataProvider] Unexpected error loading tree:', error)
logApiError('Unexpected error loading project file tree', error as Error)
this.data = {}
this.notifyListeners(['root'])
}
Expand All @@ -80,15 +81,15 @@
try {
const directory = await fetchDirectoryByPath(this.projectName, item.data.path)
if (!directory) {
console.warn('[EditorFilesDataProvider] Received empty directory from API')
console.warn('Received empty directory from API')
return
}

item.children = this.buildChildren(itemId, directory.children)
this.loadedDirectories.add(item.data.path)
this.notifyListeners([itemId])
} catch (error) {
console.error('Failed to load directory', error)
logApiError('Failed to load directory', error as Error)
}
}

Expand Down
7 changes: 4 additions & 3 deletions src/main/frontend/app/components/file-structure/studio-files-data-provider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { TreeItemIndex } from 'react-complex-tree'
import { logApiError } from '~/utils/logger'
import { sortChildren, getAncestorIds } from './tree-utilities'
import { fetchProjectTree, fetchDirectoryByPath, fetchAncestorPath } from '~/services/file-tree-service'
import type { FileTreeNode } from '~/types/filesystem.types'
Expand Down Expand Up @@ -62,7 +63,7 @@ export default class FilesDataProvider extends BaseFilesDataProvider<StudioItemD
const tree = await fetchProjectTree(this.projectName)

if (!tree) {
console.warn('[StudioFilesDataProvider] Received empty tree from API')
console.warn('Received empty tree from API')
this.data = {}
return
}
Expand Down Expand Up @@ -96,15 +97,15 @@ export default class FilesDataProvider extends BaseFilesDataProvider<StudioItemD

const directory = await fetchDirectoryByPath(this.projectName, path)
if (!directory) {
console.warn('[StudioFilesDataProvider] Received empty directory from API')
console.warn('Received empty directory from API')
return
}

item.children = sortChildren(directory.children).map((child) => this.buildChildItem(itemId, child))
this.loadedDirectories.add(path)
this.notifyListeners([itemId])
} catch (error) {
console.error(`Failed to load directory for ${path}`, error)
logApiError(`Failed to load directory for ${path}`, error as Error)
}
}

Expand Down
11 changes: 6 additions & 5 deletions src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { createFolderInProject } from '~/services/file-tree-service'
import { clearConfigurationFileCache } from '~/services/configuration-file-service'
import useTabStore from '~/stores/tab-store'
import useEditorTabStore from '~/stores/editor-tab-store'
import { showErrorToast, showErrorToastFrom } from '~/components/toast'
import { showErrorToast } from '~/components/toast'
import { FILE_NAME_PATTERNS, FOLDER_OR_ADAPTER_NAME_PATTERNS } from '~/components/file-structure/name-input-dialog'
import { logApiError } from '~/utils/logger'

export interface ContextMenuState {
position: { x: number; y: number }
Expand Down Expand Up @@ -130,7 +131,7 @@ export function useFileTreeContextMenu({
await createFile(projectName, `${parentPath}/${name}`)
await dataProvider.reloadDirectory(parentItemId)
} catch (error) {
showErrorToastFrom('Failed to create file', error)
logApiError('Failed to create file', error as Error)
}
setNameDialog(null)
},
Expand All @@ -156,7 +157,7 @@ export function useFileTreeContextMenu({
await createFolderInProject(projectName, `${parentPath}/${name}`)
await dataProvider.reloadDirectory(parentItemId)
} catch (error) {
showErrorToastFrom('Failed to create folder', error)
logApiError('Failed to create folder', error as Error)
}
setNameDialog(null)
},
Expand Down Expand Up @@ -196,7 +197,7 @@ export function useFileTreeContextMenu({
await dataProvider.reloadDirectory(getParentItemId(itemId))
onAfterRename?.(oldPath, newName)
} catch (error) {
showErrorToastFrom('Failed to rename', error)
logApiError('Failed to rename', error as Error)
}
setNameDialog(null)
},
Expand Down Expand Up @@ -231,7 +232,7 @@ export function useFileTreeContextMenu({
useEditorTabStore.getState().refreshAllTabs()
onAfterDelete?.(deleteTarget.path)
} catch (error) {
showErrorToastFrom('Failed to delete', error)
logApiError('Failed to delete', error as Error)
}

await dataProvider.reloadDirectory(deleteTarget.parentItemId)
Expand Down
12 changes: 6 additions & 6 deletions src/main/frontend/app/components/file-structure/use-studio-context-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createFolderInProject } from '~/services/file-tree-service'
import { createAdapter, renameAdapter, deleteAdapter } from '~/services/adapter-service'
import { clearConfigurationFileCache, createConfigurationFile } from '~/services/configuration-file-service'
import useTabStore from '~/stores/tab-store'
import { showErrorToastFrom } from '~/components/toast'
import { logApiError } from '~/utils/logger'
import type { StudioItemData, StudioFolderData, StudioAdapterData } from './studio-files-data-provider'
import {
CONFIGURATION_NAME_PATTERNS,
Expand Down Expand Up @@ -185,7 +185,7 @@ export function useStudioContextMenu({ projectName, dataProvider }: UseStudioCon
await createConfigurationFile(projectName, relativePath)
await dataProvider.reloadDirectory('root')
} catch (error) {
showErrorToastFrom('Failed to create configuration', error)
logApiError('Failed to create configuration', error as Error)
}
setNameDialog(null)
},
Expand All @@ -209,7 +209,7 @@ export function useStudioContextMenu({ projectName, dataProvider }: UseStudioCon
await createAdapter(projectName, name, menu.path)
await dataProvider.reloadDirectory('root')
} catch (error) {
showErrorToastFrom('Failed to create adapter', error)
logApiError('Failed to create adapter', error as Error)
}
setNameDialog(null)
},
Expand All @@ -233,7 +233,7 @@ export function useStudioContextMenu({ projectName, dataProvider }: UseStudioCon
await createFolderInProject(projectName, `${menu.folderPath}/${name}`)
await dataProvider.reloadDirectory('root')
} catch (error) {
showErrorToastFrom('Failed to create folder', error)
logApiError('Failed to create folder', error as Error)
}
setNameDialog(null)
},
Expand Down Expand Up @@ -272,7 +272,7 @@ export function useStudioContextMenu({ projectName, dataProvider }: UseStudioCon
}
await dataProvider.reloadDirectory('root')
} catch (error) {
showErrorToastFrom('Failed to rename', error)
logApiError('Failed to rename', error as Error)
}
setNameDialog(null)
},
Expand Down Expand Up @@ -309,7 +309,7 @@ export function useStudioContextMenu({ projectName, dataProvider }: UseStudioCon
useTabStore.getState().removeTabsForConfig(deleteTarget.path)
}
} catch (error) {
showErrorToastFrom('Failed to delete', error)
logApiError('Failed to delete', error as Error)
}
await dataProvider.reloadDirectory('root')
setDeleteTarget(null)
Expand Down
13 changes: 7 additions & 6 deletions src/main/frontend/app/components/git/git-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import {
pullChanges,
refreshOpenDiffs,
} from '~/services/git-service'
import { showErrorToastFrom, showInfoToast, showSuccessToast, showErrorToast } from '~/components/toast'
import { showInfoToast, showSuccessToast, showErrorToast } from '~/components/toast'
import useEditorTabStore from '~/stores/editor-tab-store'
import { logApiError } from '~/utils/logger'
import GitToolbar from './git-toolbar'
import GitChanges from './git-changes'
import GitCommitBox from './git-commit-box'
Expand Down Expand Up @@ -45,7 +46,7 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
const newStatus = await fetchGitStatus(projectName)
setStatus(newStatus)
} catch (error) {
showErrorToastFrom('Failed to fetch git status', error)
logApiError('Failed to fetch git status', error as Error)
}
}, [projectName, setStatus])

Expand Down Expand Up @@ -77,7 +78,7 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
})
editorTabStore.setActiveTab(tabId)
} catch (error) {
showErrorToastFrom('Failed to load diff', error)
logApiError('Failed to load diff', error as Error)
}
},
[projectName, setSelectedFile, setFileDiff, initFileHunks],
Expand Down Expand Up @@ -124,7 +125,7 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
await refreshOpenDiffs(projectName)
showSuccessToast(`Committed: ${result.commitId.slice(0, 7)}`)
} catch (error) {
showErrorToastFrom('Failed to commit', error)
logApiError('Failed to commit', error as Error)
} finally {
setIsLoading(false)
}
Expand All @@ -144,7 +145,7 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
}
await refreshStatus()
} catch (error) {
showErrorToastFrom('Failed to push', error)
logApiError('Failed to push', error as Error)
}
}, [projectName, token, refreshStatus, status?.ahead])

Expand All @@ -165,7 +166,7 @@ export default function GitPanel({ projectName, hasStoredToken }: GitPanelProps)
await refreshStatus()
await refreshOpenDiffs(projectName)
} catch (error) {
showErrorToastFrom('Failed to pull', error)
logApiError('Failed to pull', error as Error)
}
}, [projectName, token, refreshStatus])

Expand Down
11 changes: 3 additions & 8 deletions src/main/frontend/app/components/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@ const toastStyles = {
container: defaultStyle,
card: `${toastBaseCard} bg-error`,
icon: '',
defaultDuration: 2000,
defaultDuration: 5000,
},
WARNING: {
container: defaultStyle,
card: `${toastBaseCard} bg-warning`,
icon: '⚠️',
defaultDuration: 3000,
defaultDuration: 5000,
},
INFO: {
container: defaultStyle,
Expand All @@ -36,7 +36,7 @@ const toastStyles = {
container: defaultStyle,
card: `${toastBaseCard} bg-success`,
icon: '✅',
defaultDuration: 3000,
defaultDuration: 2000,
},
} as const

Expand Down Expand Up @@ -71,11 +71,6 @@ export function showErrorToast(message: string, title = 'Error') {
showToast({ type: 'ERROR', title, message })
}

/** Shows an error toast with a prefix, extracting the message from an unknown error. */
export function showErrorToastFrom(prefix: string, error: unknown) {
showErrorToast(`${prefix}: ${error instanceof Error ? error.message : String(error)}`)
}

export function Toast() {
const [toast, setToast] = useState<ToastOptions | null>(null)
const theme = useTheme()
Expand Down
3 changes: 2 additions & 1 deletion src/main/frontend/app/providers/frankconfig-xsd-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
import { fetchFrankConfigXsd } from '~/services/xsd-service'
import { logApiWarning } from '~/utils/logger'

interface FrankConfigXsdContextValue {
xsdContent: string | null
Expand All @@ -13,7 +14,7 @@ export function FrankConfigXsdProvider({ children }: { children: ReactNode }) {
useEffect(() => {
fetchFrankConfigXsd()
.then(setXsdContent)
.catch((error) => console.error('Failed to load FrankConfig XSD:', error))
.catch((error) => logApiWarning('Failed to load FrankConfig XSD:', error as Error))
Comment thread
Matthbo marked this conversation as resolved.
}, [])

return <FrankConfigXsdContext.Provider value={{ xsdContent }}>{children}</FrankConfigXsdContext.Provider>
Expand Down
22 changes: 9 additions & 13 deletions src/main/frontend/app/routes/datamapper/property-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,9 +156,10 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
setEditingMapping,
openMapping,
})
//Don't add flow as dependancy here, it'll become an infinite loop flow changes every rerender --> updates the memo --> the memo updates the nodetypes --> updating the nodetypes causes react to trigger a rerender resulting in a infinite loop
//UseMemo is used here to ensure nodetype is not changed throughout rerenders. If the variable is updated reactflow throws a warning in the console;
//Don't add flow as dependency here, it'll become an infinite loop flow changes every rerender --> updates the memo --> the memo updates the nodetypes --> updating the nodetypes causes react to trigger a rerender resulting in a infinite loop
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [openMapping]) //UseMemo is used here to ensure nodetype is not changed throughout rerenders. If the variable is updated reactflow throws a warning in the console;
}, [openMapping])

useEffect(() => {
if (!reactFlowInstance) return
Expand All @@ -171,7 +172,6 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {

window.addEventListener('resize', updateSize)

// delay initial run
requestAnimationFrame(updateSize)

return () => {
Expand All @@ -189,14 +189,13 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
})
}, [reactFlowNodes, edges, reactFlowInstance, configDispatch])

//Updates the outer canvas whenever something is added
useEffect(() => {
setCanvasSize((size) => updateCanvasSize(reactFlowNodes, size))
}, [reactFlowNodes])

const onRestore = useCallback(() => {
const restoreFlow = async () => {
if (config.propertyData) await flow.importJsonConfiguration(JSON.stringify(config.propertyData))
if (config.propertyData) flow.importJsonConfiguration(JSON.stringify(config.propertyData))
}

restoreFlow().then(() => {
Expand Down Expand Up @@ -258,8 +257,8 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
)

function openMappingModal(sources: NodeLabels[], targets: NodeLabels[]) {
setMappingSources(sources.filter((s) => s.id?.includes('item')))
setMappingTargets(targets.filter((t) => t.id?.includes('item')))
setMappingSources(sources.filter((source) => source.id?.includes('item')))
setMappingTargets(targets.filter((target) => target.id?.includes('item')))
setAddMappingModal(true)
}

Expand All @@ -286,7 +285,7 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
}
setEditingNode(null)
setAddFieldModal(false)
showSuccessToast('Added property succesfully!')
showSuccessToast('Added property successfully')
} catch (error) {
if (error instanceof Error) {
showErrorToast(error.message)
Expand All @@ -307,7 +306,7 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
setEdges(updatedEdges)
setEditingMapping(null)
setAddMappingModal(false)
showSuccessToast('Added mapping succesfully!')
showSuccessToast('Added mapping successfully')
setReactFlowNodes((previous) =>
previous.map((node) => ({
...node,
Expand Down Expand Up @@ -343,10 +342,7 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
</div>

<div className="flex w-full justify-center overflow-auto">
<div
style={{ height: canvasSize.height }} //Using inline style for height because Tailwind doesn't support dynamic pixel values
className="flex w-full flex-col items-center"
>
<div style={{ height: canvasSize.height }} className="flex w-full flex-col items-center">
<ReactFlow
nodeTypes={nodeTypes}
nodes={reactFlowNodes.map((node) => ({
Expand Down
4 changes: 2 additions & 2 deletions src/main/frontend/app/routes/datamapper/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export default function Root() {
<button
className="border-border hover:bg-hover active:bg-selected hidden w-48 rounded-md border bg-red-500 px-4 py-2 text-sm"
onClick={() => {
console.dir(mappingListConfig)
showSuccessToast('Logging config to console!', 'Debug')
console.log(mappingListConfig)
showSuccessToast('Logging config to console', 'Debug')
}}
>
Test External node log
Expand Down
Loading
Loading