fix: harden web map pages against missing API and map data

src/components/CustomWorldMap.cy.js

@@ -1,8 +1,15 @@
+import { mountWithTheme as mount } from 'models/test-utils';
 import CustomWorldMap from './CustomWorldMap';
-import { mountWithTheme as mount } from '../models/test-utils';
 
 describe('CustomWorldMap', () => {
   it('renders', () => {
     mount(<CustomWorldMap totalTrees={10} con="af" />);
   });
+
+  it('shows 0 instead of NaN for missing tree counts', () => {
+    mount(<CustomWorldMap totalTrees={undefined} con="af" />);
+
+    cy.contains('0').should('exist');
+    cy.contains('NaN').should('not.exist');
+  });
 });

src/components/CustomWorldMap.js

@@ -3,10 +3,10 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import WorldMap from 'react-world-map';
+import { useMobile } from 'hooks/globalHooks';
+import TreeTooltip from 'images/tree_tooltip.svg';
 import { makeStyles } from 'models/makeStyles';
 import { abbreviateNumber } from 'models/utils';
-import { useMobile } from '../hooks/globalHooks';
-import TreeTooltip from '../images/tree_tooltip.svg';
 
 const useStyles = makeStyles()((theme) => ({
   root: {
@@ -66,6 +66,9 @@ const mapContinentName = (continentName) => {
 function ToolTip({ totalTrees, con }) {
   const { classes } = useStyles();
   const isMobile = useMobile();
+  const safeTotalTrees = Number.isFinite(Number(totalTrees))
+    ? Number(totalTrees)
+    : 0;
 
   return (
     <Box
@@ -91,7 +94,7 @@ function ToolTip({ totalTrees, con }) {
           transform: 'translate(-50%, -30%)',
         }}
       >
-        {totalTrees}
+        {abbreviateNumber(safeTotalTrees)}
       </Typography>
     </Box>
   );
@@ -114,7 +117,7 @@ function CustomWorldMap({ totalTrees, con }) {
       {continentAbr.map((cont, ind) => (
         <ToolTip
           key={cont}
-          totalTrees={abbreviateNumber(totalTreesArr[ind])}
+          totalTrees={totalTreesArr[ind]}
           pos={toolTipPos}
           con={cont}
         />

src/models/utils.js

@@ -228,8 +228,14 @@ function nextPathBaseDecode(path, base) {
 const wrapper = (callback) => (params) =>
   callback(params).catch((e) => {
     log.warn('error retrieving server props:', e);
-    if (e.response?.status === 404) return { notFound: true };
+    if (e.response?.status === 404) {
+      return {
+        notFound: true,
+        revalidate: Number(process.env.NEXT_CACHE_REVALIDATION_OVERRIDE) || 30,
+      };
+    }
     return {
+      notFound: true,
       revalidate: Number(process.env.NEXT_CACHE_REVALIDATION_OVERRIDE) || 30,
     };
   });

src/pages/organizations/[organizationid].js

@@ -65,17 +65,43 @@ export default function Organization(props) {
       // manipulate the map
       const { map } = mapContext;
       if (map && organization) {
-        // map.flyTo(tree.lat, tree.lon, 16);
-        await map.setFilters({
-          map_name: organization.map_name,
-        });
-        const bounds = pathResolver.getBounds(router);
-        if (bounds) {
-          log.warn('goto bounds found in url');
-          await map.gotoBounds(bounds);
-        } else {
-          const view = await map.getInitialView();
-          await map.gotoView(view.center.lat, view.center.lon, view.zoomLevel);
+        try {
+          // map.flyTo(tree.lat, tree.lon, 16);
+          await map.setFilters({
+            map_name: organization.map_name,
+          });
+          const bounds = pathResolver.getBounds(router);
+          if (bounds) {
+            log.warn('goto bounds found in url');
+            await map.gotoBounds(bounds);
+          } else {
+            try {
+              const view = await map.getInitialView();
+              if (view?.center) {
+                await map.gotoView(
+                  view.center.lat,
+                  view.center.lon,
+                  view.zoomLevel,
+                );
+              } else {
+                log.warn(
+                  'initial view is not ready, falling back to global view',
+                );
+                await map.gotoView(0, 0, 2);
+              }
+            } catch (err) {
+              log.warn(
+                'getInitialView failed, falling back to global view',
+                err,
+              );
+              log.warn(
+                'initial view is not ready, falling back to global view',
+              );
+              await map.gotoView(0, 0, 2);
+            }
+          }
+        } catch (err) {
+          log.warn('organization page map sync failed', err);
         }
       } else {
         log.warn('no data:', map, organization);

src/pages/planters/[planterid].js

@@ -78,7 +78,11 @@ export default function Planter(props) {
   log.warn('props for planter page:', props);
   const { planter, nextExtraIsEmbed } = props;
 
-  const { featuredTrees } = planter;
+  const featuredTrees = planter.featuredTrees || { trees: [], total: 0 };
+  const associatedOrganizations = planter.associatedOrganizations || {
+    organizations: [],
+  };
+  const planterSpecies = planter.species || { species: [] };
   const treeCount = featuredTrees?.total;
   const mapContext = useMapContext();
   const isMobile = useMobile();
@@ -114,17 +118,43 @@ export default function Planter(props) {
       // manipulate the map
       const { map } = mapContext;
       if (map && planter) {
-        // map.flyTo(tree.lat, tree.lon, 16);
-        await map.setFilters({
-          userid: planter.id,
-        });
-        const bounds = pathResolver.getBounds(router);
-        if (bounds) {
-          log.warn('goto bounds found in url');
-          await map.gotoBounds(bounds);
-        } else {
-          const view = await map.getInitialView();
-          map.gotoView(view.center.lat, view.center.lon, view.zoomLevel);
+        try {
+          // map.flyTo(tree.lat, tree.lon, 16);
+          await map.setFilters({
+            userid: planter.id,
+          });
+          const bounds = pathResolver.getBounds(router);
+          if (bounds) {
+            log.warn('goto bounds found in url');
+            await map.gotoBounds(bounds);
+          } else {
+            try {
+              const view = await map.getInitialView();
+              if (view?.center) {
+                await map.gotoView(
+                  view.center.lat,
+                  view.center.lon,
+                  view.zoomLevel,
+                );
+              } else {
+                log.warn(
+                  'initial view is not ready, falling back to global view',
+                );
+                await map.gotoView(0, 0, 2);
+              }
+            } catch (err) {
+              log.warn(
+                'getInitialView failed, falling back to global view',
+                err,
+              );
+              log.warn(
+                'initial view is not ready, falling back to global view',
+              );
+              await map.gotoView(0, 0, 2);
+            }
+          }
+        } catch (err) {
+          log.warn('planter page map sync failed', err);
         }
       }
     }
@@ -344,7 +374,7 @@ export default function Planter(props) {
             Featured trees by {planter.first_name}
           </Typography>
           <FeaturedTreesSlider
-            trees={featuredTrees.trees}
+            trees={featuredTrees.trees || []}
             link={(item) => `/planters/${planter.id}/trees/${item.id}`}
           />
         </Box>
@@ -377,7 +407,7 @@ export default function Planter(props) {
           <Grid item sx={{ width: '49%' }}>
             <CustomCard
               handleClick={
-                planter.associatedOrganizations.organizations.length
+                associatedOrganizations.organizations.length
                   ? () => setIsPlanterTab(false)
                   : undefined
               }
@@ -391,7 +421,7 @@ export default function Planter(props) {
               }}
               title="Associated Orgs"
               text={
-                planter.associatedOrganizations.organizations.length || (
+                associatedOrganizations.organizations.length || (
                   <Typography
                     variant="h5"
                     sx={{
@@ -435,7 +465,7 @@ export default function Planter(props) {
               mt: [5, 10],
             }}
           >
-            {planter.species.species.map((species) => (
+            {planterSpecies.species.map((species) => (
               <TreeSpeciesCard
                 key={species.id}
                 name={species.name}
@@ -444,8 +474,7 @@ export default function Planter(props) {
               />
             ))}
           </Box>
-          {(!planter.species.species ||
-            planter.species.species.length === 0) && (
+          {planterSpecies.species.length === 0 && (
             <Typography variant="h5">NO DATA YET</Typography>
           )}
         </Box>
@@ -456,7 +485,7 @@ export default function Planter(props) {
             display: !isPlanterTab ? 'block' : 'none',
           }}
         >
-          {planter.associatedOrganizations.organizations.map((org) => (
+          {associatedOrganizations.organizations.map((org) => (
             <>
               <InformationCard1
                 entityName={org.name}
@@ -527,7 +556,17 @@ export default function Planter(props) {
 async function serverSideData(params) {
   const id = params.planterid;
   const planter = await getPlanterById(id);
-  const data = await getOrgLinks(planter.links);
+  let data = {};
+  if (planter?.links) {
+    try {
+      data = await getOrgLinks(planter.links);
+    } catch (err) {
+      log.warn(
+        'failed to load planter related links, rendering partial page',
+        err,
+      );
+    }
+  }
   return {
     planter: { ...planter, ...data },
   };