Status Page API
<p>The Status Page API provides programmatic access to your status page data. Use this API to build custom integrations or fetch status data for your applications.</p><h2>Overview Endpoint</h2><p>Fetch a complete status page overview including overall status, services, and incidents.</p><h3>Endpoint</h3><p><code>GET /api/v1/status-pages/public/{project_id}/{slug}/overview</code></p><h3>Parameters</h3><ul><li><p><strong>project_id</strong> (Required) - Your project ID</p></li><li><p><strong>slug</strong> (Required) - Status page slug (default: 'status')</p></li></ul><h3>Response</h3><pre><code class="language-plaintext">{
"status_page": {
"id": "string",
"project_id": "string",
"name": "string",
"slug": "string",
"description": "string | null",
"is_active": true,
"created_at": "ISO 8601 datetime",
"updated_at": "ISO 8601 datetime"
},
"current_status": "operational | maintenance | degraded_performance | partial_outage | major_outage | incident",
"active_updates": [
{
"id": "string",
"status_page_id": "string",
"title": "string",
"description": "string",
"status_type": "operational | maintenance | degraded_performance | partial_outage | major_outage | incident",
"state": "active | resolved",
"is_public": true,
"affected_services": ["string"],
"created_at": "ISO 8601 datetime",
"updated_at": "ISO 8601 datetime",
"resolved_at": "ISO 8601 datetime | null"
}
],
"recent_updates": [...],
"status_breakdown": {
"operational": 10,
"degraded_performance": 0,
"partial_outage": 0,
"major_outage": 0
},
"services_status": {
"service_id_or_name": "operational | maintenance | degraded_performance | partial_outage | major_outage | incident"
},
"services": [
{
"id": "string",
"status_page_id": "string",
"name": "string",
"description": "string | null",
"group_name": "string | null",
"color": "string | null",
"sort_order": 0,
"is_active": true,
"created_at": "ISO 8601 datetime",
"updated_at": "ISO 8601 datetime"
}
],
"total_updates": 15,
"active_count": 1,
"resolved_count": 14
}</code></pre><h2>Using the React SDK</h2><p>The React SDK provides a convenient hook for fetching status data:</p><h3>useStatus Hook</h3><pre><code class="language-plaintext">import { useStatus } from '@appgram/react'
function MyComponent() {
const { status, overview, isLoading, error, refetch } = useStatus({
slug: 'status',
enabled: true,
refreshInterval: 30000
})
if (isLoading) return </code></pre><p><code>Loading...</code></p><p><code><br>if (error) return</code></p><p><code>Error: {error}</code></p><p><code><br><br>return</code></p><h1><code>{status.overall_status}</code></h1><p><code><br>{/* Display components, incidents, etc. */}<br></code></p><p><code><br>}</code><br><br></p><h3>useStatus Options</h3><ul><li><p><strong>slug</strong> (Optional) - Status page slug. Default: 'status'</p></li><li><p><strong>enabled</strong> (Optional) - Enable/disable fetching. Default: true</p></li><li><p><strong>refreshInterval</strong> (Optional) - Auto-refresh in milliseconds. Default: 30000 (30 seconds). Set to 0 to disable.</p></li></ul><h3>useStatus Result</h3><ul><li><p><strong>status</strong> - Transformed status data ready for StatusBoard component</p></li><li><p><strong>overview</strong> - Raw API overview response</p></li><li><p><strong>isLoading</strong> - Loading state boolean</p></li><li><p><strong>error</strong> - Error message string or null</p></li><li><p><strong>refetch</strong> - Function to manually refresh data</p></li></ul><h2>Using the Client API Directly</h2><p>You can also use the client API directly:</p><pre><code class="language-plaintext">import { AppgramClient } from '@appgram/react'
const client = new AppgramClient({
projectId: 'your-project-id',
apiKey: 'your-api-key'
})
async function getStatusOverview() {
const response = await client.getPublicStatusOverview('status')
if (response.success) {
console.log('Status:', response.data.current_status)
console.log('Services:', response.data.services)
console.log('Incidents:', response.data.active_updates)
}
}</code></pre><h2>Status Type Mappings</h2><p>The API uses detailed status types that map to simplified component statuses:</p><h2>Data Transformation</h2><p>The React SDK transforms API data for use with StatusBoard component:</p><h3>Services to Components</h3><pre><code class="language-plaintext">// API Service
{
"id": "srv_123",
"name": "API Server",
"description": "REST API endpoint",
"group_name": "API Services",
"color": "#3b82f6",
"sort_order": 0,
"is_active": true
}
// Becomes Component
{
"id": "srv_123",
"name": "API Server",
"description": "REST API endpoint",
"status": "operational",
"group": "API Services"
}</code></pre><h3>Status Updates to Incidents</h3><pre><code class="language-plaintext">// API Status Update
{
"id": "upd_456",
"title": "API latency",
"description": "Increased response times",
"status_type": "degraded_performance",
"state": "active",
"affected_services": ["API Server", "Database"],
"created_at": "2024-01-15T10:00:00Z"
}
// Becomes Incident
{
"id": "upd_456",
"title": "API latency",
"status": "investigating",
"impact": "minor",
"created_at": "2024-01-15T10:00:00Z",
"resolved_at": null,
"updates": [{
"id": "upd_456-initial",
"message": "Increased response times",
"status": "investigating",
"created_at": "2024-01-15T10:00:00Z"
}],
"affected_components": ["API Server", "Database"]
}</code></pre><h2></h2><h2>Best Practices</h2><ul><li><p><strong>Use Auto-refresh</strong> - Enable auto-refresh for real-time updates (30-60 seconds)</p></li><li><p><strong>Handle Loading States</strong> - Show appropriate loading indicators</p></li><li><p><strong>Display Errors Gracefully</strong> - Show user-friendly error messages</p></li><li><p><strong>Cache Responses</strong> - Consider caching to reduce API calls</p></li><li><p><strong>Use Public Endpoint</strong> - The overview endpoint is public, no API key needed</p></li><li><p><strong>Transform Carefully</strong> - Use the SDK's built-in transformation instead of manual mapping</p></li></ul><h2>Example: Custom Status Widget</h2><pre><code class="language-plaintext">function StatusWidget() {
const { status, isLoading } = useStatus({
slug: 'status',
refreshInterval: 60000 // 1 minute
})
if (isLoading) return null
const isOperational = status.overall_status === 'operational'
const activeIncidents = status.incidents.filter(i => i.status !== 'resolved')
return (
{isOperational ? (
✅ All systems operational
) : (
⚠️ {activeIncidents.length} active incident(s)
)}
)
}</code></pre><p></p>