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.

Overview Endpoint

Fetch a complete status page overview including overall status, services, and incidents.

Endpoint

GET /api/v1/status-pages/public/{project_id}/{slug}/overview

Parameters

• project_id (Required) - Your project ID

• slug (Required) - Status page slug (default: 'status')

Response

{
  "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
}

Using the React SDK

The React SDK provides a convenient hook for fetching status data:

useStatus Hook

import { useStatus } from '@appgram/react'

function MyComponent() {
  const { status, overview, isLoading, error, refetch } = useStatus({
    slug: 'status',
    enabled: true,
    refreshInterval: 30000
  })

  if (isLoading) return 

Loading...


if (error) return

Error: {error}



return

{status.overall_status}


{/* Display components, incidents, etc. */}



}

useStatus Options

• slug (Optional) - Status page slug. Default: 'status'

• enabled (Optional) - Enable/disable fetching. Default: true

• refreshInterval (Optional) - Auto-refresh in milliseconds. Default: 30000 (30 seconds). Set to 0 to disable.

useStatus Result

• status - Transformed status data ready for StatusBoard component

• overview - Raw API overview response

• isLoading - Loading state boolean

• error - Error message string or null

• refetch - Function to manually refresh data

Using the Client API Directly

You can also use the client API directly:

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)
  }
}

Status Type Mappings

The API uses detailed status types that map to simplified component statuses:

Data Transformation

The React SDK transforms API data for use with StatusBoard component:

Services to Components

// 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"
}

Status Updates to Incidents

// 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"]
}

Best Practices

• Use Auto-refresh - Enable auto-refresh for real-time updates (30-60 seconds)

• Handle Loading States - Show appropriate loading indicators

• Display Errors Gracefully - Show user-friendly error messages

• Cache Responses - Consider caching to reduce API calls

• Use Public Endpoint - The overview endpoint is public, no API key needed

• Transform Carefully - Use the SDK's built-in transformation instead of manual mapping

Example: Custom Status Widget

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)
)}
)
}