From b2aa35b4af8ef043768b3cf6dfdeeff08c590029 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Tue, 21 Apr 2026 20:02:23 +0600
Subject: [PATCH 1/2] fix(frontend): show observability rate limit message

---
 .../components/EmptyObservability/index.tsx   | 31 +++++++++++++++++--
 .../components/ObservabilityTable/index.tsx   |  8 +++--
 .../src/state/newObservability/hooks/index.ts |  9 ++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx b/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx
index 902bdf92a1..76aed0b271 100644
--- a/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx
+++ b/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx
@@ -1,6 +1,6 @@
 import {memo} from "react"
 
-import {BranchesOutlined} from "@ant-design/icons"
+import {BranchesOutlined, StopOutlined} from "@ant-design/icons"
 import {Typography} from "antd"
 import {useSetAtom} from "jotai"
 
@@ -11,15 +11,42 @@ import {setOnboardingWidgetActivationAtom} from "@/oss/lib/onboarding"
 
 interface EmptyObservabilityProps {
     showOnboarding?: boolean
+    rateLimited?: boolean
+    rateLimitMessage?: string
 }
 
-const EmptyObservability = ({showOnboarding = true}: EmptyObservabilityProps) => {
+const EmptyObservability = ({
+    showOnboarding = true,
+    rateLimited = false,
+    rateLimitMessage,
+}: EmptyObservabilityProps) => {
     const setOnboardingWidgetActivation = useSetAtom(setOnboardingWidgetActivationAtom)
 
     const handleSetupTracing = () => {
         setOnboardingWidgetActivation("tracing-snippet")
     }
 
+    if (rateLimited) {
+        return (
+            <div className="py-16">
+                <EmptyComponent
+                    image={<StopOutlined style={{fontSize: 32, color: "#ff4d4f"}} />}
+                    description={
+                        <div className="flex flex-col gap-2">
+                            <Typography.Text className="text-lg font-medium">
+                                Rate limit reached
+                            </Typography.Text>
+                            <Typography.Text type="secondary">
+                                {rateLimitMessage ||
+                                    "You have reached your monthly quota limit. Please try again later or upgrade your plan."}
+                            </Typography.Text>
+                        </div>
+                    }
+                />
+            </div>
+        )
+    }
+
     if (!showOnboarding) {
         return (
             <div className="py-16">
diff --git a/web/oss/src/components/pages/observability/components/ObservabilityTable/index.tsx b/web/oss/src/components/pages/observability/components/ObservabilityTable/index.tsx
index c8ffa73b42..3ad9f25a52 100644
--- a/web/oss/src/components/pages/observability/components/ObservabilityTable/index.tsx
+++ b/web/oss/src/components/pages/observability/components/ObservabilityTable/index.tsx
@@ -75,6 +75,8 @@ const ObservabilityTable = () => {
         isFetchingMore,
         autoRefresh,
         fetchAnnotations,
+        isRateLimited,
+        rateLimitMessage,
     } = useObservability()
     const setTraceDrawerActiveSpan = useSetAtom(setTraceDrawerActiveSpanAtom)
     const isNewUser = useAtomValue(isNewUserAtom)
@@ -186,7 +188,7 @@ const ObservabilityTable = () => {
     }
 
     const showTableLoading = isLoading && traces.length === 0
-    const isEmptyState = traces.length === 0 && !isLoading
+    const isEmptyState = traces.length === 0 && !isLoading && !isRateLimited
     const showOnboarding = isNewUser && !hasReceivedTraces
 
     useEffect(() => {
@@ -226,7 +228,9 @@ const ObservabilityTable = () => {
                 refreshTrigger={refreshTrigger}
             />
 
-            {isEmptyState ? (
+            {isRateLimited ? (
+                <EmptyObservability rateLimited rateLimitMessage={rateLimitMessage} />
+            ) : isEmptyState ? (
                 <EmptyObservability showOnboarding={showOnboarding} />
             ) : (
                 <div className="flex flex-col gap-2">
diff --git a/web/oss/src/state/newObservability/hooks/index.ts b/web/oss/src/state/newObservability/hooks/index.ts
index 850f96280d..19d7622490 100644
--- a/web/oss/src/state/newObservability/hooks/index.ts
+++ b/web/oss/src/state/newObservability/hooks/index.ts
@@ -52,6 +52,8 @@ export const useObservability = () => {
             isLoading: isLoadingTraces,
             isFetching: isFetchingTraces,
             isRefetching: isRefetchingTraces,
+            isError: isTracesError,
+            error: tracesError,
         },
     ] = useAtom(tracesQueryAtom)
 
@@ -82,6 +84,11 @@ export const useObservability = () => {
         [isFetchingTraces, isFetchingAnnotations, isRefetchingTraces, isRefetchingAnnotations],
     )
 
+    const isRateLimited = isTracesError && (tracesError as {status?: number})?.status === 429
+    const rateLimitMessage = isRateLimited
+        ? (tracesError as Error)?.message || "You have reached your monthly quota limit."
+        : undefined
+
     const fetchTraces = useCallback(async () => {
         const res = await refetchTraces()
         return res.data
@@ -111,6 +118,8 @@ export const useObservability = () => {
         annotations,
         isLoading:
             isLoadingObservability || isLoadingTraces || isLoadingAnnotations || isRefreshing,
+        isRateLimited,
+        rateLimitMessage,
         fetchMoreTraces,
         hasMoreTraces: hasNextPage,
         isFetchingMore: isFetchingNextPage,

From 51557232d937cb065c5f7af3c0c0ac28ae55e708 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashraf.chowdury09@gmail.com>
Date: Tue, 21 Apr 2026 20:35:19 +0600
Subject: [PATCH 2/2] add upgrade link to rate limit message in
 EmptyObservability component

---
 .../components/EmptyObservability/index.tsx      | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx b/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx
index 76aed0b271..ac16fae612 100644
--- a/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx
+++ b/web/oss/src/components/pages/observability/components/EmptyObservability/index.tsx
@@ -3,10 +3,12 @@ import {memo} from "react"
 import {BranchesOutlined, StopOutlined} from "@ant-design/icons"
 import {Typography} from "antd"
 import {useSetAtom} from "jotai"
+import Link from "next/link"
 
 import EmptyState from "@/oss/components/EmptyState"
 import {EMPTY_STATE_VIDEOS} from "@/oss/components/EmptyState/videos"
 import EmptyComponent from "@/oss/components/Placeholders/EmptyComponent"
+import useURL from "@/oss/hooks/useURL"
 import {setOnboardingWidgetActivationAtom} from "@/oss/lib/onboarding"
 
 interface EmptyObservabilityProps {
@@ -21,6 +23,10 @@ const EmptyObservability = ({
     rateLimitMessage,
 }: EmptyObservabilityProps) => {
     const setOnboardingWidgetActivation = useSetAtom(setOnboardingWidgetActivationAtom)
+    const {projectURL} = useURL()
+    const subscriptionHref = projectURL
+        ? `${projectURL}/settings?tab=billing&upgrade=true`
+        : undefined
 
     const handleSetupTracing = () => {
         setOnboardingWidgetActivation("tracing-snippet")
@@ -30,7 +36,7 @@ const EmptyObservability = ({
         return (
             <div className="py-16">
                 <EmptyComponent
-                    image={<StopOutlined style={{fontSize: 32, color: "#ff4d4f"}} />}
+                    image={<StopOutlined style={{fontSize: 32}} />}
                     description={
                         <div className="flex flex-col gap-2">
                             <Typography.Text className="text-lg font-medium">
@@ -39,6 +45,14 @@ const EmptyObservability = ({
                             <Typography.Text type="secondary">
                                 {rateLimitMessage ||
                                     "You have reached your monthly quota limit. Please try again later or upgrade your plan."}
+                                {subscriptionHref && (
+                                    <>
+                                        {" "}
+                                        <Link href={subscriptionHref} className="font-medium">
+                                            Upgrade
+                                        </Link>
+                                    </>
+                                )}
                             </Typography.Text>
                         </div>
                     }