Comment automatiser StatusPage API en 2026

Introduction

StatusPage.io est l'outil de référence pour publier l'état de vos services en temps réel, évitant les spams support lors d'incidents. En 2026, avec l'essor des stacks cloud-native, automatiser StatusPage via son API REST devient essentiel pour intégrer le monitoring dans vos pipelines CI/CD, alertes PagerDuty ou observabilité Grafana.

Ce tutoriel intermédiaire vous guide pas à pas pour créer des scripts TypeScript fonctionnels qui listent vos pages, mettent à jour des composants, publient des incidents et poussent des métriques. Imaginez : un déploiement GitHub Actions qui crée automatiquement un incident en cas de downtime. Chaque étape inclut du code complet, copier-collable, avec gestion d'erreurs. À la fin, vous maîtriserez l'API pour scaler vos opérations DevOps. Prêt à transformer vos status pages en systèmes proactifs ? (128 mots)

Prérequis

Compte StatusPage.io actif avec une page existante (créez-en une gratuite sur statuspage.io).
Token API obtenu depuis Account Settings > API > Your pages > API tokens (lecture/écriture).
Node.js 20+ installé.
Connaissances de base en TypeScript et fetch API.
Une page ID (ex: abc123xyz) et token stockés en variables d'environnement (STATUSPAGE_PAGE_ID et STATUSPAGE_TOKEN).

Initialiser le projet Node.js

Créez un répertoire de scripts dédié pour tester l'API. Utilisez npm init pour un setup minimal. Stockez vos secrets dans un .env (installez dotenv). Ce projet servira de base pour tous les scripts suivants, évitant les redondances.

Initialisation du projet

setup.sh

#!/bin/bash
mkdir statuspage-automation
cd statuspage-automation
npm init -y
npm install typescript @types/node dotenv ts-node
npx tsc --init --target es2022 --module commonjs --outDir dist --rootDir src
mkdir src
echo "STATUSPAGE_PAGE_ID=your_page_id_here
STATUSPAGE_TOKEN=your_token_here" > .env
mkdir dist

Ce script bash initialise un projet TypeScript prêt à l'emploi avec dotenv pour les secrets. Il configure tsconfig.json pour ES2022 et CommonJS, compatible Node 20+. Lancez-le pour un setup en 30 secondes ; adaptez les paths si besoin.

Lister les composants d'une page

Commencez par valider votre accès API en listant les composants de votre page. L'endpoint /pages/{page_id}/components.json retourne tous les services trackés. Cela confirme votre token et identifie les IDs pour les mises à jour ultérieures.

Script de liste des composants

src/list-components.ts

import 'dotenv/config';
import fetch from 'node-fetch';

const PAGE_ID = process.env.STATUSPAGE_PAGE_ID!;
const TOKEN = process.env.STATUSPAGE_TOKEN!;
const BASE_URL = 'https://api.statuspage.io/v1';

