DataDog

Before writing any FlutterFlow code, you need three values from the Datadog console: a client token, a RUM application ID, and your site region. Getting the site region wrong is the most common cause of 'no data appears' issues — and it produces no error, just silence. Log in to your Datadog account. First, identify your site: look at the URL in your browser. If it is `app.datadoghq.com`, your site is US1. If it is `app.datadoghq.eu`, your site is EU1. If it is `app.us5.datadoghq.com`, your site is US5. Keep this value visible — you will need it in the next step and in your proxy configuration. Next, go to Digital Experience → Real User Monitoring in the Datadog sidebar. Click New Application. Select Mobile as the platform and Flutter as the framework. Give the application a name matching your FlutterFlow app name. Datadog will generate a Client Token and a RUM Application ID. Copy both and store them somewhere accessible — you will paste them into your Custom Action in the next step. The client token is a write-only credential: it can only append data to Datadog under this application, so it is relatively safe to include in the app, but it is still best practice to keep it out of version control. Separately, if you plan to build a metrics read-back dashboard (Steps 4-5), go to Organization Settings → API Keys to get an API Key, and Organization Settings → Application Keys to create an Application Key. These are full-account secrets — do not use them anywhere except your server-side proxy.

In FlutterFlow, open the left nav, click Custom Code, then click + Add and select Action. Name the action InitDatadog. In the Dependencies field, add the pub.dev package `datadog_flutter_plugin` (check pub.dev for the current stable version). FlutterFlow handles the package resolution — no terminal commands needed. In the Dart code editor, import the package and write the initialization call. The most critical part is the site parameter — it must be a `DatadogSite` enum value that matches your account's region. For US1: `DatadogSite.us1`. For EU1: `DatadogSite.eu1`. For US5: `DatadogSite.us5`. For AP1: `DatadogSite.ap1`. For US3: `DatadogSite.us3`. Getting this wrong means all telemetry will be sent to the right Datadog infrastructure but the wrong organization — no error is thrown, data just never appears in your account. Add a `kIsWeb` guard at the top — `if (kIsWeb) return;` — because the `datadog_flutter_plugin` package is native-only. Import `package:flutter/foundation.dart` for the `kIsWeb` constant. Without this guard, web builds will fail to compile. Once the Custom Action is saved, wire it to your app's root widget On Page Load action. This ensures Datadog is initialized before any navigation events or logs are captured. Save the action. Remember: Custom Actions do not run in FlutterFlow's browser-based Test Mode. You must use Run Mode connected to a real iOS or Android device, or a physical device build, to verify Datadog is receiving data.

1import 'package:flutter/foundation.dart';
2import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';
3
4Future initDatadog() async {
5  // datadog_flutter_plugin is native-only
6  if (kIsWeb) return;
7
8  final configuration = DatadogConfiguration(
9    clientToken: 'YOUR_CLIENT_TOKEN',    // write-only, safe-ish in client
10    env: 'production',                    // or 'development'
11    site: DatadogSite.us1,               // CRITICAL: match your account region
12    // US1: DatadogSite.us1
13    // EU1: DatadogSite.eu1
14    // US5: DatadogSite.us5
15    // AP1: DatadogSite.ap1
16    nativeCrashReportEnabled: true,
17    loggingConfiguration: DatadogLoggingConfiguration(),
18    rumConfiguration: DatadogRumConfiguration(
19      applicationId: 'YOUR_RUM_APPLICATION_ID',
20      sessionSamplingRate: 100.0, // capture 100% of sessions
21    ),
22  );
23
24  await DatadogSdk.instance.initialize(
25    configuration,
26    TrackingConsent.granted, // call .pending and request consent if needed
27  );
28}

Datadog RUM auto-instrumentation is limited on Flutter compared to web — screen views do not automatically map to RUM views. You need to explicitly start and stop RUM views as the user navigates between screens so your RUM dashboard shows meaningful per-screen data like time on screen, error rate by screen, and session replay (if enabled). Create a Custom Action named TrackRumView with two String arguments: viewName (the screen name you want to show in Datadog) and viewUrl (a slug-style path like '/home' or '/checkout'). In the function body, call `DatadogSdk.instance.rum?.startView(viewUrl, viewName)`. Call this action On Page Load for each significant screen in your FlutterFlow app, passing the screen name and a URL-style path. For custom logging, create a Custom Action named SendDatadogLog with three arguments: level (String: 'info', 'warn', or 'error'), message (String), and attributes (JSON — a Map of extra context). In the function body, get the logger via `DatadogSdk.instance.logs?.createLogger(DatadogLoggerConfiguration())` and call `.log(LogLevel.info, message, attributes: attributes)`. Use this action to log important app events like purchase completions, sync failures, or API errors. For custom RUM attributes — adding user context to all subsequent RUM events — call `DatadogSdk.instance.rum?.addAttribute('user_id', userId)` in a Custom Action that runs after sign-in. This lets you filter RUM sessions by user ID in the Datadog dashboard, similar to FullStory's identify call but for quantitative RUM data. Wire TrackRumView to the On Page Load action of each important FlutterFlow screen. If you have many screens, add it to a reusable component or wrapper widget. Consistent view naming is critical — inconsistent view names fragment your RUM data into many small segments that are hard to analyze.

