fix: handle non-JSON Squeak API responses in community widgets

src/components/InsidePostHog/Anniversaries.tsx

@@ -29,7 +29,12 @@ export default function Anniversaries() {
             { encodeValuesOnly: true }
         )
         fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/profiles?${query}`)
-            .then((res) => res.json())
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`Failed to fetch profiles: ${res.status}`)
+                }
+                return res.json()
+            })
             .then(({ data }) => {
                 const teamMembers = data.filter((teamMember) => {
                     const {
@@ -45,6 +50,10 @@ export default function Anniversaries() {
                 setTeamMembers(teamMembers)
                 setLoading(false)
             })
+            .catch(() => {
+                setTeamMembers([])
+                setLoading(false)
+            })
     }, [])
 
     return loading ? (

src/components/InsidePostHog/Newbies.tsx

@@ -29,11 +29,20 @@ export default function Newbies() {
             { encodeValuesOnly: true }
         )
         fetch(`${process.env.GATSBY_SQUEAK_API_HOST}/api/profiles?${query}`)
-            .then((res) => res.json())
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`Failed to fetch profiles: ${res.status}`)
+                }
+                return res.json()
+            })
             .then(({ data }) => {
                 setNewbies(data)
                 setLoading(false)
             })
+            .catch(() => {
+                setNewbies([])
+                setLoading(false)
+            })
     }, [])
 
     return loading ? (

src/components/InsidePostHog/WIP.tsx

@@ -28,32 +28,40 @@ const getRecentUpdate = async () => {
             },
             { encodeValuesOnly: true }
         )}`
-    ).then((res) => res.json())
+    ).then((res) => {
+        if (!res.ok) {
+            throw new Error(`Failed to fetch team updates: ${res.status}`)
+        }
+        return res.json()
+    })
     return data
 }
 
 export default function WIP() {
     const [recentUpdate, setRecentUpdate] = useState()
     const [loading, setLoading] = useState(true)
     useEffect(() => {
-        getRecentUpdate().then((recentUpdate) => setRecentUpdate(recentUpdate?.[0]))
+        getRecentUpdate()
+            .then((recentUpdate) => setRecentUpdate(recentUpdate?.[0]))
+            .catch(() => setRecentUpdate(undefined))
+            .finally(() => setLoading(false))
     }, [])
 
-    useEffect(() => {
-        if (recentUpdate) {
-            setLoading(false)
-        }
-    }, [recentUpdate])
-
     const team = recentUpdate?.attributes?.team?.data?.attributes
     const profile = recentUpdate?.attributes?.question?.data?.attributes?.profile?.data
     const name = [profile?.attributes?.firstName, profile?.attributes?.lastName].filter(Boolean).join(' ')
     const avatarURL = profile?.attributes?.avatar?.data?.attributes?.formats?.thumbnail?.url
     const roadmap = recentUpdate?.attributes?.roadmap?.data
 
-    return loading ? (
-        <Skeleton />
-    ) : (
+    if (loading) {
+        return <Skeleton />
+    }
+
+    if (!recentUpdate) {
+        return null
+    }
+
+    return (
         <div>
             <h3 className="m-0">WIP</h3>
             <p className="m-0 opacity-60">Updates on things we're working on right now</p>