From eb17e8e8d6c240f0a46a45b3d37c05a515cbf883 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 12 Mar 2026 18:35:36 +0100
Subject: [PATCH] fix: hide scroll depth and trend chart when rate-limited
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frustration APIs and dashboard API are separate — when frustration
calls fail, Scroll Depth still rendered from cached SWR data,
creating a broken mixed state. Now tracks error state and hides
the bottom section entirely on failure.
---
 app/sites/[id]/behavior/page.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index 8c93ffa..a7e5794 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -53,6 +53,7 @@ export default function BehaviorPage() {
   const [deadClicks, setDeadClicks] = useState<{ items: FrustrationElement[]; total: number }>({ items: [], total: 0 })
   const [byPage, setByPage] = useState<FrustrationByPage[]>([])
   const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
   const refreshRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
   // Fetch dashboard data for scroll depth (goal_counts + stats)
@@ -70,7 +71,9 @@ export default function BehaviorPage() {
       setRageClicks(rageData)
       setDeadClicks(deadData)
       setByPage(pageData)
+      setError(false)
     } catch {
+      setError(true)
       toast.error('Failed to load behavior data')
     } finally {
       setLoading(false)
@@ -185,14 +188,16 @@ export default function BehaviorPage() {
       {/* By page breakdown */}
       <FrustrationByPageTable pages={byPage} loading={loading} />
 
-      {/* Scroll depth + Frustration trend */}
-      <div className="grid gap-6 lg:grid-cols-2 mb-8">
-        <ScrollDepth
-          goalCounts={dashboard?.goal_counts ?? []}
-          totalPageviews={dashboard?.stats?.pageviews ?? 0}
-        />
-        <FrustrationTrend summary={summary} loading={loading} />
-      </div>
+      {/* Scroll depth + Frustration trend — hide when data failed to load */}
+      {!error && (
+        <div className="grid gap-6 lg:grid-cols-2 mb-8">
+          <ScrollDepth
+            goalCounts={dashboard?.goal_counts ?? []}
+            totalPageviews={dashboard?.stats?.pageviews ?? 0}
+          />
+          <FrustrationTrend summary={summary} loading={loading} />
+        </div>
+      )}
 
       <DatePicker
         isOpen={isDatePickerOpen}