Wrap API error / warning logging for userfriend and advanced outputs

Author: Matthbo

src/main/frontend/app/components/file-structure/editor-data-provider.ts

@@ -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 { logApiWarning } from '~/utils/logger';
 import { sortChildren } from './tree-utilities'
 import type { DataProviderLike } from './use-file-tree-context-menu'
 import { BaseFilesDataProvider } from './base-files-data-provider'
@@ -50,7 +51,7 @@ export default class EditorFilesDataProvider extends BaseFilesDataProvider<FileN
       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
       }
@@ -66,7 +67,7 @@ export default class EditorFilesDataProvider extends BaseFilesDataProvider<FileN
       this.loadedDirectories.add(tree.path)
       this.notifyListeners(['root'])
     } catch (error) {
-      console.error('[EditorFilesDataProvider] Unexpected error loading tree:', error)
+      logApiWarning('Unexpected error loading project file tree', error as Error)
       this.data = {}
       this.notifyListeners(['root'])
     }
@@ -80,15 +81,15 @@ export default class EditorFilesDataProvider extends BaseFilesDataProvider<FileN
     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)
+      logApiWarning('Failed to load directory', error as Error)
     }
   }
 

src/main/frontend/app/components/file-structure/studio-files-data-provider.ts

@@ -1,4 +1,5 @@
 import type { TreeItemIndex } from 'react-complex-tree'
+import { logApiError } from '~/utils/logger';
 import { sortChildren } from './tree-utilities'
 import { fetchProjectTree, fetchDirectoryByPath } from '~/services/file-tree-service'
 import type { FileTreeNode } from '~/types/filesystem.types'
@@ -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
     }
@@ -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)
     }
   }
 

src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts

@@ -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 }
@@ -128,7 +129,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)
         },
@@ -153,7 +154,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)
         },
@@ -193,7 +194,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)
         },
@@ -228,7 +229,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)

src/main/frontend/app/components/file-structure/use-studio-context-menu.ts

@@ -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,
@@ -183,7 +183,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)
         },
@@ -206,7 +206,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)
         },
@@ -229,7 +229,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)
         },
@@ -268,7 +268,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)
         },
@@ -305,7 +305,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)

src/main/frontend/app/components/git/git-panel.tsx

@@ -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'
@@ -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])
 
@@ -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],
@@ -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)
     }
@@ -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])
 
@@ -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])
 

src/main/frontend/app/components/toast.tsx

@@ -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()

src/main/frontend/app/providers/frankconfig-xsd-provider.tsx

@@ -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
@@ -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))
   }, [])
 
   return <FrankConfigXsdContext.Provider value={{ xsdContent }}>{children}</FrankConfigXsdContext.Provider>

src/main/frontend/app/routes/datamapper/property-list.tsx

@@ -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
@@ -171,7 +172,6 @@ function PropertyList({ config, configDispatch }: PropertyListProperties) {
 
     window.addEventListener('resize', updateSize)
 
-    // delay initial run
     requestAnimationFrame(updateSize)
 
     return () => {
@@ -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(() => {
@@ -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)
   }
 
@@ -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)
@@ -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,
@@ -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) => ({

src/main/frontend/app/routes/datamapper/root.tsx

@@ -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