diff --git a/src/main/frontend/app/components/directory-picker/directory-picker.tsx b/src/main/frontend/app/components/directory-picker/directory-picker.tsx
index c23a2835..e67ad15b 100644
--- a/src/main/frontend/app/components/directory-picker/directory-picker.tsx
+++ b/src/main/frontend/app/components/directory-picker/directory-picker.tsx
@@ -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)
diff --git a/src/main/frontend/app/components/file-structure/editor-data-provider.ts b/src/main/frontend/app/components/file-structure/editor-data-provider.ts
index 7e028cb1..2b8371ec 100644
--- a/src/main/frontend/app/components/file-structure/editor-data-provider.ts
+++ b/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 { logApiError } 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)
+      logApiError('Unexpected error loading project file tree', error as Error)
       this.data = {}
       this.notifyListeners(['root'])
     }
@@ -80,7 +81,7 @@ 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
       }
 
@@ -88,7 +89,7 @@ export default class EditorFilesDataProvider extends BaseFilesDataProvider<FileN
       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)
     }
   }
 
diff --git a/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts b/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts
index 626f2854..f581e5a5 100644
--- a/src/main/frontend/app/components/file-structure/studio-files-data-provider.ts
+++ b/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, getAncestorIds } from './tree-utilities'
 import { fetchProjectTree, fetchDirectoryByPath, fetchAncestorPath } 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,7 +97,7 @@ 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
       }
 
@@ -104,7 +105,7 @@ export default class FilesDataProvider extends BaseFilesDataProvider<StudioItemD
       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)
     }
   }
 
diff --git a/src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts b/src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts
index a91a7310..842b15d2 100644
--- a/src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts
+++ b/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 }
@@ -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)
         },
@@ -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)
         },
@@ -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)
         },
@@ -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)
diff --git a/src/main/frontend/app/components/file-structure/use-studio-context-menu.ts b/src/main/frontend/app/components/file-structure/use-studio-context-menu.ts
index b3fb0aac..64273cd0 100644
--- a/src/main/frontend/app/components/file-structure/use-studio-context-menu.ts
+++ b/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,
@@ -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)
         },
@@ -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)
         },
@@ -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)
         },
@@ -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)
         },
@@ -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)
diff --git a/src/main/frontend/app/components/git/git-panel.tsx b/src/main/frontend/app/components/git/git-panel.tsx
index 67b6ca40..60f60286 100644
--- a/src/main/frontend/app/components/git/git-panel.tsx
+++ b/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])
 
diff --git a/src/main/frontend/app/components/toast.tsx b/src/main/frontend/app/components/toast.tsx
index 129b2178..9a0623a2 100644
--- a/src/main/frontend/app/components/toast.tsx
+++ b/src/main/frontend/app/components/toast.tsx
@@ -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,
@@ -36,7 +36,7 @@ const toastStyles = {
     container: defaultStyle,
     card: `${toastBaseCard} bg-success`,
     icon: '✅',
-    defaultDuration: 3000,
+    defaultDuration: 2000,
   },
 } as const
 
@@ -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()
diff --git a/src/main/frontend/app/providers/frankconfig-xsd-provider.tsx b/src/main/frontend/app/providers/frankconfig-xsd-provider.tsx
index e17759cb..8294f02f 100644
--- a/src/main/frontend/app/providers/frankconfig-xsd-provider.tsx
+++ b/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>
diff --git a/src/main/frontend/app/routes/datamapper/property-list.tsx b/src/main/frontend/app/routes/datamapper/property-list.tsx
index 0523cfb6..ad212005 100644
--- a/src/main/frontend/app/routes/datamapper/property-list.tsx
+++ b/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) => ({
diff --git a/src/main/frontend/app/routes/datamapper/root.tsx b/src/main/frontend/app/routes/datamapper/root.tsx
index c43a041f..32f4bb9b 100644
--- a/src/main/frontend/app/routes/datamapper/root.tsx
+++ b/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
diff --git a/src/main/frontend/app/routes/editor/editor.tsx b/src/main/frontend/app/routes/editor/editor.tsx
index 0c2193c2..b1656bb6 100644
--- a/src/main/frontend/app/routes/editor/editor.tsx
+++ b/src/main/frontend/app/routes/editor/editor.tsx
@@ -23,7 +23,6 @@ import { SidebarSide } from '~/components/sidebars-layout/sidebar-layout-store'
 import EditorTabs from '~/components/tabs/editor-tabs'
 import { SaveStatusIndicator } from '~/components/save-status-indicator'
 import { useSaveStatusStore } from '~/stores/save-status-store'
-import { showErrorToastFrom } from '~/components/toast'
 import { useTheme } from '~/hooks/use-theme'
 import { fetchConfigurationFile, saveConfigurationFile } from '~/services/configuration-file-service'
 import { fetchFile, updateFile } from '~/services/file-service'
@@ -32,6 +31,7 @@ import { fetchFrankConfigXsd } from '~/services/xsd-service'
 import useEditorTabStore from '~/stores/editor-tab-store'
 import { useProjectStore } from '~/stores/project-store'
 import { useSettingsStore } from '~/stores/settings-store'
+import { logApiError } from '~/utils/logger'
 import flowXsd from '../../../src/assets/xsd/FlowConfig.xsd?raw'
 import {
   extractFlowElements,
@@ -363,14 +363,14 @@ export default function CodeEditor() {
             if (project.isGitRepository) refreshOpenDiffs(project.name)
           })
           .catch((error) => {
-            showErrorToastFrom('Error saving', error)
+            logApiError('Error saving', error)
             setIdle()
           })
       } else {
         updateFile(project.name, configPath, updatedContent)
           .then(() => finishSaving())
           .catch((error) => {
-            showErrorToastFrom('Error saving', error)
+            logApiError('Error saving', error)
             setIdle()
           })
       }
@@ -425,7 +425,7 @@ export default function CodeEditor() {
     monaco.editor.setModelMarkers(
       model,
       'xsd-validation',
-      errors.map((e) => toMarker(e, monaco.MarkerSeverity.Error)),
+      errors.map((error) => toMarker(error, monaco.MarkerSeverity.Error)),
     )
   }, [])
 
