feat: add real-time ChatGPT status checker blog post
- Add new blog post: 'is-chatgpt-down-use-jan' - Create OpenAIStatusChecker React component with real-time data - Use CORS proxy to fetch live OpenAI status from status.openai.com - Include SEO-optimized status indicators and error messages - Add ChatGPT downtime promotion for Jan alternative - Component features: auto-refresh, fallback handling, dark mode support
This commit is contained in:
eckartal
Faisal Amir
parent
13aa72a51f
commit
e09c1f0316
261
docs/src/components/OpenAIStatusChecker.tsx
Normal file
261
docs/src/components/OpenAIStatusChecker.tsx
Normal file
@ -0,0 +1,261 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { AlertCircle, CheckCircle, Clock, RefreshCw } from 'lucide-react';
|
||||
|
||||
interface StatusData {
|
||||
status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' | 'under_maintenance' | 'unknown';
|
||||
lastUpdated: string;
|
||||
incidents: Array<{
|
||||
name: string;
|
||||
status: string;
|
||||
impact: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
const StatusIcon = ({ status }: { status: string }) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return <CheckCircle className="w-5 h-5 text-green-500" />;
|
||||
case 'degraded':
|
||||
case 'partial_outage':
|
||||
return <AlertCircle className="w-5 h-5 text-yellow-500" />;
|
||||
case 'major_outage':
|
||||
return <AlertCircle className="w-5 h-5 text-red-500" />;
|
||||
case 'under_maintenance':
|
||||
return <Clock className="w-5 h-5 text-blue-500" />;
|
||||
default:
|
||||
return <AlertCircle className="w-5 h-5 text-gray-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800';
|
||||
case 'degraded':
|
||||
case 'partial_outage':
|
||||
return 'bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800';
|
||||
case 'major_outage':
|
||||
return 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-300 dark:border-red-800';
|
||||
case 'under_maintenance':
|
||||
return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-900/20 dark:text-gray-300 dark:border-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'operational':
|
||||
return 'All Systems Operational';
|
||||
case 'degraded':
|
||||
return 'Degraded Performance';
|
||||
case 'partial_outage':
|
||||
return 'Partial Service Outage';
|
||||
case 'major_outage':
|
||||
return 'Major Service Outage';
|
||||
case 'under_maintenance':
|
||||
return 'Under Maintenance';
|
||||
default:
|
||||
return 'Status Unknown';
|
||||
}
|
||||
};
|
||||
|
||||
export const OpenAIStatusChecker: React.FC = () => {
|
||||
const [statusData, setStatusData] = useState<StatusData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
|
||||
|
||||
const fetchStatus = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
console.log('Fetching real OpenAI status...');
|
||||
|
||||
// Use CORS proxy to fetch real OpenAI status
|
||||
const proxyUrl = 'https://api.allorigins.win/get?url=';
|
||||
const targetUrl = 'https://status.openai.com/api/v2/status.json';
|
||||
|
||||
const response = await fetch(proxyUrl + encodeURIComponent(targetUrl));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Proxy returned ${response.status}`);
|
||||
}
|
||||
|
||||
const proxyData = await response.json();
|
||||
const openaiData = JSON.parse(proxyData.contents);
|
||||
|
||||
console.log('Real OpenAI data received:', openaiData);
|
||||
|
||||
// Transform real OpenAI data to our format
|
||||
const transformedData = {
|
||||
status: mapOpenAIStatusClient(openaiData.status?.indicator || 'operational'),
|
||||
lastUpdated: openaiData.page?.updated_at || new Date().toISOString(),
|
||||
incidents: (openaiData.incidents || []).slice(0, 3),
|
||||
components: (openaiData.components || []).filter(component =>
|
||||
['ChatGPT', 'API', 'Playground'].some(name =>
|
||||
(component.name || '').toLowerCase().includes(name.toLowerCase())
|
||||
)
|
||||
)
|
||||
};
|
||||
|
||||
setStatusData(transformedData);
|
||||
setLastRefresh(new Date());
|
||||
console.log('✅ Real OpenAI status loaded successfully!');
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch real status:', err);
|
||||
|
||||
// Fallback: try alternative proxy
|
||||
try {
|
||||
console.log('Trying alternative proxy...');
|
||||
const altResponse = await fetch(`https://cors-anywhere.herokuapp.com/https://status.openai.com/api/v2/summary.json`);
|
||||
|
||||
if (altResponse.ok) {
|
||||
const altData = await altResponse.json();
|
||||
setStatusData({
|
||||
status: mapOpenAIStatusClient(altData.status?.indicator || 'operational'),
|
||||
lastUpdated: new Date().toISOString(),
|
||||
incidents: []
|
||||
});
|
||||
setLastRefresh(new Date());
|
||||
console.log('✅ Alternative proxy worked!');
|
||||
return;
|
||||
}
|
||||
} catch (altErr) {
|
||||
console.log('Alternative proxy also failed');
|
||||
}
|
||||
|
||||
// Final fallback
|
||||
setError('Unable to fetch real-time status');
|
||||
setStatusData({
|
||||
status: 'operational',
|
||||
lastUpdated: new Date().toISOString(),
|
||||
incidents: []
|
||||
});
|
||||
setLastRefresh(new Date());
|
||||
console.log('Using fallback status');
|
||||
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Client-side status mapping function
|
||||
const mapOpenAIStatusClient = (indicator: string) => {
|
||||
switch (indicator.toLowerCase()) {
|
||||
case 'none':
|
||||
case 'operational':
|
||||
return 'operational';
|
||||
case 'minor':
|
||||
return 'degraded';
|
||||
case 'major':
|
||||
return 'partial_outage';
|
||||
case 'critical':
|
||||
return 'major_outage';
|
||||
case 'maintenance':
|
||||
return 'under_maintenance';
|
||||
default:
|
||||
return 'operational'; // Default to operational
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatus();
|
||||
// Refresh every 2 minutes for more real-time updates
|
||||
const interval = setInterval(fetchStatus, 2 * 60 * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchStatus();
|
||||
};
|
||||
|
||||
if (loading && !statusData) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<RefreshCw className="w-6 h-6 text-blue-500 animate-spin" />
|
||||
<span className="text-lg font-medium text-gray-700 dark:text-gray-300">Checking OpenAI Status...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-red-200 dark:border-red-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<AlertCircle className="w-6 h-6 text-red-500" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-red-800 dark:text-red-300">Unable to Check Status</h3>
|
||||
<p className="text-red-600 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className="px-4 py-2 bg-red-100 hover:bg-red-200 dark:bg-red-900/20 dark:hover:bg-red-900/40 text-red-700 dark:text-red-300 rounded-lg font-medium transition-colors"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 my-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<StatusIcon status={statusData?.status || 'unknown'} />
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">OpenAI Services</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Last updated: {new Date(lastRefresh).toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-5 h-5 text-gray-600 dark:text-gray-400 ${loading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={`inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold border ${getStatusColor(statusData?.status || 'unknown')}`}>
|
||||
{getStatusText(statusData?.status || 'unknown')}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">Quick Status Check</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">ChatGPT</span>
|
||||
<StatusIcon status={statusData?.status || 'unknown'} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">API</span>
|
||||
<StatusIcon status={statusData?.status || 'unknown'} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-600 dark:text-gray-400">Playground</span>
|
||||
<StatusIcon status={statusData?.status || 'unknown'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-xs text-gray-500 dark:text-gray-400 text-center">
|
||||
{error ? 'Using fallback status • ' : '🟢 Real-time data from OpenAI • '}
|
||||
Updated: {new Date(lastRefresh).toLocaleTimeString()}
|
||||
<br />
|
||||
<a href="/post/is-chatgpt-down-use-jan#-is-chatgpt-down" className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 underline">
|
||||
View detailed status guide
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
BIN
docs/src/pages/post/_assets/is-chatgpt-down.jpg
Normal file
BIN
docs/src/pages/post/_assets/is-chatgpt-down.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 402 KiB |
124
docs/src/pages/post/is-chatgpt-down-use-jan.mdx
Normal file
124
docs/src/pages/post/is-chatgpt-down-use-jan.mdx
Normal file
@ -0,0 +1,124 @@
|
||||
---
|
||||
title: "If ChatGPT is down, switch to AI that never goes down"
|
||||
description: "Check if ChatGPT down right now, and learn how to use AI that never goes down."
|
||||
tags: AI, ChatGPT down, ChatGPT alternative, Jan, local AI, offline AI, ChatGPT at capacity
|
||||
categories: guides
|
||||
date: 2025-09-30
|
||||
ogImage: _assets/is-chatgpt-down.jpg
|
||||
twitter:
|
||||
card: summary_large_image
|
||||
site: "@jandotai"
|
||||
title: "Realtime Status Checker: Is ChatGPT down?"
|
||||
description: "Check if ChatGPT is down right now with our real-time status checker, and learn how to use AI that never goes offline."
|
||||
image: _assets/is-chatgpt-down.jpg
|
||||
---
|
||||
import { Callout } from 'nextra/components'
|
||||
import CTABlog from '@/components/Blog/CTA'
|
||||
import { OpenAIStatusChecker } from '@/components/OpenAIStatusChecker'
|
||||
|
||||
# If ChatGPT is down, switch to AI that never goes down
|
||||
|
||||
If you're seeing ChatGPT is down, it could a good signal to switch to [Jan](https://www.jan.ai/), AI that never goes down.
|
||||
|
||||
## 🔴 Realtime Status Checker: Is ChatGPT down?
|
||||
<Callout>
|
||||
This live tracker shows if ChatGPT is down right now.
|
||||
</Callout>
|
||||
<OpenAIStatusChecker />
|
||||
|
||||
### ChatGPT Status Indicators
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
|
||||
<div className="p-4 rounded-lg border border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<span className="font-semibold text-green-800 dark:text-green-300">Operational</span>
|
||||
</div>
|
||||
<p className="text-sm text-green-700 dark:text-green-400">All systems are functioning normally with no reported issues.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-yellow-200 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||||
<span className="font-semibold text-yellow-800 dark:text-yellow-300">Degraded Performance</span>
|
||||
</div>
|
||||
<p className="text-sm text-yellow-700 dark:text-yellow-400">Services are running but may be slower than usual.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-orange-200 bg-orange-50 dark:bg-orange-900/20 dark:border-orange-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 bg-orange-500 rounded-full"></div>
|
||||
<span className="font-semibold text-orange-800 dark:text-orange-300">Partial Outage</span>
|
||||
</div>
|
||||
<p className="text-sm text-orange-700 dark:text-orange-400">Some features or regions may be experiencing issues.</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-lg border border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<span className="font-semibold text-red-800 dark:text-red-300">Major Outage</span>
|
||||
</div>
|
||||
<p className="text-sm text-red-700 dark:text-red-400">Significant service disruption affecting most users.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Skip the downtime with Jan
|
||||
|
||||
When ChatGPT is down, Jan keeps working. Jan is an open-source ChatGPT alternative that runs on your computer - no servers, no outages, no waiting.
|
||||
|
||||
|
||||
*Jan works even when ChatGPT doesn't.*
|
||||
|
||||
### Why Jan never goes down:
|
||||
- **Runs locally** - No dependency on external servers
|
||||
- **Always available** - Works offline, even on flights
|
||||
- **No capacity limits** - Uses your computer's resources
|
||||
- **100% private** - Your conversations stay on your device
|
||||
|
||||
### Get started in 3 mins:
|
||||
1. Download Jan: [jan.ai](https://jan.ai)
|
||||
2. Install a model: Choose from Jan, Qwen, or other top models
|
||||
3. Start chatting: Similar design as ChatGPT, but always available if you use local models
|
||||
|
||||
<Callout type="info">
|
||||
**Pro tip:** Keep both ChatGPT and Jan. You'll never lose productivity to outages again.
|
||||
</Callout>
|
||||
|
||||
Jan runs AI models locally, so you don't need internet access. That means Jan is unaffected when ChatGPT is down.
|
||||
|
||||
### Why does ChatGPT goes down?
|
||||
There could be multiple reasons:
|
||||
- Too many users at once
|
||||
- Data center or API downtime
|
||||
- Planned or uplanned updates
|
||||
- Limited in some locations
|
||||
|
||||
ChatGPT depends on OpenAI’s servers. If those go down, so does ChatGPT. Jan users don't affect by ChatGPT's outage.
|
||||
|
||||
### Common ChatGPT Errors
|
||||
|
||||
When ChatGPT experiences issues, you might see these error messages:
|
||||
|
||||
- "ChatGPT is at capacity right now": Too many users online, try again later
|
||||
- "Error in message stream": Connection problems with OpenAI servers
|
||||
- "Something went wrong": General server error, refresh and retry
|
||||
- "Network error": Internet connectivity issues on your end or OpenAI's
|
||||
- "Rate limit exceeded": Too many requests sent, wait before trying again
|
||||
- "This model is currently overloaded": High demand for specific model
|
||||
|
||||
## Quick answers about ChatGPT status
|
||||
|
||||
### Is ChatGPT down today?
|
||||
Check the ChatGPT realtime status above. If ChatGPT is down, you'll see it here.
|
||||
|
||||
### Why is ChatGPT down?
|
||||
Usually server overload, maintenance, or outages at OpenAI.
|
||||
|
||||
### What does “ChatGPT is at capacity” mean?
|
||||
Too many users are online at the same time. You’ll need to wait or switch to Jan instead.
|
||||
|
||||
### Is ChatGPT shutting down?
|
||||
No, ChatGPT isn’t shutting down. Outages are temporary.
|
||||
|
||||
### Can I use ChatGPT offline?
|
||||
No. ChatGPT always requires internet. For [offline AI](https://www.jan.ai/post/offline-chatgpt-alternative), use [Jan](https://jan.ai).
|
||||
Loading…
x
Reference in New Issue
Block a user