Status Page with Better Stack

Sabo includes a pre-built status badge widget that displays real-time system status from Better Stack directly in your application’s footer. This provides transparency to users about service availability and ongoing incidents.

Overview

A status page is a dedicated public page that shows the operational status of your services. It’s essential for:

Building trust - Show users you’re transparent about service health
Reducing support tickets - Users check status before contacting support
Professional image - Demonstrates operational maturity
Incident communication - Keep users informed during outages

Sabo’s implementation features:

Real-time status badge embedded in footer
Automatic theme matching (light/dark mode)
Hosted status page at your custom domain (e.g., status.yourdomain.com)
Historical uptime data with visual graphs
Powered by Better Stack - Industry-leading status page provider

Better Stack (formerly Checkly) provides enterprise-grade uptime monitoring and status pages. Their free tier includes everything you need to get started.

Need a deeper tour of Better Stack’s capabilities (monitors, incidents, alerting)? Keep their official Uptime documentation open while you work through this guide.

Quick Start

Create Better Stack account

Visit Better Stack
Create a free account (no credit card required)
You’ll be redirected to the dashboard

Better Stack’s free tier includes 10 monitors and a branded status page - perfect for most projects.

Create your status page

Set up a public status page for your services.

In Better Stack dashboard, go to Status Pages
Click Create Status Page
Configure:
- Name: Your company/product name (e.g., “Acme”)
- Subdomain: Choose a subdomain (e.g., acme → acme.betteruptime.com)
- Custom domain (optional): status.yourdomain.com
Click Create

Custom domains are available on all plans. Set up a CNAME record pointing to Better Stack to use your own domain.

Add monitors

Create monitors for the services you want to track.

