Retool - Error States
We analyzed 8 examples of how Retool handles error states across their product, spanning 5 different approaches: inline validation, toast notification, in-context error, full-page error, banner notification.
Toast Notifications
Retool — Database > Table import
Database view with an empty table and a file import dropzone. A toast notification appears in the bottom-right corner after attempting to upload a CSV file that exceeds the size limit.
Retool — Workflows > Editor canvas
Workflow editor canvas showing a startTrigger and code1 block. A toast notification in the bottom-right reports a failure when attempting to publish a workflow release. The top-right also shows a red 'No connection' badge.
Retool — Home > Import app from file
Home screen with the 'Import app from file' modal open. A toast notification in the bottom-right reports that the file import failed because the uploaded file was not a valid JSON format (a .dmg file was uploaded instead).
Full-Page Errors
Retool — Application-wide crash page
Full-page crash screen with an illustrated broken-image graphic. The entire Retool application has failed to load a dynamically imported JavaScript module, replacing all content with this error page.
Retool — 404 page
Full-page 404 error screen shown when navigating to a non-existent URL within Retool. Displays an illustrated geometric shapes graphic with a message and a link to return home.
Inline Validation
Retool — App editor > Share modal > Invite new users
Share dialog modal for an app called 'Untitled-1'. The user has entered an invalid value ('user') in the invite email field, triggering an inline validation error displayed below the input fields.
Banner Notifications
Retool — Workflows > Editor canvas
Workflow editor canvas after publishing a workflow release that has no enabled triggers. A yellow warning banner appears at the top-right of the canvas area notifying the user about the missing configuration.
In-Context Errors
Retool — Query Library > Query editor
Query Library editor showing a GraphQL query called 'Country Search'. After running the query, an in-context error panel appears below the query configuration area showing a 'Run failed' status with the error details in red code text.