diff --git a/components/CMSConnectivityNotice.tsx b/components/CMSConnectivityNotice.tsx index 3272e799..63b7f592 100644 --- a/components/CMSConnectivityNotice.tsx +++ b/components/CMSConnectivityNotice.tsx @@ -4,69 +4,82 @@ import React, { useEffect, useState } from 'react'; import { AlertCircle, RefreshCw, Database } from 'lucide-react'; export default function CMSConnectivityNotice() { - const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking'); - const [errorMsg, setErrorMsg] = useState(''); - const [isVisible, setIsVisible] = useState(false); + const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking'); + const [errorMsg, setErrorMsg] = useState(''); + const [isVisible, setIsVisible] = useState(false); - useEffect(() => { - // Only show in development or if explicitly checking - const checkCMS = async () => { - try { - const response = await fetch('/api/health/cms'); - const data = await response.json(); + useEffect(() => { + // Only show if we've detected an issue AND we are in a context where we want to see it + const checkCMS = async () => { + const isDebug = new URLSearchParams(window.location.search).has('cms_debug'); + const isLocal = + window.location.hostname === 'localhost' || window.location.hostname.includes('127.0.0.1'); + const isStaging = + window.location.hostname.includes('staging') || + window.location.hostname.includes('testing'); - if (data.status !== 'ok') { - setStatus('error'); - setErrorMsg(data.message); - setIsVisible(true); - } else { - setStatus('ok'); - setIsVisible(false); - } - } catch (err) { - setStatus('error'); - setErrorMsg('Could not connect to CMS health endpoint'); - setIsVisible(true); - } - }; + // Only proceed with check if it's developer context + if (!isLocal && !isStaging && !isDebug) return; - checkCMS(); - }, []); + try { + const response = await fetch('/api/health/cms'); + const data = await response.json(); - if (!isVisible) return null; + if (data.status !== 'ok') { + setStatus('error'); + setErrorMsg(data.message); + setIsVisible(true); + } else { + setStatus('ok'); + setIsVisible(false); + } + } catch (err) { + // If it's a connection error, only show if we are really debugging + if (isDebug || isLocal) { + setStatus('error'); + setErrorMsg('Could not connect to CMS health endpoint'); + setIsVisible(true); + } + } + }; - return ( -
- {errorMsg === 'relation "products" does not exist' - ? 'The database schema is missing. Please sync your local data to this environment.' - : errorMsg || 'The application cannot connect to the Directus CMS.'} -
-+ {errorMsg === 'relation "products" does not exist' + ? 'The database schema is missing. Please sync your local data to this environment.' + : errorMsg || 'The application cannot connect to the Directus CMS.'} +
+