Go to Monitors → Add Monitor
Configure your first monitor:
- Monitor Type: HTTP(S)
- URL: Your main site (e.g., https://yourdomain.com)
- Name: “Main Website”
- Check Frequency: Every 1 minute (free tier)
Click Create Monitor

Repeat for other services (e.g., demo site, docs, API):

https://demo.yourdomain.com → “Demo Site”
https://docs.yourdomain.com → “Documentation”
https://api.yourdomain.com → “API”

Each monitor will appear on your status page with real-time status and uptime history.

Get your status badge URL

Copy the embeddable badge URL for your status page.

Go to Status Pages → Your status page
Click Settings → Badge
Copy the badge URL (format: https://your-subdomain.betteruptime.com/badge)

Example:

https://acme.betteruptime.com/badge

You’ll use this URL in the next step to configure Sabo’s status badge widget.

Update status badge URL in Sabo

Configure Sabo to display your status badge.Open src/components/shared/status-badge.tsx and update line 29 with your badge URL:

src/components/shared/status-badge.tsx

return (
  <iframe
    src={`https://your-subdomain.betteruptime.com/badge?theme=${badgeTheme}`}
    width="185"
    height="30"
    frameBorder="0"
    scrolling="no"
    style={{ colorScheme: "none" }}
    title="System Status"
  />
);

Replace your-subdomain with your actual Better Stack subdomain.

Keep the ?theme=${badgeTheme} parameter! This ensures the badge matches your site’s light/dark mode.

Verify integration

Check that the status badge appears in your footer.

Restart your dev server: pnpm dev
Visit http://localhost:3000
Scroll to footer
You should see the status badge next to the theme toggle

Expected appearance:

Light mode: Badge with light background
Dark mode: Badge with dark background
Status text: “All services operational” (or current status)

The badge updates automatically every 60 seconds to reflect current status.

How It Works

Status Badge Component

Sabo’s status badge is implemented in src/components/shared/status-badge.tsx:

src/components/shared/status-badge.tsx

"use client";
"use no memo";

import { useTheme } from "next-themes";
import { useEffect, useState, startTransition } from "react";

export function StatusBadge() {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  // Only render after mounting to avoid hydration mismatch
  useEffect(() => {
    startTransition(() => {
      setMounted(true);
    });
  }, []);

  // Use resolvedTheme which handles system theme automatically
  const badgeTheme = resolvedTheme === "dark" ? "dark" : "light";

  // Return placeholder during SSR and initial render
  if (!mounted) {
    return <div className="h-[30px] w-[185px]" />;
  }

  return (
    <iframe
      src={`https://status.getsabo.com/badge?theme=${badgeTheme}`}
      width="185"
      height="30"
      frameBorder="0"
      scrolling="no"
      style={{ colorScheme: "none" }}
      title="System Status"
    />
  );
}

Key Features

Theme Synchronization

The badge automatically matches your site’s theme using next-themes:

const badgeTheme = resolvedTheme === "dark" ? "dark" : "light";

How it works:

useTheme() hook detects current theme
resolvedTheme returns “dark” or “light” (handles system preference)
Badge URL includes ?theme= parameter
Better Stack serves appropriate badge design

Supported themes:

light - Light background, dark text
dark - Dark background, light text

Hydration Mismatch Prevention

The component uses careful client-side rendering to avoid React hydration errors:

const [mounted, setMounted] = useState(false);

useEffect(() => {
  startTransition(() => {
    setMounted(true);
  });
}, []);

if (!mounted) {
  return <div className="h-[30px] w-[185px]" />;
}

Why this matters:

Server renders a placeholder <div> (same dimensions as badge)
Client renders the actual iframe after hydration
Prevents “Expected server HTML to contain…” errors
Uses startTransition for smoother rendering

This pattern is recommended for all components that depend on next-themes. See Next.js hydration docs.

Footer Integration

The status badge is integrated into Sabo’s footer component:

src/components/shared/footer.tsx

import { StatusBadge } from "@/components/shared/status-badge";

export function Footer() {
  return (
    <footer className="bg-background/95 w-full border-t">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Main footer content... */}
        
        {/* Bottom Bar */}
        <div className="border-t py-6">
          <div className="flex flex-col items-start justify-between gap-6 md:flex-row">
            <p className="text-muted-foreground text-sm">
              © 2025 Acme. All rights reserved.
            </p>
            
            <div className="flex items-center gap-4">
              <StatusBadge />
              <ThemeToggle />
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

Placement rationale:

Bottom-right corner of footer (alongside theme toggle)
Visible on every page
Non-intrusive but accessible
Industry standard location for status indicators

iframe Security

The badge uses an iframe for security and isolation:

<iframe
  src={`https://status.getsabo.com/badge?theme=${badgeTheme}`}
  width="185"
  height="30"
  frameBorder="0"
  scrolling="no"
  style={{ colorScheme: "none" }}
  title="System Status"
/>

Security benefits:

Sandboxed execution: Badge cannot access your site’s cookies or data
CSP friendly: Content Security Policy compatible
No JavaScript required: Pure iframe embed
Automatic updates: Better Stack updates badge without code changes

Accessibility:

title attribute provides screen reader context
Fixed dimensions prevent layout shift
No scrolling (compact design)

Better Stack Setup

Creating Monitors

Monitors check your services at regular intervals and update status automatically.

Website Monitor
API Monitor
Database Monitor

Monitor your main website’s availability.Configuration:

Monitor Type: HTTP(S)
URL: https://yourdomain.com
Name: Main Website
Check Frequency: Every 1 minute
Expected Status Code: 200
Timeout: 30 seconds
Regions: Multi-region (automatic)

What it checks:

HTTP response status code
Response time
SSL certificate validity
DNS resolution

Incident Management

When a monitor detects an issue, Better Stack creates an incident automatically. Incident workflow:

Detection: Monitor fails X consecutive checks (configurable)
Alert: Better Stack sends notifications (email, Slack, PagerDuty, etc.)
Status page: Incident appears on your status page
Resolution: Monitor recovers, incident auto-resolves
Post-mortem: Incident history retained for analysis

Customize incident display:

Go to Status Pages → Settings → Incidents
Configure:
- Which monitors trigger public incidents
- Incident title format
- Automatic status updates
- Resolution messages

Not all monitor failures need to be public. Use “Private monitors” for internal services that shouldn’t appear on your status page.

Custom Domain Setup

Use your own domain for a professional status page.

Add CNAME record

In your DNS provider, add a CNAME record:

Type: CNAME
Name: status
Value: status.betteruptime.com
TTL: 3600 (or Auto)

Example for popular DNS providers:

Cloudflare
Vercel DNS
Namecheap

Dashboard → DNS → Add record
Type: CNAME
Name: status
Target: status.betteruptime.com
Proxy status: DNS only (orange cloud OFF)
Save

Configure in Better Stack

Add your custom domain to Better Stack.

Go to Status Pages → Settings → Domain
Enter: status.yourdomain.com
Click Save
Wait for DNS propagation (up to 24 hours, usually 15 minutes)

Better Stack automatically provisions SSL certificate via Let’s Encrypt.

Update badge URL

Update status-badge.tsx with your custom domain:

src={`https://status.yourdomain.com/badge?theme=${badgeTheme}`}

Customization

Badge Appearance

Better Stack provides several badge designs:

// Default badge (compact)
src={`https://status.yourdomain.com/badge?theme=${badgeTheme}`}

// Large badge (more info)
src={`https://status.yourdomain.com/badge/large?theme=${badgeTheme}`}

// Inline text (no border)
src={`https://status.yourdomain.com/badge/inline?theme=${badgeTheme}`}

Status Page Branding

Customize your status page’s appearance in Better Stack dashboard: Settings → Branding:

Logo: Upload your company logo (PNG, SVG, max 2MB)
Favicon: Custom favicon for status page
Primary color: Brand color (hex code)
Background: Light/dark mode backgrounds
Custom CSS: Advanced styling (paid plans)

Settings → Content:

Header text: Replace “System Status” with your text
Footer links: Add links to main site, support, etc.
About section: Company description
Contact info: Support email, Twitter handle

Match your status page’s branding to your main site for a cohesive experience.

Alternative Placements

The status badge can be placed anywhere in your app:

// In header
import { StatusBadge } from "@/components/shared/status-badge";

export function Header() {
  return (
    <header>
      <nav>...</nav>
      <StatusBadge /> {/* Top-right corner */}
    </header>
  );
}

// In dashboard sidebar
export function Sidebar() {
  return (
    <aside>
      <nav>...</nav>
      <div className="mt-auto">
        <StatusBadge />
      </div>
    </aside>
  );
}

// As a modal/popup
export function StatusModal() {
  return (
    <Dialog>
      <DialogTrigger>
        <StatusBadge />
      </DialogTrigger>
      <DialogContent>
        {/* Full status page iframe */}
        <iframe src="https://status.yourdomain.com" />
      </DialogContent>
    </Dialog>
  );
}

If you reposition the badge (header, footer variants, dashboard sidebar), follow the layout guidance in Footer customization so spacing and responsive behavior stay consistent across breakpoints.

Best Practices

1. Monitor critical user paths

Don’t just monitor your homepage - track the entire user journey.Essential monitors:

Landing page
Sign-up/login page
Dashboard/app
API endpoints
Payment processing
Database connectivity

Example monitor set:

✓ https://yourdomain.com (homepage)
✓ https://yourdomain.com/sign-in (auth)
✓ https://yourdomain.com/dashboard (app)
✓ https://api.yourdomain.com/health (API health)
✓ https://yourdomain.com/api/checkout (payments)

2. Set appropriate check intervals

Balance between monitoring frequency and cost.Recommended intervals:

Critical services (auth, payments): 1 minute
Main website: 3 minutes
Documentation: 5 minutes
Internal tools: 10 minutes

Why not always 1 minute?

Free tier has limited checks per month
More frequent checks = higher costs on paid plans
Not all services need real-time monitoring

Better Stack’s free tier includes 10 monitors checking every 1 minute = 14,400 checks/day.

3. Use meaningful monitor names

Bad:

Monitor 1
Test
Website

Good:

Main Website (getsabo.com)
API - Production
Stripe Webhook Endpoint

Why it matters:

Clear incident messages on status page
Easier alert triage
Better analytics and reporting

4. Configure alert thresholds

Avoid alert fatigue with smart thresholds.Default: Alert after 1 failed check Better: Alert after 3 consecutive failuresWhy?

Prevents false positives (network blips)
Confirms actual outages
Reduces notification noise

Configuration:

Alert Threshold: 3 consecutive failures
Recovery Threshold: 2 consecutive successes
Cooldown Period: 5 minutes

5. Communicate during incidents

Transparency builds trust. Update your status page during outages.Incident update template:

[12:34] Investigating
We're aware of an issue affecting sign-in and investigating the cause.

[12:45] Identified
The issue is caused by a database connection timeout. We're working on a fix.

[13:15] Monitoring
A fix has been deployed. We're monitoring to ensure stability.

[13:30] Resolved
The issue has been fully resolved. All services are operational.

Best practices:

Update every 15-30 minutes during incidents
Be specific about what’s affected
Provide estimated resolution time (if known)
Apologize and explain after resolution

Troubleshooting

Status badge not appearing

Symptoms: Footer shows blank space where badge should be.Causes:

Incorrect badge URL in status-badge.tsx
Better Stack status page not created
Ad blocker blocking iframe
CSP headers blocking iframe

Fix:

Verify URL: Check line 29 in status-badge.tsx has correct subdomain
Check Better Stack: Visit your status page URL directly in browser
Test without ad blocker: Disable uBlock Origin, Privacy Badger, etc.

Check CSP: If using Content Security Policy, allow Better Stack:

next.config.ts

headers: async () => [{
  key: 'Content-Security-Policy',
  value: "frame-src 'self' https://*.betteruptime.com"
}]

Check console: Browser DevTools → Console for iframe errors

Badge shows wrong theme

Symptoms: Badge has light theme in dark mode (or vice versa).Causes:

Missing ?theme=${badgeTheme} parameter
Theme not resolving correctly
Server-side render mismatch

Fix:

Verify parameter: Ensure URL includes ?theme=${badgeTheme}
Check theme hook: resolvedTheme should be “dark” or “light”
Test mounting: Badge should show placeholder until mounted === true
Check next-themes: Ensure ThemeProvider wraps your app in layout.tsx

Debug with console:

const badgeTheme = resolvedTheme === "dark" ? "dark" : "light";
console.log("Theme:", resolvedTheme, "Badge theme:", badgeTheme);

Custom domain not working

Symptoms: status.yourdomain.com shows DNS error.Causes:

CNAME record not created
DNS not propagated
Wrong CNAME target
Cloudflare proxy enabled (should be DNS only)

Fix:

Verify CNAME: Use DNS Checker to verify:

status.yourdomain.com → CNAME → status.betteruptime.com

Wait for propagation: DNS can take up to 24 hours (usually 15 min)
Check target: Must point to status.betteruptime.com exactly
Disable Cloudflare proxy: Orange cloud should be OFF (gray cloud)

Test with dig:

dig status.yourdomain.com CNAME

# Should return:
# status.yourdomain.com. 3600 IN CNAME status.betteruptime.com.

Badge not updating in real-time

Symptoms: Status badge shows old status after incident resolved.Causes:

Browser cache
iframe caching
CDN caching

Fix:

Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
Clear iframe cache: Better Stack badges have 60-second cache
Wait 1-2 minutes: Badge auto-refreshes every 60 seconds
Check Better Stack: Verify status page shows correct status

Badge updates are not instant. Better Stack caches badge images for 60 seconds to reduce load.

Monitors showing false positives

Symptoms: Monitor reports down but service is actually up.Causes:

Too aggressive timeout (< 10 seconds)
Checking from single region
Rate limiting from monitoring checks
SSL certificate issues
Firewall blocking Better Stack IPs

Fix:

Increase timeout: Set to 30 seconds minimum
Multi-region checks: Enable in monitor settings
Whitelist Better Stack: Allow IPs 35.186.224.0/24 and 35.197.128.0/24
Check SSL: Ensure certificate is valid and not expired
Alert threshold: Set to 3 consecutive failures instead of 1
Test manually: Visit URL from different locations (VPN, mobile network)

Going Further

Integrations

Better Stack integrates with popular tools: Alerting:

Slack - Real-time incident notifications
Discord - Status updates in your server
PagerDuty - On-call management
Microsoft Teams - Enterprise communications
Webhooks - Custom integrations

Configuration:

Better Stack → Integrations
Select your tool
Authorize connection
Configure alert rules

Set up Slack notifications for your team to stay informed about incidents immediately.

Advanced Monitoring

Multi-step checks:

Visit login page
Submit credentials
Verify dashboard loads
Check API response

Synthetic monitoring:

Simulate real user interactions
Test complete user flows
Validate complex workflows
Paid plans only

Global checks:

Test from 10+ regions worldwide
Detect regional outages
Optimize CDN performance
Available on all plans

Alternative Solutions

If Better Stack doesn’t fit your needs:

Solution	Pros	Cons	Price
Better Stack	Easy setup, generous free tier	Fewer regions on free plan	Free - $29/mo
Statuspage.io	Atlassian ecosystem, powerful	Expensive, complex	$29 -$ 699/mo
StatusCast	Simple, affordable	Limited features	$19 -$ 99/mo
Instatus	Beautiful design, fast	Newer, smaller team	$0 -$ 49/mo
Self-hosted	Full control, no cost	Maintenance burden, setup time	Free

Sabo’s status badge implementation works with any Better Stack-compatible status page provider. Simply update the iframe URL in status-badge.tsx.

Getting Started.

Customization Guides

UI Components

Core Features

Deployment

API Reference

Status Page with Better Stack

Overview

Quick Start

How It Works

Status Badge Component

Key Features

Better Stack Setup

Creating Monitors

Incident Management

Custom Domain Setup

Customization

Badge Appearance

Status Page Branding

Alternative Placements

Best Practices

Troubleshooting

Going Further

Integrations

Advanced Monitoring

Alternative Solutions

Getting Started.

Customization Guides

UI Components

Core Features

Deployment

API Reference

​Overview

​Quick Start

​How It Works

​Status Badge Component

​Key Features

​Better Stack Setup

​Creating Monitors

​Incident Management

​Custom Domain Setup

​Customization

​Badge Appearance

​Status Page Branding

​Alternative Placements

​Best Practices

​Troubleshooting

​Going Further

​Integrations

​Advanced Monitoring

​Alternative Solutions

Overview

Quick Start

How It Works

Status Badge Component

Key Features

Better Stack Setup

Creating Monitors

Incident Management

Custom Domain Setup

Customization

Badge Appearance

Status Page Branding

Alternative Placements

Best Practices

Troubleshooting

Going Further

Integrations

Advanced Monitoring

Alternative Solutions