NWACus / avy

Mobile-Native Viewing of NAC Avalanche Forecasts
MIT License
10 stars 6 forks source link

Home map not loading #669

Closed charlotteguard closed 7 months ago

charlotteguard commented 7 months ago

I'm just getting a consistent spinning circle for the home map. I can click on the other options in the global nav and look at obs & weather station data but the home map is just a spinning ball.Screenshot_20240129-180307_Avy.jpg

beaucollins commented 7 months ago

This same problem is present in iOS and Android emulator builds. Some debugging was showing that the Glide Avalanches state in the api data is triggering this loading state.

This is an example error in the console:

 WARN  [ZodError: [
  {
    "received": "Glide Avalanches",
    "code": "invalid_enum_value",
    "options": [
      "Dry Loose",
      "Storm Slab",
      "Wind Slab",
      "Persistent Slab",
      "Deep Persistent Slab",
      "Wet Loose",
      "Wet Slab",
      "Cornice Fall",
      "Glide"
    ],
    "path": [
      "forecast_avalanche_problems",
      0,
      "name"
    ],
    "message": "Invalid enum value. Expected 'Dry Loose' | 'Storm Slab' | 'Wind Slab' | 'Persistent Slab' | 'Deep Persistent Slab' | 'Wet Loose' | 'Wet Slab' | 'Cornice Fall' | 'Glide', received 'Glide Avalanches'"
  }
]]

The <QueryResult /> component is given a list of results that it checks for a result.isLoading condition on each item. The items with this Glide Avalanches issue will always be { isLoading : true } which means the loading screen never exits.

If I add the Glide Avalanches to the enum the screen loads

diff --git a/types/nationalAvalancheCenter/schemas.ts b/types/nationalAvalancheCenter/schemas.ts
index 1e0eca8..1b01351 100644
--- a/types/nationalAvalancheCenter/schemas.ts
+++ b/types/nationalAvalancheCenter/schemas.ts
@@ -72,6 +72,7 @@ export enum AvalancheProblemName {
   WetSlab = 'Wet Slab',
   CorniceFall = 'Cornice Fall',
   Glide = 'Glide',
+  GlideAvalanches = 'Glide Avalanches',
 }

 export enum AvalancheProblemLikelihood {

image

And it looks like the QueryState component tries to log failures to Sentry but it would fail to log these cases (they all have { isError: false }).

https://github.com/NWACus/avy/blob/3e6ae6cbd436552607e4e721cb3fbf011aacc39b/components/content/QueryState.tsx#L25-L32

An example result state shows isLoading: true, isError: false and failureReason: {...}. So the app treats it as though it never finished loading from the API and the isError: false prevents it from being logged. It's not an API error but a client side data validation error.

image
stevekuznetsov commented 7 months ago

@beaucollins your analysis is spot on and your suggested code fix I think is 100% correct - would you like to send a PR?

On the reporting front, the QueryState bits you identified do report HTTP errors with the request - which are not happening here - we should still run the following code that would report the error when we run our validation:

https://github.com/NWACus/avy/blob/3e6ae6cbd436552607e4e721cb3fbf011aacc39b/hooks/useNACObservation.ts#L74-L78

If you have suggestions for improving the approach to validation, there's a meta-issue here: https://github.com/NWACus/avy/issues/657