Pages Analytics, Logs & Observability

In this tutorial, you'll learn about Pages Analytics, Logs & Observability. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

This tutorial explains how to monitor Cloudflare Pages sites using built-in analytics, real-time logs, and third-party Observability tools. Understanding your traffic patterns helps you optimize performance and detect issues before they affect users. The DodaTech documentation site uses Pages Analytics to track popular tutorials and Web Analytics to measure real user metrics without slowing down the page.

Pages Analytics Dashboard

Cloudflare Pages provides a built-in analytics dashboard showing request counts, bandwidth usage, and status code distributions. The data updates within minutes and covers all edge locations.

flowchart LR
  A[Visitor request] --> B[Edge CDN]
  B --> C[Pages Analytics]
  B --> D[Web Analytics]
  C --> E[Request volume]
  C --> F[Status codes]
  C --> G[Bandwidth]
  D --> H[Core Web Vitals]
  D --> I[Session data]
  style C fill:#f90,color:#fff
  style D fill:#f90,color:#fff

Web Analytics

Cloudflare Web Analytics tracks real user metrics like Largest Contentful Paint and First Input Delay without any JavaScript, so your page performance is not affected.

// Fetch Web Analytics data via the Cloudflare API
async function getAnalytics(apiToken, zoneId) {
  const response = await fetch(
    'https://api.cloudflare.com/client/v4/zones/' + zoneId + '/analytics/dashboard',
    {
      headers: { 'Authorization': 'Bearer ' + apiToken }
    }
  );
  const data = await response.json();
  console.log('Page views today:', data.result.totals.pageViews);
  console.log('Unique visitors:', data.result.totals.uniques);
}
getAnalytics('YOUR_TOKEN', 'YOUR_ZONE_ID');
// Expected output:
// Page views today: 12543
// Unique visitors: 3452

Real-Time Logs

Pages Functions support console.log output visible in the Cloudflare dashboard under the Functions tab. You can also stream logs to external services.

Serverless function logs help you debug runtime behavior and track error rates.

// functions/api/log-example.js
export async function onRequest(context) {
  const startTime = Date.now();
  const url = new URL(context.request.url);

  console.log('Request started:', context.request.method, url.pathname);

  try {
    const response = await context.env.DB.prepare(
      'SELECT count(*) as count FROM page_visits WHERE path = ?'
    ).bind(url.pathname).first();

    const duration = Date.now() - startTime;
    console.log('Request completed:', url.pathname, duration + 'ms');

    return new Response(JSON.stringify({ visits: response.count }), {
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (error) {
    console.error('Request failed:', url.pathname, error.message);
    return new Response('Internal error', { status: 500 });
  }
}
// Log output:
// Request started: GET /api/log-example
// Request completed: /api/log-example 23ms

Structured Logging

For production Observability, implement structured logging with JSON output that can be ingested by log management platforms.

// functions/utils/logger.js
export function createLogger(request) {
  const baseFields = {
    timestamp: new Date().toISOString(),
    requestId: crypto.randomUUID(),
    method: request.method,
    path: new URL(request.url).pathname
  };

  return {
    info: function(message, extra) {
      console.log(JSON.stringify({ level: 'info', message: message, ...baseFields, ...extra }));
    },
    error: function(message, extra) {
      console.error(JSON.stringify({ level: 'error', message: message, ...baseFields, ...extra }));
    },
    warn: function(message, extra) {
      console.warn(JSON.stringify({ level: 'warn', message: message, ...baseFields, ...extra }));
    }
  };
}

// Usage inside a function handler
// logger.info('Processing order', { orderId: 123, amount: 49.99 });
// Output: {"level":"info","message":"Processing order","method":"POST","path":"/api/orders","orderId":123,"amount":49.99}

FAQ

{{< faq "How long does Cloudflare retain Pages Analytics data?">}} Analytics data is retained for the duration of your billing period. Free plans retain data for 30 days. Paid plans retain data for up to 90 days with longer retention available on Enterprise plans. {{< /faq >}}

Practice Questions

1. What Cloudflare API endpoint returns analytics dashboard data?
2. Which method on the console object should you use for error logging in production?
3. What unique identifier should you include in structured logs to correlate requests?

Summary

Cloudflare Pages provides built-in analytics for traffic monitoring and Web Analytics for real user metrics without JavaScript overhead. Use console.log for basic debugging and structured JSON logging for production Observability. Export logs to external services via the Cloudflare API or Logpush for deeper analysis.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro — security-first tools for the modern web.