Prometheus

Before writing a single line in FlutterFlow, you need to address the most critical issue with Prometheus: by default, it runs on port 9090 with no authentication. Pointing your FlutterFlow API Call directly at `http://your-server:9090` would expose your entire metrics database to anyone who reverse-engineers your app. The correct approach is to deploy a Firebase Cloud Function that acts as a proxy. The Cloud Function sits between your FlutterFlow app and Prometheus, and it can enforce its own authentication (Firebase App Check, a shared secret in a request header, or simply being a private function only called from within your Firebase project). Here is a minimal Firebase Cloud Function proxy that accepts a PromQL query parameter from your FlutterFlow API Call, forwards it to the Prometheus Query API, and returns the result: Deploy this Cloud Function to your Firebase project. The Prometheus URL is configured inside the function — it never appears in your FlutterFlow app. If your Prometheus server sits behind a reverse proxy with Basic Auth, add the Authorization header in the Cloud Function, not in FlutterFlow. Alternatively, if you already have a reverse proxy (nginx, Traefik, Caddy) in front of Prometheus with HTTPS and Basic Auth, you can point FlutterFlow's API Group directly at the proxy URL and store the Base64-encoded Basic Auth credentials in FlutterFlow's API Group headers. This is simpler but less secure than the Cloud Function approach because the credentials still ship in your app binary.

1// Firebase Cloud Function: Prometheus query proxy
2// functions/index.js
3const functions = require('firebase-functions');
4const https = require('https');
5const http = require('http');
6
7// Set PROMETHEUS_URL in Firebase environment config
8// firebase functions:config:set prometheus.url="http://your-prometheus:9090"
9const PROMETHEUS_URL = process.env.PROMETHEUS_URL || 'http://localhost:9090';
10
11exports.prometheusQuery = functions.https.onRequest(async (req, res) => {
12  res.set('Access-Control-Allow-Origin', '*');
13  if (req.method === 'OPTIONS') {
14    res.set('Access-Control-Allow-Methods', 'GET, POST');
15    res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
16    return res.status(204).send('');
17  }
18
19  const query = req.query.query;
20  const time = req.query.time || Math.floor(Date.now() / 1000);
21
22  if (!query) {
23    return res.status(400).json({ error: 'Missing query parameter' });
24  }
25
26  const targetUrl = `${PROMETHEUS_URL}/api/v1/query?query=${encodeURIComponent(query)}&time=${time}`;
27  const protocol = targetUrl.startsWith('https') ? https : http;
28
29  protocol.get(targetUrl, (promRes) => {
30    let data = '';
31    promRes.on('data', chunk => data += chunk);
32    promRes.on('end', () => {
33      try {
34        const parsed = JSON.parse(data);
35        return res.json(parsed);
36      } catch (e) {
37        return res.status(502).json({ error: 'Invalid response from Prometheus' });
38      }
39    });
40  }).on('error', (err) => {
41    console.error('Prometheus proxy error:', err);
42    return res.status(502).json({ error: err.message });
43  });
44});

With your Cloud Function proxy deployed and tested, you can now set up the FlutterFlow side of the integration. Click 'API Calls' in the left navigation panel (the plug icon), then click '+ Add' and select 'Create API Group'. Give it a name like 'PrometheusProxy', set the Base URL to your deployed Cloud Function URL (for example, `https://us-central1-your-project.cloudfunctions.net`), and leave the authentication type as 'No Auth' since your Cloud Function handles security internally. Next, click '+ Add API Call' within the new group. Name it 'QueryInstant'. Set the method to GET and the endpoint path to `/prometheusQuery` (matching your function name). In the Variables tab, add a variable named `query` of type String — this is where your PromQL expression will go. In the URL tab, add it as a query parameter: `?query={{query}}`. In the Response & Test tab, paste a sample Prometheus API response. A typical instant query response looks like the JSON below. Click 'Test API Call', enter a test PromQL expression in the query field (for example, `up` to see which targets are up), and confirm you get back a result. Then click 'Generate JSON Paths' to automatically extract paths like `$.data.result[0].value[1]` (the metric value as a string) and `$.data.result[0].metric.instance` (the target label). Name these paths clearly — for example, 'metricValue' and 'instanceLabel' — so you can bind them to widget properties. Important: Prometheus returns metric values as strings inside JSON arrays — the format is `[unix_timestamp, "string_value"]`. You will need to convert the string to a number before displaying it in a numeric widget or chart. Use a FlutterFlow Custom Function (left nav → Custom Code → + Add → Function) to parse the string to a double.

1// Sample Prometheus instant query API response
2// GET /api/v1/query?query=http_requests_total
3{
4  "status": "success",
5  "data": {
6    "resultType": "vector",
7    "result": [
8      {
9        "metric": {
10          "__name__": "http_requests_total",
11          "instance": "localhost:8080",
12          "job": "api-server",
13          "method": "GET",
14          "status": "200"
15        },
16        "value": [
17          1704067200,
18          "1234.0"
19        ]
20      }
21    ]
22  }
23}

