Hiển thị uptime HetrixTools dưới dạng ảnh tự động cập nhật

Bài này viết để nhớ các thao tác, không thì 1 thời gian sau sẽ quên 😀 Giả định ban đang dùng Hetrixtools để monitor uptime/download trang domain, vấn đề là đôi khi bạn phải vào trang monitor riêng để nhìn, tôi lúc nó hơi mất công, có thể tạo nó thành 1 cái ảnh kiểu

Chèn vào bài viết/website cho tiện theo dõi, thay vì phải vào trang monitor riêng

Các bước chính:

1. Lấy API Key HetrixTools (quyền v1 Uptime Report).
2. Lấy UPTIME_REPORT_ID của domain trong mục Status Pages.
3. Tạo GitHub repository (private) và thêm file _worker.js:
4. Deploy lên Cloudflare Pages từ GitHub repo.
5. Sử dụng ảnh uptime qua URL dạng:
   https://xxxxx.pages.dev/uptime

Mỗi lần load ảnh, uptime được cập nhật tự động (cache trong 5 phút nhằm tránh hết API)

API Keys

• Vào API Keys – HetrixTools lấy 1 API tùy ý, đặt quyền Configure API là v1 Uptime Report cho an toàn (quyền này chỉ cho phép xem report, có bị lộ API cũng không lo)

Thường nó sẽ có định dạng 89b67210f310861f5c14dcbd90adc208

UPTIME_REPORT_ID

• Vào Status Pages

Click thẳng vào domain cần xem monitor, sẽ thấy UPTIME_REPORT_ID dạng 8d4fc251f8dfd419c2fabb877d250e01

Github Repository

• Tạo 1 Github Repository mới, set private
• Tạo 1 file _worker.js nội dung như sau

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    
    if (url.pathname === '/uptime') {
      return handleUptimeBadge(request, ctx);
    }
    
    return new Response('Not Found', { status: 404 });
  }
};

async function handleUptimeBadge(request, ctx) {
  try {
    const cache = caches.default;
    let response = await cache.match(request);
    
    if (response) {
      return response;
    }
    
    // Gọi HetrixTools API
    const apiResponse = await fetch(
      'https://api.hetrixtools.com/v1/89b67210f310861f5c14dcbd90adc208/uptime/report/8d4fc251f8dfd419c2fabb877d250e01/',
      { signal: AbortSignal.timeout(5000) }
    );
    
    if (!apiResponse.ok) {
      throw new Error('API request failed');
    }
    
    const data = await apiResponse.json();
    const uptimeRaw = data?.Uptime_Stats?.Total?.Uptime || '100';
    const val = parseFloat(uptimeRaw);
    const uptime = (val === 100) ? '100%' : val + '%';
    
    // Màu
    const color = val >= 99 ? 'brightgreen' : val >= 95 ? 'yellow' : 'red';
    
    // PNG - format: label-message-color
    const badgeUrl = `https://raster.shields.io/badge/dns.bibica.net-${encodeURIComponent(uptime)}-${color}.png`;
    const badgeResponse = await fetch(badgeUrl);
    const imageData = await badgeResponse.arrayBuffer();
    
    response = new Response(imageData, {
      headers: {
        'Content-Type': 'image/png',
        'Cache-Control': 'public, max-age=300',
        'Access-Control-Allow-Origin': '*'
      }
    });
    
    ctx.waitUntil(cache.put(request, response.clone()));
    return response;
    
  } catch (error) {
    const fallbackUrl = 'https://raster.shields.io/badge/DNS%20Uptime-Error-red.png';
    const fallbackResponse = await fetch(fallbackUrl);
    const fallbackData = await fallbackResponse.arrayBuffer();
    
    return new Response(fallbackData, {
      headers: { 
        'Content-Type': 'image/png',
        'Access-Control-Allow-Origin': '*'
      }
    });
  }
}

Ở dòng 24, thay API Keys và UPTIME_REPORT_ID của bạn vào

Cloudflare Pages

• Vào Cloudflare Workers & Pages, importing Git repository này vào Pages
• Đường dẫn ảnh tạo ra sẽ là https://xxxxx.pages.dev/uptime (thêm /uptime ở sau)

Tổng thể ngắn gọn đơn giản thế , thích tùy chỉnh thêm gì thì sửa _worker.js lại tùy ý