Monitoring API usage

​

The Analytics dashboard

• Users - Number of users in your account
• Pages - Total pages created
• Blog Posts - Total blog posts created
• Collections - Total collections created
• Read API Requests - API calls fetching content
• Write API Requests - API calls creating, updating, or deleting content
• Assets - Files in your Media Library

• Line, Area, and Bar chart views
• Running Total toggle for cumulative trends

​

Accessing the Analytics dashboard

1. Log in to ButterCMS
2. Select Analytics on the navigation menu
3. The charts and filters appear immediately

​

Understanding your usage metrics

​

Read API requests

• GET /v2/posts/ - Listing blog posts
• GET /v2/pages/{page_type}/{slug}/ - Retrieving pages
• GET /v2/content/ - Fetching collections
• GET /v2/authors/ - Listing authors
• GET /v2/categories/ - Listing categories

​

Write API requests

• POST /v2/pages/ - Creating pages
• PUT/PATCH /v2/pages/{page_type}/{slug}/ - Updating pages
• POST /v2/posts/ - Creating blog posts
• POST /v2/content/ - Creating collection items (pass the collection key as a key field in the request body)

​

Why monitoring matters

• Stay within plan limits tied to your subscription
• Monitor API usage to prevent overages
• Maintain content hygiene across environments

​

Filtering and customizing your view

• Site - On multisite accounts, pick one site; All Sites is available when cross-site analytics is enabled for your account
• Environment - One environment of the selected site, or All Environments
• Date Range:
  • Month to Date
  • Previous Month
  • Last 12 Months
  • Custom Range
• Aggregation - Daily, Weekly, Monthly, or Yearly

​

Exporting your data

​

Who benefits from Analytics?

​

For developers and technical leads

​

For marketers and content teams

​

For partners and agencies

​

Interpreting usage patterns

​

Identifying normal vs. abnormal usage

​

Common usage patterns by integration type

• Bursts during build time
• Low usage between builds
• Spikes when webhooks trigger rebuilds

• More consistent usage throughout day
• Correlates with website traffic
• Should leverage caching to reduce calls

• Usage correlates directly with page views
• Each visitor may make API calls
• Consider edge caching or BFF pattern

​

Setting up usage alerts

​

Application-level monitoring

// Track API calls in your application
const apiCallCounter = {
  read: 0,
  write: 0,
  lastReset: Date.now()
};

// Wrapper function that tracks calls
async function trackedApiCall(type, fn) {
  apiCallCounter[type]++;

  // Log warning if approaching limits
  if (apiCallCounter.read > 90000) { // 90% of 100K limit (Basic plan example)
    console.warn('Approaching Read API limit!');
    // Send alert to your monitoring system
  }

  return fn();
}

// Usage
const posts = await trackedApiCall('read', () =>
  butter.post.list({ page_size: 10 })
);

​

Integration with monitoring tools

• Datadog - Custom metrics and dashboards
• New Relic - Application performance monitoring
• Grafana - Visualization of usage trends
• PagerDuty - Alerting when thresholds are exceeded

// Example: Send metrics to Datadog
const { StatsD } = require('hot-shots');
const dogstatsd = new StatsD();

function trackApiUsage(type, count) {
  dogstatsd.gauge(`buttercms.api.${type}_requests`, count, {
    environment: process.env.NODE_ENV
  });
}

​

Optimizing based on usage data

​

High Read API usage

1. Implement caching at the application level
2. Use SSG instead of SSR where possible
3. Leverage webhooks to invalidate cache instead of polling
4. Optimize queries with exclude_body and levels parameters

​

High Write API usage

1. Batch content updates when possible
2. Review automation scripts for unnecessary writes
3. Audit webhook integrations that create content
4. Consider using bulk operations for migrations

​

Usage optimization checklist

​

Environment-specific usage

​

Managing multi-environment usage

​

Development environment tips

• Use local caching to minimize API calls during development
• Consider mock data for UI development
• Only fetch from API when testing integration

// Development-only caching
const isDev = process.env.NODE_ENV === 'development';

async function getContent(slug) {
  if (isDev && cache.has(slug)) {
    return cache.get(slug); // Return cached during dev
  }

  const content = await butter.page.retrieve('*', slug);

  if (isDev) {
    cache.set(slug, content); // Cache indefinitely in dev
  }

  return content;
}