<p>Status Pages provide a public-facing view of your system's operational health. They allow you to communicate service status, incidents, and maintenance to your users in real-time.</p><h2>What is a Status Page?</h2><p>A Status Page displays:</p><ul><li><p><strong>Overall System Status</strong> - A high-level view of whether all systems are operational</p></li><li><p><strong>Service Components</strong> - Individual services and their current health status</p></li><li><p><strong>Active Incidents</strong> - Current issues being investigated or resolved</p></li><li><p><strong>Incident History</strong> - Past incidents and their resolutions</p></li></ul><h2>Key Features</h2><ul><li><p><strong>Real-time Updates</strong> - Auto-refresh status (default 30 seconds)</p></li><li><p><strong>Service Grouping</strong> - Organize services into logical groups</p></li><li><p><strong>Incident Timeline</strong> - Track progress of incident resolution with updates</p></li><li><p><strong>Affected Services</strong> - Show which services are impacted by each incident</p></li><li><p><strong>Public Access</strong> - Share your status page with users via URL</p></li></ul><h2>Setting Up Your Status Page</h2><ol><li><p>Create a Status Page in your AppGram project dashboard</p></li><li><p>Add services to monitor (API, database, web servers, etc.)</p></li><li><p>Configure service groups for better organization</p></li><li><p>Set up status updates for incidents and maintenance</p></li><li><p>Publish your status page using the provided slug</p></li></ol><h2>Accessing Your Status Page</h2><p>Your status page is accessible via the public endpoint at:</p><p><code>/p/{org-name}/{project}/status</code></p><h2>Integrating with Your Application</h2><p>You can integrate status pages into your application using the React SDK:</p><pre><code class="language-plaintext">import { useStatus, StatusBoard } from '@appgram/react'
function StatusPage() {
const { status, isLoading, error } = useStatus({
slug: 'status'
})
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 (<br> <br> )<br>}</code></p>