feat(faro): rewrite dashboards to use Tempo instead of Loki

Faro SDK sends traces (spans with events) via OTLP, not OTLP logs or metrics. Rewrote all 3 Faro dashboards to use Tempo TraceQL queries instead of Loki LogQL. - faro-overview: page views, exceptions, console errors, navigation - faro-js-errors: exception traces, console error traces - faro-web-vitals: LCP, FCP, CLS, TTFB via web-vitals span events All panels now query Tempo (uid P214B5B846CF3925F) with TraceQL.
2026-07-21 17:39:19 +02:00
parent f32ff701e1
commit fa842d3f6f
3 changed files with 415 additions and 0 deletions
@@ -0,0 +1,142 @@
+{
+  "annotations": { "list": [] },
+  "description": "JS errors and console errors captured by Grafana Faro. Data lives in Tempo as span events.",
+  "editable": true,
+  "graphTooltip": 1,
+  "id": null,
+  "links": [],
+  "liveNow": false,
+  "panels": [
+    {
+      "type": "stat",
+      "title": "Exceptions (5m)",
+      "datasource": { "type": "tempo", "uid": "P214B5B846CF3925F" },
+      "gridPos": { "h": 4, "w": 8, "x": 0, "y": 0 },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": { "steps": [
+            { "color": "green", "value": null },
+            { "color": "yellow", "value": 1 },
+            { "color": "red", "value": 5 }
+          ]}
+        }
+      },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background" },
+      "targets": [
+        {
+          "query": "{ service.name = \"farmafinder-frontend\" && span.event.name = \"exception\" }",
+          "refId": "A",
+          "limit": 1000,
+          "tableType": "traceql"
+        }
+      ]
+    },
+    {
+      "type": "stat",
+      "title": "Console errors (5m)",
+      "datasource": { "type": "tempo", "uid": "P214B5B846CF3925F" },
+      "gridPos": { "h": 4, "w": 8, "x": 8, "y": 0 },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": { "steps": [
+            { "color": "green", "value": null },
+            { "color": "yellow", "value": 1 },
+            { "color": "red", "value": 5 }
+          ]}
+        }
+      },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background" },
+      "targets": [
+        {
+          "query": "{ service.name = \"farmafinder-frontend\" && span.event.name = \"console\" } | logfmt | level =~ \"error|critical\"",
+          "refId": "A",
+          "limit": 1000,
+          "tableType": "traceql"
+        }
+      ]
+    },
+    {
+      "type": "stat",
+      "title": "Failed fetch/XHR (5m)",
+      "datasource": { "type": "tempo", "uid": "P214B5B846CF3925F" },
+      "gridPos": { "h": 4, "w": 8, "x": 16, "y": 0 },
+      "fieldConfig": {
+        "defaults": {
+          "thresholds": { "steps": [
+            { "color": "green", "value": null },
+            { "color": "yellow", "value": 1 },
+            { "color": "red", "value": 5 }
+          ]}
+        }
+      },
+      "options": { "reduceOptions": { "calcs": ["lastNotNull"] }, "colorMode": "background" },
+      "targets": [
+        {
+          "query": "{ service.name = \"farmafinder-frontend\" && span.event.name = \"fetch\" } | logfmt | status_code >= 400",
+          "refId": "A",
+          "limit": 1000,
+          "tableType": "traceql"
+        }
+      ]
+    },
+    {
+      "type": "table",
+      "title": "Recent exception traces",
+      "datasource": { "type": "tempo", "uid": "P214B5B846CF3925F" },
+      "gridPos": { "h": 10, "w": 24, "x": 0, "y": 4 },
+      "options": { "showHeader": true },
+      "targets": [
+        {
+          "query": "{ service.name = \"farmafinder-frontend\" && span.event.name = \"exception\" }",
+          "refId": "A",
+          "limit": 20,
+          "tableType": "traceql"
+        }
+      ],
+      "transformations": [
+        {
+          "id": "organize",
+          "options": {
+            "excludeByName": { "traceID": false, "rootServiceName": true, "rootTraceName": false, "duration": true, "startTime": true },
+            "renameByName": { "traceID": "Trace ID", "rootTraceName": "Name", "duration": "Duration", "startTime": "Time" }
+          }
+        }
+      ]
+    },
+    {
+      "type": "table",
+      "title": "Recent console errors",
+      "datasource": { "type": "tempo", "uid": "P214B5B846CF3925F" },
+      "gridPos": { "h": 10, "w": 24, "x": 0, "y": 14 },
+      "options": { "showHeader": true },
+      "targets": [
+        {
+          "query": "{ service.name = \"farmafinder-frontend\" && span.event.name = \"console\" } | logfmt | level =~ \"error|critical\"",
+          "refId": "A",
+          "limit": 20,
+          "tableType": "traceql"
+        }
+      ],
+      "transformations": [
+        {
+          "id": "organize",
+          "options": {
+            "excludeByName": { "traceID": false, "rootServiceName": true, "rootTraceName": false, "duration": true, "startTime": true },
+            "renameByName": { "traceID": "Trace ID", "rootTraceName": "Name", "duration": "Duration", "startTime": "Time" }
+          }
+        }
+      ]
+    }
+  ],
+  "refresh": "30s",
+  "schemaVersion": 39,
+  "tags": ["faro", "errors", "farmafinder"],
+  "templating": { "list": [] },
+  "time": { "from": "now-1h", "to": "now" },
+  "timepicker": {},
+  "timezone": "browser",
+  "title": "FARO — JS Errors",
+  "uid": "faro-js-errors",
+  "version": 2,
+  "weekStart": ""
+}