async function listComponents() {
  try {
    const response = await fetch(`${BASE_URL}/pages/${PAGE_ID}/components.json`, {
      headers: {
        'Authorization': `OAuth ${TOKEN}`,
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
    if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`);
    const data = await response.json();
    console.log('Composants:', data);
  } catch (error) {
    console.error('Erreur:', error);
  }
}

listComponents();

Ce script fetch l'API avec authentification OAuth et headers obligatoires. Il gère les erreurs HTTP basiques et logue la réponse JSON. Exécutez avec npx ts-node src/list-components.ts après remplissage .env ; remplacez PAGE_ID par le vôtre pour voir vos composants.

Mettre à jour le statut d'un composant

Les composants représentent vos services (API, DB, etc.). Mettez-les à 'major_outage' lors d'alertes pour notifier instantanément. Utilisez PUT sur /components/{component_id}. Identifiez l'ID depuis le script précédent.

Mise à jour d'un composant

src/update-component.ts

import 'dotenv/config';
import fetch from 'node-fetch';

const PAGE_ID = process.env.STATUSPAGE_PAGE_ID!;
const TOKEN = process.env.STATUSPAGE_TOKEN!;
const BASE_URL = 'https://api.statuspage.io/v1';
const COMPONENT_ID = 'your_component_id_here'; // Remplacez par ID réel

const status = 'major_outage'; // Options: operational, minor, major_outage, under_maintenance

async function updateComponent() {
  try {
    const response = await fetch(`${BASE_URL}/pages/${PAGE_ID}/components/${COMPONENT_ID}.json`, {
      method: 'PUT',
      headers: {
        'Authorization': `OAuth ${TOKEN}`,
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ component: { status } })
    });
    if (!response.ok) throw new Error(`Erreur: ${response.status}`);
    const data = await response.json();
    console.log('Composant mis à jour:', data);
  } catch (error) {
    console.error('Erreur:', error);
  }
}

updateComponent();

Ce code envoie un PUT avec payload JSON pour changer le status. Les valeurs valides sont listées en commentaire. Testez en prod prudemment ; cela triggera les abonnés RSS/email/Slack. Ajoutez des checks préalables en prod.

Publier un incident

Les incidents sont des événements temporaires avec updates. Créez-en un pour downtime planifiés ou imprévus via POST /incidents.json. Ajoutez des 'wants_twitter', 'wants_email' pour canaux.

Création d'un incident

src/create-incident.ts

import 'dotenv/config';
import fetch from 'node-fetch';

const PAGE_ID = process.env.STATUSPAGE_PAGE_ID!;
const TOKEN = process.env.STATUSPAGE_TOKEN!;
const BASE_URL = 'https://api.statuspage.io/v1';

async function createIncident() {
  try {
    const response = await fetch(`${BASE_URL}/pages/${PAGE_ID}/incidents.json`, {
      method: 'POST',
      headers: {
        'Authorization': `OAuth ${TOKEN}`,
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        incident: {
          name: 'Déploiement API v2.1',
          status: 'investigating',
          message: 'Déploiement en cours, impacts mineurs possibles.',
          wants_twitter: false,
          wants_email: true,
          wants_sms: false,
          wants_webhooks: true,
          wants_stickies: false
        }
      })
    });
    if (!response.ok) throw new Error(`Erreur: ${response.status}`);
    const data = await response.json();
    console.log('Incident créé:', data.id);
  } catch (error) {
    console.error('Erreur:', error);
  }
}

createIncident();

Payload complet pour un incident investigating. Personnalisez name/message/status (investigating, identified, watching, resolved). Cela active les notifications configurées. L'ID retourné sert pour updates futurs.

Pousser des métriques personnalisées

StatusPage supporte les graphs via métriques. Configurez-en une en UI (Graph Settings), puis pushez des points de données via POST /pages/{page_id}/metrics/{metric_id}/data_points.json. Idéal pour latency UptimeRobot.

Push d'une métrique

src/push-metric.ts

import 'dotenv/config';
import fetch from 'node-fetch';

const PAGE_ID = process.env.STATUSPAGE_PAGE_ID!;
const TOKEN = process.env.STATUSPAGE_TOKEN!;
const BASE_URL = 'https://api.statuspage.io/v1';
const METRIC_ID = 'your_metric_id_here'; // Créez en UI d'abord
time = new Date().toISOString();
value = 150.5; // Ex: timestamp, latency ms

async function pushMetric() {
  try {
    const response = await fetch(`${BASE_URL}/pages/${PAGE_ID}/metrics/${METRIC_ID}/data_points.json`, {
      method: 'POST',
      headers: {
        'Authorization': `OAuth ${TOKEN}`,
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify([
        {
          timestamp: timestamp,
          value: value
        }
      ])
    });
    if (!response.ok) throw new Error(`Erreur: ${response.status}`);
    console.log('Métrique poussée avec succès');
  } catch (error) {
    console.error('Erreur:', error);
  }
}

pushMetric();

Array de points pour batching efficace. Timestamp ISO8601, value numérique. Créez la métrique en UI avant (ex: 'API Latency'). Parfait pour cron jobs ou webhooks observability.

Recevoir les webhooks StatusPage

Configurez des webhooks en UI pour recevoir updates (incident created/resolved). Voici un endpoint Express basique pour logger/valider. Intégrez à Slack ou DB.

Serveur webhook Express

src/webhook-server.ts

import express from 'express';
import 'dotenv/config';

const app = express();
app.use(express.json());

app.post('/statuspage-webhook', (req, res) => {
  console.log('Webhook reçu:', JSON.stringify(req.body, null, 2));
  const event = req.body.event || 'unknown';
  if (event === 'incident_created') {
    console.log('Nouvel incident:', req.body.data);
    // Intégrez PagerDuty/Slack ici
  }
  res.status(200).json({ status: 'received' });
});

const PORT = 3000;
app.listen(PORT, () => console.log(`Webhook listener on port ${PORT}`));

Serveur minimal Express pour /statuspage-webhook. Logue payloads et filtre events. Ajoutez npm i express @types/express ; lancez avec npx ts-node. Sécurisez avec HMAC en prod.

Bonnes pratiques

Utilisez des variables d'environnement pour tokens : jamais hardcoded, intégrez à GitHub Secrets pour CI/CD.
Rate limiting : API limitée à 300 req/min ; ajoutez delays ou queues pour bursts.
Idempotence : Vérifiez status existant avant updates pour éviter loops.
Logging structuré : Utilisez Winston ou console.table pour tracer API calls.
Tests unitaires : Mock fetch avec MSW pour valider payloads sans appels réels.

Erreurs courantes à éviter

Oubli du header X-Requested-With : Retourne 401 Unauthorized ; toujours inclus.
Token scopes insuffisants : Créez un token 'read+write' par page, pas global si sensible.
Timestamps malformés pour métriques : Utilisez ISO8601 strict, UTC.
Pas de gestion async/await : Toujours try/catch pour fetch promises.

Pour aller plus loin

Docs officielles : API StatusPage.
Intégrez avec Terraform : Provider statuspage pour IaC.
Alternatives self-hosted : Cachet ou Upptime (GitHub).
Découvrez nos formations DevOps Learni pour maîtriser monitoring avancé avec Prometheus/Grafana.

Comment automatiser StatusPage avec son API en 2026