API Error Handling

[dimak1]

User Story: API Error Messaging

As a user,
I want to see clear and helpful error messages when an API error occurs,
so that I understand what went wrong and how to proceed.

Context:

UX/UI Considerations:

Design in Figma

Miro Link:

https://miro.com/app/board/uXjVKQlO-ME=/?moveToWidget=3458764598986546123&cot=14

Business Rules:

• [ ] when there's an API errors for host UI and/or examiner UI, show simple message.

Story Scenarios:

Scenario 1: Handling network error Given: The user is on the application. When: A network-related API error occurs (e.g., no internet connection). Then: The user sees a generic error message And: The user has the option to retry the action once the connection is restored.

• [ ] Test Created

Accessibility Scenarios:

Expand for Accessibility Scenarios

1. **Color Contrast** - **Scenario**: Verify that all error message text meets the WCAG 2.1 minimum contrast ratio of 4.5:1 for normal text. **Given**: A user with normal vision or visual impairment is viewing the UI. **When**: An API error message is displayed. **Then**: The contrast ratio of the error message text meets the WCAG 2.1 AA standard. 2. **Screen Reader Compatibility** **Scenario**: Ensure error messages are properly announced by screen readers. **Given**: A user is navigating the UI using a screen reader. **When**: An API error occurs and an error message is displayed. **Then**: The error message is announced in a clear, descriptive manner by the screen reader. 3. **Keyboard Navigation** **Scenario**: Verify that error message elements can be accessed and dismissed using keyboard inputs. **Given**: A user is navigating using a keyboard. **When**: An error message is displayed. **Then**: The user can navigate to and dismiss the error message using only the keyboard.

[fionazhou-jsb]

@rstens identify API call and where errors can take place, and create a list

[mbertucci]

If there are API errors in the backend it is not communicated to the front end.
We need a story for this work with Roland. Mikaela to work with Roland on this to find out where there may be API errors.

[mbertucci]

Moving to refinement. My request is for Roland to create a list of where API errors are possible and for us to write a story based on that list.

[mbertucci]

any API fails

[mbertucci]

Andy please come up with a design for when any of the APIs in our system fail

I will write the story for this when I get back.. sorry I didn't have time to write this story

You may need to work with the developers on this

This task is inline with working left to right on the Story map

STory map https://miro.com/app/board/uXjVKQlO-ME=/?moveToWidget=3458764598250351705&cot=14

[mbertucci]

@andyyanggov to work with @dimak1 on the list of integration points that have impacts on the UI so Andy knows where designs are needed. user document upload, download payment receipt is a known one.

[mbertucci]

I wrote a story for this and closed the other ticket that didn't have much information. I seriously guessed on this and used google to help me out with this.. Please see if you think the scenarios make sense and change if you feel the need to change them.

[jdyck-fw]

Application number can potentially be included here as a reference, otherwise the approach here is to have a generic error message.

[mbertucci]

Hey @andyyanggov we need to go over this with the team again. We just need a generic error message for the API errors. You could ask the team at stand up.

[qudsia-khan-fw]

Team decision: take out the code

[andyyanggov]

Removed the HTTP status codes from the design.

[mbertucci]

@forgeuxGH5 Is there a Nuxt component for this? Something that the team doesn't need to build?

[jdyck-fw]

Discussed with Mikaela, Stefanie and Scott - Oct 15th. Save this for after December 16th.