Failed to fetch notification

[MareenG]

I got the following message below the order details

It appears and disappears. After refreshing the website only the error message was shown

[MareenG]

I also got several failed to fetch notifications for Cowswap today( between 10 and 11am). Now they seem to be resolved

[alfetopito]

That is a generic error message that we display when we fail to fetch the order details from the backend.
You see it appearing and disappearing because while an order is not expired, the UI will keep updating the order details in the background to check whether it has been executed without the need to refresh the page.
And since it was failing, the error message was displayed.

There are already pending issues to better handle the error message.

Regarding the issue, might have been an sporadic network or backend failure. Can't tell at this point.

[anxolin]

There might be also a technical reason to see this non informative message.

details: This is also likely related to one issue @vkgnosis discovered today. When the ther backend returns an Error, it's sometimes not returning the CORS headers, this makes the actual request to fail, so even if it's a controlled and nice typed error, the FE will see it as a failed fetch request.

[anxolin]

Linking this to this related issue gnosis/cowswap#339

[elena-zh]

In order to reproduce this issue:

1. Create an order
2. While the order is in the 'Open' status, open the order details in the Explorer
3. Switch off the internet connection
   

[alfetopito]

@alongoni @fapesteguia @maria-vslvn this would be a nice issue to tackle next.

[alongoni]

Perhaps using toast notifications would be a good idea?

Like this one https://www.npmjs.com/package/react-toastify
cc @alfetopito

[alfetopito]

Yes, that's one idea we discussed earlier.

What do you think regarding that kind of UX @biocom @anxolin

[fairlighteth]

I see different objectives

1. User is offline > can't fetch order
2. A specific error occurred fetching an order

For both objectives I regard a toast notification inappropriate for the purpose it intends to serve. A toast notification IMO should be shown after an explicit user initiate action (e.g. you submitted an order -> getting feedback from a toast notification or an order gets settled, etc.).

Instead

1. I think we should show a 'You're offline' banner on top.
2. Show an error banner more close to the table or somewhere below the page header.

The offline banner (point 1 above) could also be shown just like point 2.

[alfetopito]

I'm wondering now about this.

The UI is still functional, you can still see everything about your order.
There's only no background update. Or one update failed. A page refresh "should" be enough to fix, if needed.

What if we don't say anything at all for this type of error?

Of if we do, something like point 2 with a subtle error message like "background update failed, refresh to see new stuff"

[alongoni]

I'm wondering now about this.

The UI is still functional, you can still see everything about your order. There's only no background update. Or one update failed. A page refresh "should" be enough to fix, if needed.

What if we don't say anything at all for this type of error?

Of if we do, something like point 2 with a subtle error message like "background update failed, refresh to see new stuff"

hey @alfetopito, something like this?

[alfetopito]

Yes, that is more subtle.

@biocom good with you?

[fairlighteth]

Some comments:

• I would place it below (or above) the Order Details title and have it occupy 100% width.

• Would use different color backgrounds depending on the severity of the alert (e.g. warning = yellow/orange & error = red)

[alongoni]

Design updated:

Warning:

Error:

[fairlighteth]

Looks good @alongoni Small nitpick: I would left align the text, to match the other left aligned content on the rest of the page.

[elena-zh]

What about adding the link to the 'try again' what will refresh the page?

[alongoni]

Design updated:

• text align to left.
• add "try again" link.
  
  

[fapesteguia]

@maria-vslvn Can you handle this issue?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you think it shouldn't be closed, speak now or forever hold your peace.

[elena-zh]

The issue is a WIP in #992 pr