How to Monitor Your Sanity.io Studio and APIs with Vigilmon

Sanity.io is one of the most flexible headless CMS platforms—but when your Sanity-powered site goes down, your content disappears from the web. Whether you're using Sanity's Content Lake API, GROQ queries, or Sanity Studio, external monitoring keeps you informed before users notice problems.

This guide covers how to monitor your Sanity.io-backed application with Vigilmon.

Understanding Sanity's Architecture

Sanity has several components that can fail independently:

1. Content Lake (Sanity API): The API at api.sanity.io that serves your content via GROQ
2. Sanity Studio: Your editorial UI hosted at your-project.sanity.studio or a custom domain
3. CDN: Sanity's content delivery at cdn.sanity.io
4. Your frontend: Next.js, Remix, SvelteKit, or other framework consuming the API
5. Webhooks: Deploy hooks that trigger your static builds

What to Monitor in a Sanity Stack

Monitor 1: Your Frontend Site

The most user-critical thing is your actual website:

https://yoursite.com              # Homepage
https://yoursite.com/blog         # Content index (CMS-driven)

Monitor 2: Sanity Content API

For public content (no auth required), you can query Sanity's API directly:

https://your-project-id.api.sanity.io/v2021-10-21/data/query/production?query=count(*[_type=="post"])

This returns the count of posts—lightweight but verifies the API is responding.

Monitor 3: Your API Route / Health Endpoint

Add a health endpoint to your frontend that verifies Sanity connectivity:

// Next.js - app/api/health/route.js
import { createClient } from 'next-sanity';

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: '2024-01-01',
  useCdn: false,
});

export async function GET() {
  try {
    const start = Date.now();
    const count = await client.fetch('count(*[_type == "post"])');
    const latency = Date.now() - start;

    return Response.json({
      status: 'healthy',
      sanity: 'connected',
      contentCount: count,
      latencyMs: latency,
      timestamp: new Date().toISOString(),
    });
  } catch (error) {
    return Response.json(
      { status: 'unhealthy', error: error.message },
      { status: 503 }
    );
  }
}

Monitor 4: Sanity Studio (if self-hosted)

If you're hosting Sanity Studio yourself (not using sanity.studio), monitor it too:

https://cms.yoursite.com          # Studio login page

Check for status 200 and a keyword like "Sanity" or your project name.

Setting Up Vigilmon for Sanity

1. Sign up at vigilmon.online — free, no credit card
2. Create monitors for each component:

Monitor 1: Your Website

Name: Main Site - Homepage
URL: https://yoursite.com
Method: GET
Expected status: 200
Keyword: "YourSiteName"
Interval: 1 minute

Monitor 2: Health Check Endpoint

Name: API Health Check
URL: https://yoursite.com/api/health
Method: GET
Expected status: 200
Keyword: "healthy"
Interval: 1 minute

Monitor 3: Blog/Content (CMS-driven)

Name: Blog Index
URL: https://yoursite.com/blog
Method: GET
Expected status: 200
Keyword: "Blog"
Interval: 5 minutes

1. Set up alerts: Email + Slack

Monitoring GROQ API Performance

GROQ is Sanity's query language. Complex queries can be slow. Add response time monitoring:

// Health check with GROQ performance metric
export async function GET() {
  const queries = [
    { name: 'posts', groq: '*[_type == "post"][0...5]' },
    { name: 'pages', groq: '*[_type == "page"][0...10]' },
  ];

  const results = {};

  for (const { name, groq } of queries) {
    const start = Date.now();
    try {
      await client.fetch(groq);
      results[name] = { ok: true, ms: Date.now() - start };
    } catch (e) {
      results[name] = { ok: false, error: e.message };
    }
  }

  const allOk = Object.values(results).every(r => r.ok);
  const maxLatency = Math.max(...Object.values(results).map(r => r.ms || 0));

  return Response.json({
    status: allOk ? 'healthy' : 'degraded',
    maxQueryLatencyMs: maxLatency,
    queries: results,
  }, { status: allOk ? 200 : 207 });
}

Sanity Webhooks Monitoring

Sanity webhooks trigger your build pipeline when editors publish content. Silent webhook failures mean your site goes stale.

To monitor webhooks, create a webhook endpoint that tracks receipt:

// pages/api/sanity-webhook.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    // Log webhook receipt to your database
    await db.webhookLog.create({
      data: {
        receivedAt: new Date(),
        payload: JSON.stringify(req.body).substring(0, 1000),
      }
    });
    res.status(200).json({ received: true });
  } else {
    // Health check - is this endpoint reachable?
    res.status(200).json({ status: 'webhook endpoint active' });
  }
}

Then monitor the webhook endpoint with Vigilmon:

URL: https://yoursite.com/api/sanity-webhook
Method: GET
Expected status: 200
Keyword: "webhook endpoint active"

Alert Configuration for Sanity-Powered Sites

For a content-heavy site powered by Sanity:

Scenario	Impact	Alert Priority
Frontend 500 error	Users see errors	Critical
Sanity API down	Content not loading	Critical
GROQ query slow (>2s)	Slow page loads	Warning
Studio unreachable	Editors can't publish	High
Webhook failures	Stale content	Medium

Recommended Monitor Setup for Sanity

For a marketing site or blog:

5 monitors (free tier covers this):
1. Homepage: https://yoursite.com → keyword check
2. Blog: https://yoursite.com/blog → keyword check
3. Health: https://yoursite.com/api/health → JSON "healthy"
4. Studio: https://cms.yoursite.com → keyword "Sanity"
5. Critical landing page: https://yoursite.com/pricing → keyword check

Get Started Free

Vigilmon offers free uptime monitoring with:

• 5 monitors on free tier
• 1-minute check intervals
• Multi-region monitoring
• Email + Slack alerts
• SSL certificate monitoring
• Public status page

No credit card, no setup complexity. Monitor your Sanity.io application in 5 minutes.