Design and implement error fallback component

[lucasbordeau]

Scope & Context

When a synchronous React error is caught.

Current behavior

We have a very rough error fallback component :

Expected behavior

We'd like to have a pretty error fallback component. The retry button allows to reload the page. Use the same style of empty states.

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=16596-94606&mode=design&t=paVI9QsoQYc5qsKU-11

[lucasbordeau]

@Bonapara

[Bonapara]

@lucasbordeau, description updated

[harrisonJones12]

Can you assign this issue to me?

[harrisonJones12]

How would I pull down this app and start a dev server?

[FelixMalfait]

@Kanav-Arora could you please handle this as part of https://github.com/twentyhq/twenty/issues/3310 ? I think it'd be nice if we still display the error though - but small font. Thanks 🙏 cc @Bonapara

[Bonapara]

Let's put the error under the "Server’s on a coffee break" like this. (With a max width 600px)

[Kanav-Arora]

Hi @FelixMalfait @Bonapara Sure

[FelixMalfait]

Thanks @Kanav-Arora!

[Kanav-Arora]

Hi @FelixMalfait @Bonapara

I don't think so we should show error message also. What do you think? Its too technical

[FelixMalfait]

Thanks @Kanav-Arora I agree it's ugly but it will be handy in the coming months as we are still receiving a lot of bug reports directly from self-hosting users (that we would not see in Sentry). Maybe set a max width on the text so that at least it's a bit more readable and over multiple lines? And eventually also limit the height so that we only see at most 3 lines? What matter is the beginning of the message usually

[Bonapara]

The max-width should be 600px indeed!

[Kanav-Arora]

Hi @FelixMalfait This issue is completed

[FelixMalfait]

Great thanks!