IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Report frontend metrics for JS/CSS load time (#42421)

Browse Source 
* Report frontend metrics for js/css load time

* Add FCP metric

* Change comment

* Simplify reporting frontend metrics
This commit is contained in:
Piotr Jamróz 2021-12-02 09:34:39 +01:00 committed by GitHub
parent ee9ca20f1f
commit bb24e8d578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/api/frontend_metrics.go
View File

@ -2,7 +2,6 @@ package api
import (
"net/http"
"strings"
"github.com/grafana/grafana/pkg/api/response"
"github.com/grafana/grafana/pkg/infra/metrics"
@ -16,11 +15,10 @@ func (hs *HTTPServer) PostFrontendMetrics(c *models.ReqContext) response.Respons
return response.Error(http.StatusBadRequest, "bad request data", err)
}
for _, event := range cmd.Events {
name := strings.Replace(event.Name, "-", "_", -1)
if recorder, ok := metrics.FrontendMetrics[name]; ok {
if recorder, ok := metrics.FrontendMetrics[event.Name]; ok {
recorder(event)
} else {
c.Logger.Debug("Received unknown frontend metric", "metric", name)
c.Logger.Debug("Received unknown frontend metric", "metric", event.Name)
}
}
return response.Empty(200)

2
pkg/infra/metrics/frontendmetrics.go
View File

@ -39,5 +39,7 @@ func registerFrontendHistogram(name string, help string) {
func initFrontendMetrics() {
registerFrontendHistogram("frontend_boot_load_time_seconds", "Frontend boot time measurement")
registerFrontendHistogram("frontend_boot_first_paint_time_seconds", "Frontend boot first paint")
registerFrontendHistogram("frontend_boot_first_contentful_paint_time_seconds", "Frontend boot first contentful paint")
registerFrontendHistogram("frontend_boot_js_done_time_seconds", "Frontend boot initial js load")
registerFrontendHistogram("frontend_boot_css_time_seconds", "Frontend boot initial css load")
}

34
public/app/app.ts
View File

@ -166,21 +166,17 @@ function initEchoSrv() {
window.addEventListener('load', (e) => {
const loadMetricName = 'frontend_boot_load_time_seconds';
// Metrics below are marked in public/views/index-template.html
const jsLoadMetricName = 'frontend_boot_js_done_time_seconds';
const cssLoadMetricName = 'frontend_boot_css_time_seconds';
if (performance && performance.getEntriesByType) {
if (performance) {
performance.mark(loadMetricName);
const paintMetrics = performance.getEntriesByType('paint');
for (const metric of paintMetrics) {
reportPerformance(
`frontend_boot_${metric.name}_time_seconds`,
Math.round(metric.startTime + metric.duration) / 1000
);
}
const loadMetric = performance.getEntriesByName(loadMetricName)[0];
reportPerformance(loadMetric.name, Math.round(loadMetric.startTime + loadMetric.duration) / 1000);
reportMetricPerformanceMark('first-paint', 'frontend_boot_', '_time_seconds');
reportMetricPerformanceMark('first-contentful-paint', 'frontend_boot_', '_time_seconds');
reportMetricPerformanceMark(loadMetricName);
reportMetricPerformanceMark(jsLoadMetricName);
reportMetricPerformanceMark(cssLoadMetricName);
}
});
@ -232,4 +228,16 @@ function addClassIfNoOverlayScrollbar() {
}
}
/**
* Report when a metric of a given name was marked during the document lifecycle. Works for markers with no duration,
* like PerformanceMark or PerformancePaintTiming (e.g. created with performance.mark, or first-contentful-paint)
*/
function reportMetricPerformanceMark(metricName: string, prefix = '', suffix = ''): void {
const metric = _.first(performance.getEntriesByName(metricName));
if (metric) {
const metricName = metric.name.replace(/-/g, '_');
reportPerformance(`${prefix}${metricName}${suffix}`, Math.round(metric.startTime) / 1000);
}
}
export default new GrafanaApp();