@@ -451,7 +451,7 @@ export default function CodeEditor() {
       )
       editor.pushUndoStop()
     } catch (error) {
-      console.error('Failed to reformat XML:', error)
+      logApiError('Failed to reformat XML', error as Error)
     }
   }, [project, activeTabFilePath])
 
@@ -630,7 +630,7 @@ export default function CodeEditor() {
         .then((content) => setMonacoContent(content, 'xml', abortController.signal))
         .catch((error) => {
           if (!abortController.signal.aborted) {
-            console.error('Failed to load configuration XML:', error)
+            logApiError('Failed to load configuration XML:', error)
           }
         })
     } else {
@@ -642,7 +642,7 @@ export default function CodeEditor() {
         .catch((error) => {
           if (!abortController.signal.aborted) {
             setMonacoContent('', 'plaintext', abortController.signal)
-            console.error('Failed to load file:', error)
+            logApiError('Failed to load file:', error)
           }
         })
     }
diff --git a/src/main/frontend/app/routes/projectlanding/project-landing.tsx b/src/main/frontend/app/routes/projectlanding/project-landing.tsx
index 626547b3..ca3bfb16 100644
--- a/src/main/frontend/app/routes/projectlanding/project-landing.tsx
+++ b/src/main/frontend/app/routes/projectlanding/project-landing.tsx
@@ -4,6 +4,8 @@ import FfIcon from '/icons/custom/ff!-icon.svg?react'
 import ArchiveIcon from '/icons/solar/Archive.svg?react'
 import { fetchInstanceConfigurations, type FFConfiguration } from '~/services/frank-framework-service'
 import { useProjectStore } from '~/stores/project-store'
+import { ApiError } from '~/utils/api'
+import { logApiError } from '~/utils/logger'
 
 import ConfigurationRow from './configuration-row'
 import Search from '~/components/search/search'
@@ -53,16 +55,14 @@ export default function ProjectLanding() {
   }, [clearEditorTabsState, clearProjectState, clearTabsState])
 
   useEffect(() => {
-    const loadAppInfo = async () => {
-      try {
-        const info = await fetchAppInfo()
+    fetchAppInfo()
+      .then((info) => {
         setIsLocalEnvironment(info.isLocal)
         setRootLocationName(info.isLocal ? 'Computer' : 'Cloud Workspace')
-      } catch {
-        showErrorToast('Failed to fetch app info, defaulting to local mode.')
-      }
-    }
-    loadAppInfo()
+      })
+      .catch((_) => {
+        showErrorToast('Failed to fetch environment info, defaulting to local mode.')
+      })
   }, [])
 
   useEffect(() => {
@@ -81,6 +81,10 @@ export default function ProjectLanding() {
           setFFInstanceName(ffInstance.name)
           setFFConfiguration(ffInstance.configurations)
         })
+        .catch((error) => {
+          if (error instanceof ApiError && error.httpCode === 404) return
+          logApiError(error.message, error)
+        })
         .finally(() => setIsDiscovering(false))
     }
 
diff --git a/src/main/frontend/app/routes/studio/canvas/flow.tsx b/src/main/frontend/app/routes/studio/canvas/flow.tsx
index 39732ce6..25974b89 100644
--- a/src/main/frontend/app/routes/studio/canvas/flow.tsx
+++ b/src/main/frontend/app/routes/studio/canvas/flow.tsx
@@ -28,6 +28,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { FlowConfig } from '~/routes/studio/canvas/flow.config'
 import { getElementTypeFromName } from '~/routes/studio/node-translator-module'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { logApiError } from '~/utils/logger'
 import { NodeContextMenuContext, useNodeContextMenu } from './node-context-menu-context'
 import StickyNoteComponent, { type StickyNote } from '~/routes/studio/canvas/nodetypes/sticky-note'
 import useTabStore, { type TabData } from '~/stores/tab-store'
