{ "__inputs": [ { "name": "DS_LOKI", "label": "Loki", "description": "Loki datasource receiving Vercel drain events", "type": "datasource", "pluginId": "loki", "pluginName": "Loki" } ], "__elements": {}, "__requires": [ { "type": "grafana", "id": "grafana", "name": "Grafana", "version": "10.0.0" }, { "type": "datasource", "id": "loki", "name": "Loki", "version": "1.0.0" }, { "type": "panel", "id": "stat", "name": "Stat", "version": "" }, { "type": "panel", "id": "table", "name": "Table", "version": "" }, { "type": "panel", "id": "timeseries", "name": "Time series", "version": "" }, { "type": "panel", "id": "piechart", "name": "Pie chart", "version": "" } ], "annotations": { "list": [ { "builtIn": 1, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 1, "id": null, "links": [], "liveNow": false, "panels": [ { "collapsed": false, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 0 }, "id": 100, "panels": [], "title": "Core Web Vitals — Speed Insights drain", "type": "row" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile Largest Contentful Paint. Good ≤ 2.5s, poor > 4s.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 2500 }, { "color": "red", "value": 4000 } ] }, "unit": "ms" }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 1 }, "id": 1, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"LCP\" | unwrap value [$__range])", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 LCP", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile Interaction to Next Paint. Good ≤ 200ms, poor > 500ms.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 200 }, { "color": "red", "value": 500 } ] }, "unit": "ms" }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 4, "y": 1 }, "id": 2, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"INP\" | unwrap value [$__range])", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 INP", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile Cumulative Layout Shift. Good ≤ 0.1, poor > 0.25.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "decimals": 3, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 0.1 }, { "color": "red", "value": 0.25 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 8, "y": 1 }, "id": 3, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"CLS\" | unwrap value [$__range])", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 CLS", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile First Contentful Paint. Good ≤ 1.8s, poor > 3s.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 1800 }, { "color": "red", "value": 3000 } ] }, "unit": "ms" }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 12, "y": 1 }, "id": 4, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"FCP\" | unwrap value [$__range])", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 FCP", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile Time To First Byte. Good ≤ 800ms, poor > 1.8s.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 800 }, { "color": "red", "value": 1800 } ] }, "unit": "ms" }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 16, "y": 1 }, "id": 5, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"TTFB\" | unwrap value [$__range])", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 TTFB", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Total Speed Insights metric samples received in the selected time range.", "fieldConfig": { "defaults": { "color": { "mode": "fixed", "fixedColor": "blue" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "blue", "value": null } ] }, "unit": "short" }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 20, "y": 1 }, "id": 6, "options": { "colorMode": "value", "graphMode": "none", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum(count_over_time({service_name=\"$si_service\", environment=~\"$environment\"} [$__range]))", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "Vitals samples", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile loading metrics over time.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "drawStyle": "line", "fillOpacity": 10, "gradientMode": "none", "hideFrom": { "legend": false, "tooltip": false, "viz": false }, "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 2, "pointSize": 6, "scaleDistribution": { "type": "linear" }, "showPoints": "always", "spanNulls": true, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null } ] }, "unit": "ms" }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 5 }, "id": 7, "options": { "legend": { "calcs": ["mean", "max"], "displayMode": "table", "placement": "bottom", "showLegend": true }, "tooltip": { "mode": "multi", "sort": "desc" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"LCP\" | unwrap value [$__auto])", "legendFormat": "LCP p75", "queryType": "range", "refId": "A" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"FCP\" | unwrap value [$__auto])", "legendFormat": "FCP p75", "queryType": "range", "refId": "B" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"TTFB\" | unwrap value [$__auto])", "legendFormat": "TTFB p75", "queryType": "range", "refId": "C" } ], "title": "Loading — p75 LCP / FCP / TTFB", "type": "timeseries" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile Interaction to Next Paint over time.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "drawStyle": "line", "fillOpacity": 10, "gradientMode": "none", "hideFrom": { "legend": false, "tooltip": false, "viz": false }, "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 2, "pointSize": 6, "scaleDistribution": { "type": "linear" }, "showPoints": "always", "spanNulls": true, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "dashed" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 200 }, { "color": "red", "value": 500 } ] }, "unit": "ms" }, "overrides": [] }, "gridPos": { "h": 8, "w": 6, "x": 12, "y": 5 }, "id": 8, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": false }, "tooltip": { "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"INP\" | unwrap value [$__auto])", "legendFormat": "INP p75", "queryType": "range", "refId": "A" } ], "title": "Interactivity — p75 INP", "type": "timeseries" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "75th percentile Cumulative Layout Shift over time.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "drawStyle": "line", "fillOpacity": 10, "gradientMode": "none", "hideFrom": { "legend": false, "tooltip": false, "viz": false }, "insertNulls": false, "lineInterpolation": "smooth", "lineWidth": 2, "pointSize": 6, "scaleDistribution": { "type": "linear" }, "showPoints": "always", "spanNulls": true, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "dashed" } }, "decimals": 3, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 0.1 }, { "color": "red", "value": 0.25 } ] }, "unit": "none" }, "overrides": [] }, "gridPos": { "h": 8, "w": 6, "x": 18, "y": 5 }, "id": 9, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": false }, "tooltip": { "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"CLS\" | unwrap value [$__auto])", "legendFormat": "CLS p75", "queryType": "range", "refId": "A" } ], "title": "Stability — p75 CLS", "type": "timeseries" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Routes with the slowest p75 LCP in the selected range.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "custom": { "align": "auto", "cellOptions": { "type": "auto" }, "inspect": false }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 2500 }, { "color": "red", "value": 4000 } ] }, "unit": "ms" }, "overrides": [ { "matcher": { "id": "byName", "options": "Value #A" }, "properties": [ { "id": "displayName", "value": "p75 LCP" }, { "id": "custom.cellOptions", "value": { "type": "color-background", "mode": "gradient" } } ] }, { "matcher": { "id": "byName", "options": "Time" }, "properties": [ { "id": "custom.hidden", "value": true } ] } ] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 13 }, "id": 10, "options": { "cellHeight": "sm", "footer": { "countRows": false, "fields": "", "reducer": ["sum"], "show": false }, "showHeader": true, "sortBy": [ { "desc": true, "displayName": "p75 LCP" } ] }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "topk(10, quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"LCP\" | unwrap value [$__range]) by (route))", "format": "table", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "Worst routes by p75 LCP", "type": "table" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "p75 LCP split by country.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "custom": { "align": "auto", "cellOptions": { "type": "auto" }, "inspect": false }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 2500 }, { "color": "red", "value": 4000 } ] }, "unit": "ms" }, "overrides": [ { "matcher": { "id": "byName", "options": "Value #A" }, "properties": [ { "id": "displayName", "value": "p75 LCP" } ] }, { "matcher": { "id": "byName", "options": "Time" }, "properties": [ { "id": "custom.hidden", "value": true } ] } ] }, "gridPos": { "h": 8, "w": 6, "x": 12, "y": 13 }, "id": 11, "options": { "cellHeight": "sm", "footer": { "countRows": false, "fields": "", "reducer": ["sum"], "show": false }, "showHeader": true, "sortBy": [ { "desc": true, "displayName": "p75 LCP" } ] }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "topk(10, quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"LCP\" | unwrap value [$__range]) by (country))", "format": "table", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 LCP by country", "type": "table" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "p75 LCP split by device type.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "custom": { "align": "auto", "cellOptions": { "type": "auto" }, "inspect": false }, "decimals": 0, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "yellow", "value": 2500 }, { "color": "red", "value": 4000 } ] }, "unit": "ms" }, "overrides": [ { "matcher": { "id": "byName", "options": "Value #A" }, "properties": [ { "id": "displayName", "value": "p75 LCP" } ] }, { "matcher": { "id": "byName", "options": "Time" }, "properties": [ { "id": "custom.hidden", "value": true } ] } ] }, "gridPos": { "h": 8, "w": 6, "x": 18, "y": 13 }, "id": 12, "options": { "cellHeight": "sm", "footer": { "countRows": false, "fields": "", "reducer": ["sum"], "show": false }, "showHeader": true, "sortBy": [ { "desc": true, "displayName": "p75 LCP" } ] }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "quantile_over_time(0.75, {service_name=\"$si_service\", environment=~\"$environment\"} | json | metricType=\"LCP\" | unwrap value [$__range]) by (deviceType)", "format": "table", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "p75 LCP by device type", "type": "table" }, { "collapsed": false, "gridPos": { "h": 1, "w": 24, "x": 0, "y": 21 }, "id": 200, "panels": [], "title": "Web Analytics drain", "type": "row" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Total pageviews in the selected range, with trend.", "fieldConfig": { "defaults": { "color": { "mode": "fixed", "fixedColor": "blue" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "blue", "value": null } ] }, "unit": "short" }, "overrides": [] }, "gridPos": { "h": 8, "w": 4, "x": 0, "y": 22 }, "id": 13, "options": { "colorMode": "value", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["sum"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum(count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__auto]))", "legendFormat": "Pageviews", "queryType": "range", "refId": "A" } ], "title": "Pageviews", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Custom events sent via track() from @vercel/analytics — 0 until the app tracks custom events.", "fieldConfig": { "defaults": { "color": { "mode": "fixed", "fixedColor": "purple" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "purple", "value": null } ] }, "unit": "short", "noValue": "0" }, "overrides": [] }, "gridPos": { "h": 8, "w": 4, "x": 4, "y": 22 }, "id": 14, "options": { "colorMode": "value", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": ["sum"], "fields": "", "values": false }, "textMode": "auto" }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum(count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"event\" [$__auto]))", "legendFormat": "Custom events", "queryType": "range", "refId": "A" } ], "title": "Custom events", "type": "stat" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Pageviews by device type.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "hideFrom": { "legend": false, "tooltip": false, "viz": false } }, "mappings": [], "unit": "short" }, "overrides": [] }, "gridPos": { "h": 8, "w": 8, "x": 8, "y": 22 }, "id": 15, "options": { "displayLabels": ["name", "percent"], "legend": { "displayMode": "list", "placement": "right", "showLegend": true, "values": [] }, "pieType": "donut", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "tooltip": { "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum by (deviceType) (count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__range]))", "instant": false, "legendFormat": "{{deviceType}}", "queryType": "range", "refId": "A" } ], "title": "Device types", "type": "piechart" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Pageviews by browser.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "hideFrom": { "legend": false, "tooltip": false, "viz": false } }, "mappings": [], "unit": "short" }, "overrides": [] }, "gridPos": { "h": 8, "w": 8, "x": 16, "y": 22 }, "id": 16, "options": { "displayLabels": ["name", "percent"], "legend": { "displayMode": "list", "placement": "right", "showLegend": true, "values": [] }, "pieType": "donut", "reduceOptions": { "calcs": ["lastNotNull"], "fields": "", "values": false }, "tooltip": { "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum by (clientName) (count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__range]))", "instant": false, "legendFormat": "{{clientName}}", "queryType": "range", "refId": "A" } ], "title": "Browsers", "type": "piechart" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Pageviews over time.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "drawStyle": "bars", "fillOpacity": 60, "gradientMode": "none", "hideFrom": { "legend": false, "tooltip": false, "viz": false }, "insertNulls": false, "lineInterpolation": "linear", "lineWidth": 1, "pointSize": 5, "scaleDistribution": { "type": "linear" }, "showPoints": "never", "spanNulls": false, "stacking": { "group": "A", "mode": "none" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null } ] }, "unit": "short" }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 0, "y": 30 }, "id": 17, "options": { "legend": { "calcs": [], "displayMode": "list", "placement": "bottom", "showLegend": false }, "tooltip": { "mode": "single", "sort": "none" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum(count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__auto]))", "legendFormat": "Pageviews", "queryType": "range", "refId": "A" } ], "title": "Pageviews over time", "type": "timeseries" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Custom events sent via track() from @vercel/analytics — 0 until the app tracks custom events.", "fieldConfig": { "defaults": { "color": { "mode": "palette-classic" }, "custom": { "axisBorderShow": false, "axisCenteredZero": false, "axisColorMode": "text", "axisLabel": "", "axisPlacement": "auto", "barAlignment": 0, "drawStyle": "bars", "fillOpacity": 60, "gradientMode": "none", "hideFrom": { "legend": false, "tooltip": false, "viz": false }, "insertNulls": false, "lineInterpolation": "linear", "lineWidth": 1, "pointSize": 5, "scaleDistribution": { "type": "linear" }, "showPoints": "never", "spanNulls": false, "stacking": { "group": "A", "mode": "normal" }, "thresholdsStyle": { "mode": "off" } }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null } ] }, "unit": "short" }, "overrides": [] }, "gridPos": { "h": 8, "w": 12, "x": 12, "y": 30 }, "id": 18, "options": { "legend": { "calcs": ["sum"], "displayMode": "table", "placement": "bottom", "showLegend": true }, "tooltip": { "mode": "multi", "sort": "desc" } }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "sum by (eventName) (count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"event\" [$__auto]))", "legendFormat": "{{eventName}}", "queryType": "range", "refId": "A" } ], "title": "Custom events by name", "type": "timeseries" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Most viewed pages in the selected range.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "custom": { "align": "auto", "cellOptions": { "type": "auto" }, "inspect": false }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "blue", "value": null } ] }, "unit": "short" }, "overrides": [ { "matcher": { "id": "byName", "options": "Value #A" }, "properties": [ { "id": "displayName", "value": "Pageviews" }, { "id": "custom.cellOptions", "value": { "type": "gauge", "mode": "gradient" } } ] }, { "matcher": { "id": "byName", "options": "Time" }, "properties": [ { "id": "custom.hidden", "value": true } ] } ] }, "gridPos": { "h": 9, "w": 8, "x": 0, "y": 38 }, "id": 19, "options": { "cellHeight": "sm", "footer": { "countRows": false, "fields": "", "reducer": ["sum"], "show": false }, "showHeader": true, "sortBy": [ { "desc": true, "displayName": "Pageviews" } ] }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "topk(10, sum by (path) (count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__range])))", "format": "table", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "Top pages", "type": "table" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Top referrers in the selected range (empty referrer = direct traffic).", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "custom": { "align": "auto", "cellOptions": { "type": "auto" }, "inspect": false }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "blue", "value": null } ] }, "unit": "short" }, "overrides": [ { "matcher": { "id": "byName", "options": "Value #A" }, "properties": [ { "id": "displayName", "value": "Pageviews" }, { "id": "custom.cellOptions", "value": { "type": "gauge", "mode": "gradient" } } ] }, { "matcher": { "id": "byName", "options": "Time" }, "properties": [ { "id": "custom.hidden", "value": true } ] } ] }, "gridPos": { "h": 9, "w": 8, "x": 8, "y": 38 }, "id": 20, "options": { "cellHeight": "sm", "footer": { "countRows": false, "fields": "", "reducer": ["sum"], "show": false }, "showHeader": true, "sortBy": [ { "desc": true, "displayName": "Pageviews" } ] }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "topk(10, sum by (referrer) (count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__range])))", "format": "table", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "Top referrers", "type": "table" }, { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "description": "Pageviews by country in the selected range.", "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "custom": { "align": "auto", "cellOptions": { "type": "auto" }, "inspect": false }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "blue", "value": null } ] }, "unit": "short" }, "overrides": [ { "matcher": { "id": "byName", "options": "Value #A" }, "properties": [ { "id": "displayName", "value": "Pageviews" }, { "id": "custom.cellOptions", "value": { "type": "gauge", "mode": "gradient" } } ] }, { "matcher": { "id": "byName", "options": "Time" }, "properties": [ { "id": "custom.hidden", "value": true } ] } ] }, "gridPos": { "h": 9, "w": 8, "x": 16, "y": 38 }, "id": 21, "options": { "cellHeight": "sm", "footer": { "countRows": false, "fields": "", "reducer": ["sum"], "show": false }, "showHeader": true, "sortBy": [ { "desc": true, "displayName": "Pageviews" } ] }, "targets": [ { "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "expr": "topk(10, sum by (country) (count_over_time({service_name=\"$wa_service\", environment=~\"$environment\"} | json | eventType=\"pageview\" [$__range])))", "format": "table", "instant": true, "queryType": "instant", "refId": "A" } ], "title": "Top countries", "type": "table" } ], "refresh": "", "schemaVersion": 39, "tags": ["vercel", "web-vitals", "analytics", "loki"], "templating": { "list": [ { "current": {}, "datasource": { "type": "loki", "uid": "${DS_LOKI}" }, "definition": "label_values({service_name=~\"vercel-.+\"}, environment)", "hide": 0, "includeAll": true, "allValue": ".+", "label": "Environment", "multi": true, "name": "environment", "options": [], "query": "label_values({service_name=~\"vercel-.+\"}, environment)", "refresh": 2, "regex": "", "skipUrlSync": false, "sort": 1, "type": "query" }, { "current": { "selected": false, "text": "vercel-speed-insights", "value": "vercel-speed-insights" }, "hide": 2, "label": "Speed Insights stream", "name": "si_service", "query": "vercel-speed-insights", "skipUrlSync": false, "type": "constant" }, { "current": { "selected": false, "text": "vercel-analytics", "value": "vercel-analytics" }, "hide": 2, "label": "Web Analytics stream", "name": "wa_service", "query": "vercel-analytics", "skipUrlSync": false, "type": "constant" } ] }, "time": { "from": "now-24h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "Vercel Web Analytics & Speed Insights", "uid": "vercel-drains-web", "version": 1, "weekStart": "" }