NR UI: "find name request" errors are not well handled

[severinbeauvais]

If I search for an existing NR and the API fails to respond (eg, timeout after 30s or other error), then the UI does not handle this error well.

• that there was an error (and any corrective action) is not identified to the user
• the dev console displays:

  Access to XMLHttpRequest at 'https://namex-dev.pathfinder.gov.bc.ca/api/v1/namerequests?nrNum=NR+1666961&phoneNumber=&emailAddress=john.a.m.lane@gov.bc.ca' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  VM4293:1 GET https://namex-dev.pathfinder.gov.bc.ca/api/v1/namerequests?nrNum=NR+1666961&phoneNumber=&emailAddress=john.a.m.lane@gov.bc.ca net::ERR_FAILED
  (anonymous) @ VM4293:1
  dispatchXhrRequest @ xhr.js?b50d:178
  xhrAdapter @ xhr.js?b50d:12
  dispatchRequest @ dispatchRequest.js?5270:52
  Promise.then (async)
  request @ Axios.js?0a06:61
  Axios.<computed> @ Axios.js?0a06:76
  wrap @ bind.js?1d2b:9
  findNameRequest @ new-request-module.ts?decd:1915
  eval @ action.ts?1a62:35
  step @ stateFactory.ts?9e90:26
  eval @ stateFactory.ts?9e90:26
  eval @ stateFactory.ts?9e90:26
  __awaiter @ stateFactory.ts?9e90:26
  action @ action.ts?1a62:24
  wrappedActionHandler @ vuex.esm.js?2f62:851
  dispatch @ vuex.esm.js?2f62:516
  boundDispatch @ vuex.esm.js?2f62:406
  eval @ staticGenerators.ts?1cea:76
  step @ stateFactory.ts?9e90:26
  eval @ stateFactory.ts?9e90:26
  eval @ stateFactory.ts?9e90:26
  __awaiter @ stateFactory.ts?9e90:26
  statics.<computed> @ staticGenerators.ts?1cea:75
  handleSubmit @ existing-request-search.vue?64d1:104
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
  invoker @ vue.runtime.esm.js?2b0e:2179
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
  Vue.$emit @ vue.runtime.esm.js?2b0e:3888
  click @ VBtn.ts?0eff:158
  invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
  invoker @ vue.runtime.esm.js?2b0e:2179
  original._wrapper @ vue.runtime.esm.js?2b0e:6917
  action.ts?1a62:49 Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? 
  That works only in dynamic modules. 
  If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
  Error: Could not perform action findNameRequest
  at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:560:334)
  at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:244:17)
  at Object.eval [as throw] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:175:14)
  at rejected (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:135:32)
  TypeError: Cannot read property 'status' of undefined
  at Object.findNameRequest (webpack-internal:///./src/store/new-request-module.ts:1890:26)
  at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:560:38)
  at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:244:17)
  at Object.eval [as throw] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:175:14)
  at rejected (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:135:32)

• the UI may display the following (which I believe is a BE error that the UI is echoing):

[cameron-eyds]

As Severin noticed before, our handling when quitting/cancelling payments has extended functionality that can cause potential data issues. Not sure the extent of the issues but this console error presents itself after cancelling said payment.

[severinbeauvais]

This has turned into a general "handle network errors" ticket... The following error handling is broken:

• [ ] ~new name search errors~ see #5898
• [ ] ~review and confirm errors~ see #5899
• [x] existing name request error
• [x] any existing name request action
• [ ] ~existing name request edit flow~ will be handled by #5898 or #5899 (whichever one updates the applicant-info-x pages)

[severinbeauvais]

What I found/learned:

• an @Action method should never throw an exception (you MUST handle it)
• some errors are handled using setAppError() (which leads to the error modal)
• in some cases a { text, failed } object is stored in lieu of NR data and may not be handled
  • the calling code must check if (nr?.failed)...
• in some cases the error modal can display as well as whatever modal the user is working in

[severinbeauvais]

Test Notes

Please verify the following:

1. Existing Name Request tab

   • retrieve valid NR
   • retrieve mismatched NR / phone / email
   • retrieve NR with a network error (*)

2. Name Request summary page

   • click Edit then click return
   • click Edit with network error (*)
   • click Upgrade Priority then cancel
   • click Download Receipts then cancel
   • click Cancel and Refund then cancel
   • click Cancel Name Request then cancel
   • verify Extend Expiry then cancel (may not testable atm)
   • verify all the above with a network error (*)

3. Upgrade Priority modal

   • verify Accept with a network error (*)
   • verify Accept

4. Download Receipts modal

   • verify Download PDF with a network error (*)
   • verify Download PDF

5. Cancel and Refund modal

   • verify Cancel this Name Request with a network error (*)
   • verify Cancel this Name Request

6. Cancel Name Request modal

   • verify Cancel this Name Request with a network error (*)
   • verify Cancel this Name Request

7. Extend Expiry (aka Reapply) modal

   • verify Accept with a network error (*)
   • verify Accept

8. New Name Search tab

   • verify Payment modal (after Review and Confirm) with a network error (*)
   • verify Payment modal
   • verify Payment Complete modal (after return from Pay)

Note that some pages still do not have functional error handling -- see #5898 and #5899.

* to simulate a network error, go to dev console → network tab → set network = offline * all network errors should display some notification to the user, either red text on form or an error modal