From 943d1a2647bfedd361fdf4252192be52ef87b697 Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Wed, 1 Jul 2026 10:56:49 +0200
Subject: [PATCH] fix(studio): show friendly error on infra-monitoring failure
 in db observability

The Database section of the observability overview page rendered the raw
infra-monitoring API error message (e.g. "duplicate time series") directly
in each metric card. Replace it with a static "Unable to load" message so
internal errors are no longer surfaced to users.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../DatabaseInfrastructureSection.tsx            | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/studio/components/interfaces/Observability/DatabaseInfrastructureSection.tsx b/apps/studio/components/interfaces/Observability/DatabaseInfrastructureSection.tsx
index 9c92aac9781..3eef8058608 100644
--- a/apps/studio/components/interfaces/Observability/DatabaseInfrastructureSection.tsx
+++ b/apps/studio/components/interfaces/Observability/DatabaseInfrastructureSection.tsx
@@ -100,10 +100,8 @@ export const DatabaseInfrastructureSection = ({
     [infraData, maxConnectionsData]
   )
 
-  const errorMessage =
-    infraError && typeof infraError === 'object' && 'message' in infraError
-      ? String(infraError.message)
-      : 'Error loading data'
+  // Show a friendly, static message instead of leaking the raw API error to the user
+  const metricErrorState = <span className="text-xs text-foreground-lighter">Unable to load</span>
 
   // Generate database report URL with time range parameters
   const getDatabaseReportUrl = () => {
@@ -175,7 +173,7 @@ export const DatabaseInfrastructureSection = ({
             </MetricCardHeader>
             <MetricCardContent>
               {infraError ? (
-                <div className="text-xs text-destructive wrap-break-word">{errorMessage}</div>
+                metricErrorState
               ) : connections.max > 0 ? (
                 <MetricCardValue>
                   {connections.peak}/{connections.max}
@@ -196,7 +194,7 @@ export const DatabaseInfrastructureSection = ({
             </MetricCardHeader>
             <MetricCardContent>
               {infraError ? (
-                <div className="text-xs text-destructive wrap-break-word">{errorMessage}</div>
+                metricErrorState
               ) : metrics ? (
                 <MetricCardValue>{metrics.disk.current.toFixed(0)}%</MetricCardValue>
               ) : (
@@ -215,7 +213,7 @@ export const DatabaseInfrastructureSection = ({
             </MetricCardHeader>
             <MetricCardContent>
               {infraError ? (
-                <div className="text-xs text-destructive wrap-break-word">{errorMessage}</div>
+                metricErrorState
               ) : metrics ? (
                 <MetricCardValue>{metrics.diskIo.current.toFixed(0)}%</MetricCardValue>
               ) : (
@@ -234,7 +232,7 @@ export const DatabaseInfrastructureSection = ({
             </MetricCardHeader>
             <MetricCardContent>
               {infraError ? (
-                <div className="text-xs text-destructive wrap-break-word">{errorMessage}</div>
+                metricErrorState
               ) : metrics ? (
                 <MetricCardValue>{metrics.ram.current.toFixed(0)}%</MetricCardValue>
               ) : (
@@ -253,7 +251,7 @@ export const DatabaseInfrastructureSection = ({
             </MetricCardHeader>
             <MetricCardContent>
               {infraError ? (
-                <div className="text-xs text-destructive wrap-break-word">{errorMessage}</div>
+                metricErrorState
               ) : metrics ? (
                 <MetricCardValue>{metrics.cpu.current.toFixed(0)}%</MetricCardValue>
               ) : (