Prometheus metric values arrive as strings inside JSON arrays (the format `[unix_timestamp, "string_value"]`), which means you cannot directly bind them to a number widget or a chart data series without type conversion. If you try to bind the raw string path to a Chart widget, it will show NaN or fail to render. Create a Custom Function to handle the conversion. Go to left nav → Custom Code → + Add → Function. Name it 'parseMetricValue'. Set the return type to Double and add one argument named 'rawValue' of type String. Paste the Dart function body that parses the string to a double (see code block). Save it — FlutterFlow will compile it into your project. Now bind your API Call data to widgets. Select a Text widget on your screen and set its value to the API response variable. In the data binding popup, choose the API Call response → select the JSON path for the value field → apply the 'parseMetricValue' custom function transformation. The widget will now display a proper number. For time-series data (using `/api/v1/query_range` instead of `/api/v1/query`), the response contains an array of `[timestamp, value]` pairs. You'll need to map these into a list of FlutterFlow chart data points. This is more complex and typically requires a Custom Action that transforms the API response array into the format expected by the FlutterFlow Chart widget or a custom charting package. For simple use cases — showing a single current metric value in a stat card — the instant query API and a single JSON path binding with the custom function is all you need. For rich time-series charts showing metric history, consider using a Grafana embed via Custom Widget instead, since Grafana already handles PromQL visualization natively.

1// Custom Function: parseMetricValue
2// Convert Prometheus string metric value to double
3// Arguments: rawValue (String)
4// Return type: double
5double parseMetricValue(String rawValue) {
6  if (rawValue.isEmpty) return 0.0;
7  final parsed = double.tryParse(rawValue);
8  if (parsed == null) return 0.0;
9  // Handle Prometheus special values
10  if (parsed.isNaN || parsed.isInfinite) return 0.0;
11  return parsed;
12}

If you want app-side events (like 'user completed onboarding') to appear in Prometheus alongside your infrastructure metrics, the Pushgateway is the correct mechanism. The Pushgateway is a separate component — you need it deployed alongside Prometheus — that acts as an intermediary store. Prometheus scrapes the Pushgateway, and anything pushed there becomes available as a normal metric. The flow is: FlutterFlow API Call → Firebase Cloud Function → Pushgateway. The Cloud Function accepts a counter increment request from your app, formats it in Prometheus text exposition format, and POSTs it to `http://your-pushgateway:9091/metrics/job/<job_name>`. Prometheus scrapes the Pushgateway on its normal interval (typically every 15-30 seconds). In FlutterFlow, set up a new API Call in your PrometheusProxy API Group pointing to a new Cloud Function endpoint (for example, `/pushMetric`). Pass the metric name, value, and any labels as query parameters or JSON body. Call this API Call from your Action Flow at the moment you want to record the event. Important limitations to understand: Pushgateway metrics persist until explicitly deleted — if you push an `app_users_onboarded_total` counter of 5, it stays at 5 even after the user closes the app. Pushgateway is designed for batch jobs (short-lived processes that finish and exit), not real-time per-user event streams. High-cardinality labels (a unique label per user) will cause Prometheus memory issues — keep labels to low-cardinality categories only.

1// Firebase Cloud Function: push metrics to Pushgateway
2// functions/index.js (add this alongside the query proxy)
3const PUSHGATEWAY_URL = process.env.PUSHGATEWAY_URL || 'http://localhost:9091';
4
5exports.pushMetric = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  if (req.method === 'OPTIONS') {
8    res.set('Access-Control-Allow-Methods', 'POST');
9    res.set('Access-Control-Allow-Headers', 'Content-Type');
10    return res.status(204).send('');
11  }
12
13  const { metricName, value, jobName, labels } = req.body;
14  if (!metricName || value === undefined || !jobName) {
15    return res.status(400).json({ error: 'metricName, value, and jobName are required' });
16  }
17
18  // Build Prometheus text exposition format
19  let labelStr = '';
20  if (labels && typeof labels === 'object') {
21    const parts = Object.entries(labels).map(([k, v]) => `${k}="${v}"`);
22    labelStr = `{${parts.join(',')}}`;
23  }
24  const metricsBody = `# TYPE ${metricName} counter\n${metricName}${labelStr} ${value}\n`;
25
26  const pushUrl = `${PUSHGATEWAY_URL}/metrics/job/${encodeURIComponent(jobName)}`;
27  const axios = require('axios');
28
29  try {
30    await axios.post(pushUrl, metricsBody, {
31      headers: { 'Content-Type': 'text/plain' }
32    });
33    return res.json({ success: true });
34  } catch (err) {
35    console.error('Pushgateway error:', err.message);
36    return res.status(502).json({ error: err.message });
37  }
38});