Improve frontend API error handling#494
Conversation
Matthbo
force-pushed
the
issue/479-frontend-error-handling-of-api-services
branch
from
e1e2b38 to
8d15f10
Compare
There was a problem hiding this comment.
Pull request overview
This PR centralizes frontend API error/warning reporting by introducing a small logging helper that shows user-friendly toasts while still logging full errors to the browser console. It also refactors apiFetch / ApiError and updates multiple call sites to use the new logging approach.
Changes:
- Add
logApiError/logApiWarninghelper and replace variousconsole.error/showErrorToastFromusages across the UI. - Update
ApiError/backend error parsing and adjust related consumers (e.g. DirectoryPicker, ProjectLanding). - Tweak toast durations and clean up a handful of warning/toast messages.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/main/frontend/app/utils/logger.ts | Adds centralized toast+console logging helpers for API warnings/errors. |
| src/main/frontend/app/utils/api.ts | Refactors ApiError shape and apiFetch header/body handling and response parsing. |
| src/main/frontend/app/routes/studio/context/sorted-elements.tsx | Consolidates warning toast + console message for failed drop action. |
| src/main/frontend/app/routes/studio/canvas/flow.tsx | Uses logApiError for save/load flow failures. |
| src/main/frontend/app/routes/projectlanding/project-landing.tsx | Refactors app-info fetch flow and logs discovery errors via logApiError. |
| src/main/frontend/app/routes/editor/editor.tsx | Switches save/load/reformat error handling to logApiError. |
| src/main/frontend/app/routes/datamapper/root.tsx | Minor console + toast message cleanup for debug button. |
| src/main/frontend/app/routes/datamapper/property-list.tsx | Comment/message cleanup and minor refactors for readability. |
| src/main/frontend/app/providers/frankconfig-xsd-provider.tsx | Uses logApiWarning when XSD fetch fails. |
| src/main/frontend/app/components/toast.tsx | Adjusts default toast durations; removes showErrorToastFrom. |
| src/main/frontend/app/components/git/git-panel.tsx | Switches git API failure handling to logApiError. |
| src/main/frontend/app/components/file-structure/use-studio-context-menu.ts | Switches context menu error handling to logApiError. |
| src/main/frontend/app/components/file-structure/use-file-tree-context-menu.ts | Switches context menu error handling to logApiError. |
| src/main/frontend/app/components/file-structure/studio-files-data-provider.ts | Uses logApiError when loading directories fails; simplifies warn messages. |
| src/main/frontend/app/components/file-structure/editor-data-provider.ts | Uses logApiWarning for file tree/directory load failures; simplifies warn messages. |
| src/main/frontend/app/components/directory-picker/directory-picker.tsx | Updates forbidden-access handling to use ApiError.httpCode. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ...(options?.headers as Record<string, string>), | ||
| 'X-Session-ID': getAnonymousSessionId(), | ||
| } | ||
| if (options?.body && !isFormData) headers['Content-Type'] = 'application/json' |
| } | ||
|
|
||
| return undefined as T | ||
| // assume the response is in json as our API should always do, errors can be caught with <promise>.catch() |
There was a problem hiding this comment.
I really don't like the undefined as T solution, I'll look more into it
|
| fetchFrankConfigXsd() | ||
| .then(setXsdContent) | ||
| .catch((error) => console.error('Failed to load FrankConfig XSD:', error)) | ||
| .catch((error) => logApiWarning('Failed to load FrankConfig XSD:', error as Error)) |
There was a problem hiding this comment.
As Error, why not logApiError like in other places?
There was a problem hiding this comment.
Because there is a fallback to this, error's usually break (a portion) of the application.
In this case there is no XSD for auto completion but the editor can still work
| }) | ||
| .catch((error) => { | ||
| showErrorToastFrom('Error saving', error) | ||
| logApiError('Error saving', error) |
There was a problem hiding this comment.
Why no 'as Error' while the other logApiError do have this
| this.notifyListeners(['root']) | ||
| } catch (error) { | ||
| console.error('[EditorFilesDataProvider] Unexpected error loading tree:', error) | ||
| logApiWarning('Unexpected error loading project file tree', error as Error) |
There was a problem hiding this comment.
Why no logApiError when it was a console.error before?
There was a problem hiding this comment.
This one shouldve been an error, I agree
| this.notifyListeners([itemId]) | ||
| } catch (error) { | ||
| console.error('Failed to load directory', error) | ||
| logApiWarning('Failed to load directory', error as Error) |
There was a problem hiding this comment.
This one shouldve also been an error indeed
Toasts based on API errors/warnings are now more user friendly while outputting the stacktrace to the browser console
Tiny cleanup where I found improvements to be made