Better UI : display axios errors nicely

[benoit74]

With the new UI, axios errors are handled but not displayed.

We should :

• display the "nice" error to the user
• be able to open a debug UI where we could see all errors (navigator console?)

[Sudarshan-21]

@benoit74 can you provide me with some testases for the errors we are expecting, OR can you provide me with the steps to produce these errors in the code for testing purpose.

[benoit74]

Could be any kind of error, so we have to be ready for it. These errors are for now logged with console.log statements, but we need to display them nicely in the UI.
Most probably situation is a 404 error because of a bad request, typically a request to a topic which does not exists in the ZIM. Simple to produce by loading a topic which does not exists inside the ZIM.
But code should "cope" with all other errors as well, so it should probably quite generic. It is not expected to happen at all, but it could. I suggest to display something like "An error happened, cannot load requested content" with a "More details" button to display more details : HTTP return code and reply body if any ; or javascript error.

[Sudarshan-21]

@benoit74 I don't exactly seem to find any console.logs in the new_ui branch for any axios errors. but I encountered the axios errors taking care of errors concerned with fetchchannel() and fetchtopic() and I took care of those two errors (screenshot attached).
But as you said in the comment that the axios errors are getting logged into console, I do not seem to find those anywhere (have a look at the sidebar in the following screenshot)

[benoit74]

You are right, we probably decided to stop logging these errors, anyway, you found "the place".