@@ -314,11 +315,10 @@ function FlowCanvas({ onOpenInEditor }: { onOpenInEditor: () => void }) {
 
       setSaved()
     } catch (error) {
-      console.error('Failed to save XML:', error)
-      showErrorToast(`Failed to save XML: ${error instanceof Error ? error.message : error}`)
+      logApiError('Failed to save XML', error as Error)
       setIdle()
     }
-  }, [project])
+  }, [])
 
   const autosaveEnabled = useSettingsStore((s) => s.general.autoSave.enabled)
   const autosaveDelay = useSettingsStore((s) => s.general.autoSave.delayMs)
@@ -1318,8 +1318,7 @@ function FlowCanvas({ onOpenInEditor }: { onOpenInEditor: () => void }) {
           await loadFromApi(tab, pendingSelection)
         }
       } catch (error) {
-        console.error('Error loading tab flow:', error)
-        showErrorToast(`Failed to load flow: ${error instanceof Error ? error.message : error}`)
+        logApiError('Error loading tab flow:', error as Error)
       } finally {
         isLoadingTabRef.current = false
         setLoading(false)
diff --git a/src/main/frontend/app/routes/studio/context/sorted-elements.tsx b/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
index 871e1281..ca20219d 100644
--- a/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
+++ b/src/main/frontend/app/routes/studio/context/sorted-elements.tsx
@@ -66,8 +66,9 @@ export default function SortedElements({ type, items, onDragStart, searchTerm }:
     const isInsideCanvas = targetElement?.closest('#flow-canvas')
 
     if (!dropSuccessful && draggedName && isInsideCanvas) {
-      showWarningToast(`Element "${draggedName}" is not allowed to be dropped on the canvas`)
-      console.warn(`Element "${draggedName}" could not be dropped on the canvas`)
+      const errorMessage = `Element "${draggedName}" could not be dropped on the canvas`
+      showWarningToast(errorMessage)
+      console.warn(errorMessage)
     }
   }
 
diff --git a/src/main/frontend/app/utils/api.ts b/src/main/frontend/app/utils/api.ts
index 2008af12..27625c12 100644
--- a/src/main/frontend/app/utils/api.ts
+++ b/src/main/frontend/app/utils/api.ts
@@ -19,18 +19,17 @@ const getAuthToken = () => {
 }
 
 interface BackendErrorResponse {
-  httpStatus: number
-  messages: string[]
-  errorCode: string
+  status: string
+  error: string
 }
 
 export class ApiError extends Error {
   constructor(
-    public status: number,
-    public messages?: string[],
-    public errorCode?: string,
+    public status: string,
+    public error: string,
+    public httpCode: number,
   ) {
-    super(messages ? messages.join(', ') : status.toString())
+    super(error)
     this.name = 'ApiError'
   }
 }
@@ -38,14 +37,11 @@ export class ApiError extends Error {
 export async function apiFetch<T>(path: string, options?: RequestInit): Promise<T> {
   const isFormData = options?.body instanceof FormData
 
-  const defaultHeaders: Record<string, string> =
-    options?.body && !isFormData ? { 'Content-Type': 'application/json' } : {}
-
   const headers: Record<string, string> = {
-    ...defaultHeaders,
-    'X-Session-ID': getAnonymousSessionId(),
     ...(options?.headers as Record<string, string>),
+    'X-Session-ID': getAnonymousSessionId(),
   }
+  if (options?.body && !isFormData && !headers['Content-Type']) headers['Content-Type'] = 'application/json'
 
   const token = getAuthToken()
   if (token) {
@@ -61,15 +57,17 @@ export async function apiFetch<T>(path: string, options?: RequestInit): Promise<
     const contentType = response.headers.get('content-type')
     if (contentType?.includes('application/json')) {
       const error: BackendErrorResponse = await response.json()
-      throw new ApiError(error.httpStatus, error.messages, error.errorCode)
+      throw new ApiError(error.status, error.error, response.status)
     }
-    throw new ApiError(response.status, [response.statusText])
+    throw new ApiError('Server Error', `HTTP ${response.status} - ${response.statusText}`, response.status)
   }
 
   const contentType = response.headers.get('content-type')
-  if (contentType?.includes('application/json')) {
-    return response.json()
+  const contentLength = response.headers.get('content-length')
+  const hasNoBody = response.status === 204 || contentLength === '0'
+  if (hasNoBody || !contentType?.includes('application/json')) {
+    // a little dirty but allows void to be returned without breaking the generic type constraint
+    return undefined as T
   }
-
-  return undefined as T
+  return response.json()
 }
diff --git a/src/main/frontend/app/utils/logger.ts b/src/main/frontend/app/utils/logger.ts
new file mode 100644
index 00000000..c7c85f29
--- /dev/null
+++ b/src/main/frontend/app/utils/logger.ts
@@ -0,0 +1,11 @@
+import { showErrorToast, showWarningToast } from '~/components/toast'
+
+export function logApiWarning(message: string, error: Error): void {
+  showWarningToast(message)
+  console.warn(message, error)
+}
+
+export function logApiError(message: string, error: Error): void {
+  showErrorToast(message)
+  console.error(message, error)
+}