1import 'package:flutter/foundation.dart';
2import 'package:datadog_flutter_plugin/datadog_flutter_plugin.dart';
3
4// Arguments: viewName (String), viewUrl (String)
5Future trackRumView(String viewName, String viewUrl) async {
6  if (kIsWeb) return;
7  DatadogSdk.instance.rum?.startView(
8    viewUrl,   // e.g. '/checkout'
9    viewName,  // e.g. 'Checkout'
10    attributes: {'ff_screen': viewName},
11  );
12}
13
14// Arguments: level (String), message (String)
15Future sendDatadogLog(String level, String message) async {
16  if (kIsWeb) return;
17  final logger = DatadogSdk.instance.logs?.createLogger(
18    DatadogLoggerConfiguration(name: 'app'),
19  );
20  switch (level) {
21    case 'error':
22      logger?.error(message);
23      break;
24    case 'warn':
25      logger?.warn(message);
26      break;
27    default:
28      logger?.info(message);
29  }
30}

Datadog's metrics and logs query API uses two secrets: an API key (header `DD-API-KEY`) and an Application key (header `DD-APPLICATION-KEY`). Both have broad account-level access — the Application key in particular can create dashboards, manage alerts, and read all telemetry data. Placing either in a FlutterFlow API Call header compiles them into the app binary. Deploy a Firebase Cloud Function or Supabase Edge Function that holds both keys as secrets and forwards requests to the Datadog query API. The function must also use the correct region-specific base URL matching your Datadog account's site — for US1 that is `https://api.datadoghq.com`, for EU1 it is `https://api.datadoghq.eu`, for US5 it is `https://api.us5.datadoghq.com`. The proxy should accept a `path` query parameter (like `/api/v1/query`) and forward the request to `{DATADOG_BASE_URL}{path}` with both secret headers injected. Add CORS headers so web builds can call the proxy from a browser environment. Store the API key and Application key using Firebase's secret manager (`defineSecret`) or Supabase's Edge Function secrets panel. This is also a good place to add authentication to the proxy itself — require a Firebase ID token or Supabase JWT so only signed-in users of your app can trigger Datadog queries, preventing abuse of your Datadog query quota. For teams who want help architecting this proxy and the FlutterFlow dashboard binding that reads from it, RapidDev builds FlutterFlow integrations like this weekly — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function (Node.js) — Datadog query API proxy
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const axios = require('axios');
5
6const DD_API_KEY = defineSecret('DD_API_KEY');
7const DD_APP_KEY = defineSecret('DD_APP_KEY');
8// Set DD_BASE_URL to match your account site:
9// US1: https://api.datadoghq.com
10// EU1: https://api.datadoghq.eu
11// US5: https://api.us5.datadoghq.com
12const DD_BASE_URL = 'https://api.datadoghq.com';
13
14exports.datadogProxy = onRequest(
15  { secrets: [DD_API_KEY, DD_APP_KEY] },
16  async (req, res) => {
17    res.set('Access-Control-Allow-Origin', '*');
18    if (req.method === 'OPTIONS') {
19      res.set('Access-Control-Allow-Headers', 'Content-Type');
20      return res.status(204).send('');
21    }
22
23    const path = req.query.path || '/api/v1/query';
24    try {
25      const response = await axios({
26        method: req.method,
27        url: `${DD_BASE_URL}${path}`,
28        headers: {
29          'DD-API-KEY': DD_API_KEY.value(),
30          'DD-APPLICATION-KEY': DD_APP_KEY.value(),
31          'Content-Type': 'application/json',
32        },
33        params: req.method === 'GET' ? req.query : undefined,
34        data: req.method !== 'GET' ? req.body : undefined,
35      });
36      return res.json(response.data);
37    } catch (err) {
38      return res.status(err.response?.status || 500).json({
39        error: err.message,
40      });
41    }
42  }
43);

With the proxy deployed, create a FlutterFlow API Group to read metrics from Datadog. In the left nav, click API Calls → + Add → Create API Group. Name it DatadogMetrics. Set the Base URL to your deployed proxy function URL. Add an API Call inside the group: name it QueryMetrics. Set the method to GET. In the endpoint field, use `/` and pass the Datadog API path as a query variable named `path`. Add another variable named `query` for the Datadog metrics query string (for example `avg:rum.sessions.count{env:production}`). Add a `from` and `to` variable for the time range as Unix timestamps. In the Response & Test tab, paste a sample Datadog metrics query response and click Generate JSON Paths. The Datadog metrics API returns a `series` array where each item has a `pointlist` — an array of [timestamp, value] pairs. Map the fields you need into a Data Type named DatadogMetric with fields: metricName (String) and the latest value (Double). For an ops dashboard screen, add a Row of stat card Containers, each bound to a different QueryMetrics call with a different metric query: crash rate, session count, error count. Add a refresh IconButton that triggers all three queries. Display the values with appropriate units (percent for rates, integer for counts) and use conditional color — a green/red Container background based on whether the value exceeds a threshold you define in App State. Cache the query results in Firestore or your Supabase database if multiple users will open this dashboard — Datadog's query API has rate limits and there is no reason to query the live API on every screen open when metrics only change every few minutes.

1{
2  "group_name": "DatadogMetrics",
3  "base_url": "https://YOUR_REGION-YOUR_PROJECT.cloudfunctions.net/datadogProxy",
4  "calls": [
5    {
6      "name": "QueryMetrics",
7      "method": "GET",
8      "endpoint": "/",
9      "query_params": {
10        "path": "/api/v1/query",
11        "query": "{{metricQuery}}",
12        "from": "{{fromTimestamp}}",
13        "to": "{{toTimestamp}}"
14      },
15      "variables": [
16        { "name": "metricQuery", "type": "String" },
17        { "name": "fromTimestamp", "type": "Integer" },
18        { "name": "toTimestamp", "type": "Integer" }
19      ],
20      "json_paths": {
21        "metricName": "$.series[0].metric",
22        "latestValue": "$.series[0].pointlist[-1][1]"
23      }
24    }
25  ]
26}