Objective
Define the types of errors, how they should be presented to users, logging guidelines, and resolution pathways.
Assumptions
All input fields with certain data type are always validated on front-end and backend, such as:
- Emails
- UPI ID
- PAN CARD
- Credit/Debit Cards
- Any Name Character length (by default 100 characters), etc.
Requirements
Requirements
| S/N | Error Type | Details | Message format | Message Positioning |
|---|---|---|---|---|
| 1 | Validation Errors | Errors caused by incorrect user inputs (e.g., missing fields, wrong format).Examples:400 Bad Request: Input fields are missing or invalid.422 Unprocessable Entity: Data format is correct, but cannot be processed. | Please check the following fields: [field_name]. The value entered is incorrect.Examples:Please define a name for the primary division before proceeding.The primary and secondary division names cannot be the samePlease provide a name for this Brand. | Inline Errors and/or Form-Level Errors |
| 2 | Authentication/ Authorization Errors | Errors related to user authentication or permission issues.Examples:401 Unauthorized: The user is not authenticated.403 Forbidden: The user does not have permission for the requested action. | You are not authorized to access this resource. Please contact your admin. | Empty screen errors |
| 3 | System Errors/ Network Errors | Internal server or system-related issues or errors related to connectivity issues between the client and the server.Errors where UI cannot be refreshed.Errors where it cannot be related to a UI element. | Something went wrong on our end. Please try again later.ORSomething went wrong on our end. Please contact <Our support>.ORUnable to connect. Please check your network connection and try again. | Toast Notifications |
| 4 | Business Logic Errors | Errors arising from domain-specific rules (e.g., quota exceeded, invalid operation)Too Many Requests: Rate limit exceeded.Unification is on-goingNew series of data tagging is already underway based on last submission. | You have exceeded the allowed number of requests. Please try again after some time. | Inline Errors and/or Form-Level Errors |
| 5 | Application-Level Errors/ Scheduled Tasks or Cron Jobs | Errors that arise during the execution of background jobs or batch processes (e.g., data syncs, report generation, notifications).Examples:Job Failed: A background process (e.g., data import/export, ETL pipeline) failed due to incorrect data or system limits.Job Timeout: A process exceeded the allowed execution time.Job Partially Completed: The process completed but had some failures (e.g., only some records were processed successfully).Job Failure: Daily scheduled task failed (e.g., failed backup).Job Skipped: Task skipped due to unmet preconditions (e.g., missing data). | Background process [Job Name] encountered an issue and was unable to complete. Please check logs or retry.Scheduled task [Task Name] did not execute as expected. Please contact support. | Sticky Top Notifications |
| 6 | System-Level Alerts & Critical Notifications / Maintenance Windows / Performance Degradation Alerts | Alerts that notify users or admins about licensing issues such as expiration or renewals.Errors that occur when system resources, such as storage, API rate limits, or concurrent connections, are exceeded.Notifications related to scheduled system downtime for maintenance or updates.The system is experiencing high response times. | Warning (Pre-expiry): “Your subscription will expire in [X] days. Please renew to continue using the service.”Critical (Expired): “Your license has expired. Please renew your subscription to regain full access.”You have exceeded the allowed number of auto-refreshing segments. Please <upgrade your plan>.We will be undergoing scheduled maintenance on [Date] from [Time] to [Time]. The platform may be unavailable during this time.We’re experiencing high demand, which is affecting performance. Please bear with us while we resolve the issue. | Sticky Top Not |
User Interaction and Design
| Error Type | Description | Handling | Possible State | Tailwind Components | Design |
|---|---|---|---|---|---|
| Inline Errors | Errors that occur at a specific form field due to invalid data (e.g., incorrect format, missing required input).If the error message occurred after tab/focus out from a field. | Highlight the field in error, display a brief message near the field (underneath or beside), and indicate the error with an icon or color change. | Error, Success, Information | Display a brief message above/ below the field | https://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=836-33841&t=qyCPHBtHH0cVWAgQ-1Connect your Figma account ex: https://www.figma.com/design/UFG8SDb1mcbOpOE2GHO2jW/Tailwind-UI–screens?node-id=1043-30666&t=HQPNFl0Ui2T7yc2O-1Connect your Figma account for Division Management | 😞 Error Messages |
| Form-Level Errors | Errors that occur after submitting a form, affecting the entire form (e.g., multiple fields invalid, server validation fails). | Display a clear error message above the submit button, explaining the problem at a broader level (e.g., “Please correct the highlighted fields before submitting”).If form is longer than single fold or more than 10 fields, the form should scroll to the first field with error and auto focus on that input should happen. | Error, Success, Information | Error message above the submit button | https://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=836-33841&t=qyCPHBtHH0cVWAgQ-1Connect your Figma account |
| Toast Notifications | Toast notifications are used for temporary, less critical messages. They provide feedback after an action is performed (e.g., form submission, data saved, action failed).These notifications auto-dismiss after a few seconds but still give the user immediate feedback. | Duration: Auto-dismiss after 5 seconds, with an option for users to manually dismiss.Stacking: If multiple notifications are triggered, they stack vertically with the most recent at the top.Animations: Slide in/out animations to catch attention but not disrupt the workflow.Click-to-action (Optional): Some toast notifications can have link stye CTAs like “View Details” or “Undo.” | Success, Error, Warning, Information | Top-right of the screenTailwind CSS Notifications – Official Tailwind UI Components | https://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=836-33841&t=qyCPHBtHH0cVWAgQ-1Connect your Figma account ex: Tailwind CSS Notifications – Official Tailwind UI Components |
| Sticky Top Notifications | Sticky notifications are used for critical, persistent messages that require the user’s attention. These are typically not auto-dismissed and require explicit user interaction (e.g., closing or taking action).They are ideal for alerts, warnings, or system-level notifications (e.g., license expiry, system outages, or downtime notifications). | Persistent: Stays visible at the top until the user interacts with it (dismiss or take action).High visibility: Use bold to distinguish critical issues.Action Buttons: Include actionable elements like primary button CTA, secondary link CTA ex: “Contact Support,” “Renew License,” or “Retry.” | Critical Alert, Warning, Information | Top of the screen, spanning the full width of the page. These notifications remain visible until the user dismisses them or until the issue is resolved.Tailwind CSS Alerts – Official Tailwind UI Components | https://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=836-33841&t=qyCPHBtHH0cVWAgQ-1Connect your Figma account ex: https://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=173-8271&t=wRlXwgUYM8VRlacT-1Connect your Figma account for Manage Integration/Account Health |
| Empty screen errors | Displayed when a page or section has no data to showDisplayed when a user tries to access a resource or page they don’t have permission to view. | Offer actionable next steps (e.g., “Add New,” “Reset Filters”, “Request Access “)Additional option to “Go to Dashboard“, “Back“Include illustration and/or friendly message when applicable. | Missing page/ access/ data | Center-aligned message with icon/illustration, and action buttons like “Add New” or “Clear Filters.” Friendly and helpful tone. | https://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=836-33841&t=qyCPHBtHH0cVWAgQ-1Connect your Figma account |
Design Link:
Error and success screens skeleton viewhttps://www.figma.com/design/VfVs3j4RVD7OJ8UD0jadXz/PRD-Screens?node-id=836-33841&t=Zm3LBsG0IDM4WZAD-1Connect your Figma account