Poor handling of error when waiting to join group

[taoeffect]

Problem

If for some reason an exception is thrown inside of gi.actions/group/join, and this handler gets called:

    } catch (e) {
      console.error('gi.actions/group/join failed!', e)
      throw new GIErrorUIRuntimeError(L('Failed to join the group: {codeError}', { codeError: e.message }))

Then the user is still stuck on the PendingApproval.vue page, and there is no indication whatsoever that an error occurred. This is a problem because the correct action that the user needs to take is to refresh the page.

I encountered this while testing grunt dev --tunnel and an error 502 Bad Gateway was thrown by the tunnel. This is the error that appeared in the console on the mobile device:

[error] ["[gi.actions/group/join] Error while sending key request for z9brRu3VUtFRxWvL1uuMkc9q89999VC5B1PnXMf7KdKKs46E1BZL:",{"name":"SyntaxError","message":"Unexpected token 'B', \"Bad Gateway\" is not valid JSON","stack":"SyntaxError: Unexpected token 'B', \"Bad Gateway\" is not valid JSON"}]
[error] ["[gi.actions/group/join] Error during join (inside CONTRACT_HAS_RECEIVED_KEYS event handler)",{"name":"GIErrorUIRuntimeError","message":"Failed to join the group: Unexpected token 'B', \"Bad Gateway\" is not valid JSON","stack":"GIErrorUIRuntimeError: Failed to join the group: Unexpected token 'B', \"Bad Gateway\" is not valid JSON\n    at gi.actions/group/join (https://gi2131.loca.lt/assets/js/main.js:4013:13)"}]
[error] ["gi.actions/group/join failed!",{"name":"SyntaxError","message":"Unexpected token 'B', \"Bad Gateway\" is not valid JSON","stack":"SyntaxError: Unexpected token 'B', \"Bad Gateway\" is not valid JSON"}]
[error] ["[chelonia] failed to sync z9brRu3VTGqRArbqGu4XqZ4TkJVrXn1e8ckH4etgvwe6cyg3Nvz3:",{"name":"Error","message":"502: ","stack":"Error: 502: \n    at https://gi2131.loca.lt/assets/js/chunk-PF6LA6BE-cached.js:622:13\n    at async chelonia/private/in/syncContract (https://gi2131.loca.lt/assets/js/chunk-PF6LA6BE-cached.js:1613:34)\n    at async okTurtles.eventQueue/queueEvent (https://gi2131.loca.lt/assets/js/chunk-PF6LA6BE-cached.js:192:20)\n    at async Promise.all (index 0)"}]

Solution

If an exception is caught here, we need to let the user know on the PendingApproval.vue page that an error occurred (and what the e.message was). And also display a button to refresh the page, similar to how we have the Retry button in the ErrorPage.vue page.

[taoeffect]

I don't think #2091 closed this.