Add better error handling and display elegant error messages

[RyanRussell00]

There are times when the user is unable to add a playlist (see #4). This is mostly because the app isn't letting the user know what the error is, whether it be on their side or on the API side.

Add better error handling so that users are informed of what failed and why it failed.

[sonamdh1]

Hey @RyanRussell00,
I can take this up. But I'm not sure what errors the API throws and what all validation is required.
AFAIK there is no validation error message when a user enters an invalid input value. I can add that.
Can you please specify what more it entails?

[RyanRussell00]

@sonamdh1 If you look at this page on the Spotify docs it explains all the API's responses.
https://developer.spotify.com/documentation/web-api/#response-status-codes

I'm not quite sure how we should be displaying errors. Currently, if the user inputs an invalid input on a required field it just highlights it in red and shows an error message. Not very intuitive.
I'm thinking maybe when the user tries hitting "Get Recommendations" or "Save Playlist" they're prompted with some sort of message letting them know that X fields have errors.

As for the API errors, right now, if there's an API error there's a regular alert box that comes up with very generic (and not helpful) messages. Maybe we could change this to a better looking modal and add some more meaningful messages?

There is no exact specification as to how the error handling should look/work, as long as it's intuitive and looks better than what we have now.

Let me know if you have any more questions

[sonamdh1]

@RyanRussell00 Ah alright, totally missed the error messages displayed after invalid input. I think that is fine, I have seen form validation errors like that on various web pages. Though the message can be displayed on the right-hand side along the input field. I think displaying a combined error message might not make it easier to navigate for the errored input fields.

Thanks for sharing the API documentation, will try to add some specific messages for handling different status codes. Also, in place of the default alert, will add a custom modal.

Can you please share some instances in which the API for recommendations and save-playlist are giving error, that will make it easier for me to generate the scenarios and make the changes?

[RyanRussell00]

@sonamdh1 Sorry for the late reply.
Everything you just said sounds good to me.

Some instance when the API gives an error:

• When the user token expires (the user needs to log in again). One way to simulate this is to start the Node server, log in to the app, go into your session cookies and delete/change the token
• Bad request (if somehow the user gets an invalid input past the validations; very rare but I've seen it happen)
• Not an API error, but if the user hits "get recommendations" without first selecting a track the modal that opens up is very ugly and could be improved.

That's all I can think of off the top of my head. You should also add a generic error handler in case we get other responses for whatever reason (such as Spotify server being down, or some other weird issue).

Let me know if you have any more questions, thanks!

[sonamdh1]

@RyanRussell00 Sorry, I started working on it, but due to some reasons, I'm not able to get time to work on it and probably won't be able to take it up again in the coming month as well.

[RyanRussell00]

@sonamdh1 No problem, thanks for letting me know!

This issue is open for anyone to work on