GitHub - Error States
We analyzed 8 examples of how GitHub handles error states across their product, spanning 5 different approaches: inline validation, toast notification, modal dialog, in-context error, full-page error.
Full-Page Errors
GitHub — Any page (network failure)
Full-page network error displayed when GitHub cannot be reached, showing a centered error message on a blank white page
GitHub — Any invalid URL path
GitHub 404 error page displayed when navigating to a non-existent URL, featuring the Octocat illustration in a Star Wars-themed scene
Modal Dialogs
GitHub — Repository > File editor > Commit changes modal
Commit changes modal dialog showing an error alert when attempting to commit a file edit that failed server-side
GitHub — Pull Requests page > Create new issue modal
Issue creation modal showing a red error alert box at the top of the form after a failed submission attempt, with 'Error' heading and 'Unable to create issue.' body text
Inline Validation
GitHub — Pull Requests page > Create new issue modal
Inline validation error on the issue creation modal when the required title field is submitted empty
In-Context Errors
GitHub — Pull Requests page > Create new issue modal
Issue creation modal showing a failed file upload error message rendered as an HTML comment inside the description textarea
GitHub — Repository > Insights > Contributors
Repository Insights Contributors page showing an informational error banner indicating the graph cannot be generated due to missing commit data
Toast Notifications
GitHub — Notifications inbox
Notifications inbox showing a 'Clean up your inbox' modal dialog overlaying a warning toast at the bottom of the page indicating an action could not be performed