Add page.on('metric')

browser/metric_event_mapping.go

@@ -0,0 +1,43 @@
+package browser
+
+import (
+	"fmt"
+
+	"github.com/grafana/xk6-browser/common"
+)
+
+// mapMetricEvent to the JS module.
+func mapMetricEvent(vu moduleVU, cm *common.MetricEvent) (mapping, error) {
+	rt := vu.VU.Runtime()
+
+	// We're setting up the function in the Sobek context that will be reused
+	// for this VU.
+	_, err := rt.RunString(`
+	function _k6BrowserCheckRegEx(pattern, url) {
+		let r = pattern;
+		if (typeof pattern === 'string') {
+			r = new RegExp(pattern);
+		}
+		return r.test(url);
+	}`)
+	if err != nil {
+		return nil, fmt.Errorf("evaluating regex function: %w", err)
+	}
+
+	return mapping{
+		"Tag": func(urls common.URLTagPatterns) error {
+			callback := func(pattern, url string) (bool, error) {
+				js := fmt.Sprintf(`_k6BrowserCheckRegEx(%s, '%s')`, pattern, url)
+
+				matched, err := rt.RunString(js)
+				if err != nil {
+					return false, fmt.Errorf("matching url with regex: %w", err)
+				}
+
+				return matched.ToBoolean(), nil
+			}
+
+			return cm.Tag(callback, urls)
+		},
+	}, nil
+}

browser/page_mapping.go

@@ -2,6 +2,7 @@ package browser
 
 import (
 	"context"
+	"errors"
 	"fmt"
 	"time"
 
@@ -206,18 +207,56 @@ func mapPage(vu moduleVU, p *common.Page) mapping { //nolint:gocognit,cyclop
 		"on": func(event string, handler sobek.Callable) error {
 			tq := vu.taskQueueRegistry.get(vu.Context(), p.TargetID())
 
-			mapMsgAndHandleEvent := func(m *common.ConsoleMessage) error {
-				mapping := mapConsoleMessage(vu, m)
-				_, err := handler(sobek.Undefined(), vu.Runtime().ToValue(mapping))
-				return err
-			}
-			runInTaskQueue := func(m *common.ConsoleMessage) {
-				tq.Queue(func() error {
-					if err := mapMsgAndHandleEvent(m); err != nil {
-						return fmt.Errorf("executing page.on handler: %w", err)
-					}
-					return nil
-				})
+			var runInTaskQueue func(any)
+			switch event {
+			case common.EventPageConsoleAPICalled:
+				mapMsgAndHandleEvent := func(m *common.ConsoleMessage) error {
+					mapping := mapConsoleMessage(vu, m)
+					_, err := handler(sobek.Undefined(), vu.VU.Runtime().ToValue(mapping))
+					return err
+				}
+				runInTaskQueue = func(a any) {
+					tq.Queue(func() error {
+						m, ok := a.(*common.ConsoleMessage)
+						if !ok {
+							return errors.New("incorrect console message")
+						}
+
+						if err := mapMsgAndHandleEvent(m); err != nil {
+							return fmt.Errorf("executing page.on handler: %w", err)
+						}
+						return nil
+					})
+				}
+			case common.EventPageMetricCalled:
+				runInTaskQueue = func(a any) {
+					// The function on the taskqueue runs in its own goroutine
+					// so we need to use a channel to wait for it to complete
+					// since we're waiting for updates from the handler which
+					// will be written to the ExportedMetric.
+					c := make(chan bool)
+					tq.Queue(func() error {
+						defer close(c)
+
+						m, ok := a.(*common.MetricEvent)
+						if !ok {
+							return errors.New("incorrect metric message")
+						}
+
+						mapping, err := mapMetricEvent(vu, m)
+						if err != nil {
+							return fmt.Errorf("mapping the metric: %w", err)
+						}
+
+						if _, err = handler(sobek.Undefined(), vu.VU.Runtime().ToValue(mapping)); err != nil {
+							return fmt.Errorf("executing page.on('metric') handler: %w", err)
+						}
+						return nil
+					})
+					<-c
+				}
+			default:
+				return fmt.Errorf("unknown page event: %q", event)
 			}
 
 			return p.On(event, runInTaskQueue) //nolint:wrapcheck

browser/sync_page_mapping.go

@@ -1,6 +1,7 @@
 package browser
 
 import (
+	"errors"
 	"fmt"
 
 	"github.com/grafana/sobek"
@@ -121,8 +122,13 @@ func syncMapPage(vu moduleVU, p *common.Page) mapping { //nolint:gocognit,cyclop
 				_, err := handler(sobek.Undefined(), vu.Runtime().ToValue(mapping))
 				return err
 			}
-			runInTaskQueue := func(m *common.ConsoleMessage) {
+			runInTaskQueue := func(a any) {
 				tq.Queue(func() error {
+					m, ok := a.(*common.ConsoleMessage)
+					if !ok {
+						return errors.New("incorrect message")
+					}
+
 					if err := mapMsgAndHandleEvent(m); err != nil {
 						return fmt.Errorf("executing page.on handler: %w", err)
 					}

common/frame_session.go

@@ -121,7 +121,7 @@ func NewFrameSession(
 	if fs.parent != nil {
 		parentNM = fs.parent.networkManager
 	}
-	fs.networkManager, err = NewNetworkManager(ctx, k6Metrics, s, fs.manager, parentNM)
+	fs.networkManager, err = NewNetworkManager(ctx, k6Metrics, s, fs.manager, parentNM, fs.manager.page)
 	if err != nil {
 		l.Debugf("NewFrameSession:NewNetworkManager", "sid:%v tid:%v err:%v",
 			s.ID(), tid, err)
@@ -355,7 +355,7 @@ func (fs *FrameSession) parseAndEmitWebVitalMetric(object string) error {
 	state := fs.vu.State()
 	tags := state.Tags.GetCurrentValues().Tags
 	if state.Options.SystemTags.Has(k6metrics.TagURL) {
-		tags = tags.With("url", wv.URL)
+		tags = handleURLTag(fs.ctx, fs.page, wv.URL, tags)
 	}
 
 	tags = tags.With("rating", wv.Rating)

common/network_manager.go

@@ -57,6 +57,10 @@ func (c *Credentials) Parse(ctx context.Context, credentials sobek.Value) error
 	return nil
 }
 
+type metricInterceptor interface {
+	urlTagName(ctx context.Context, urlTag string) (string, bool)
+}
+
 // NetworkManager manages all frames in HTML document.
 type NetworkManager struct {
 	BaseEventEmitter
@@ -70,6 +74,7 @@ type NetworkManager struct {
 	resolver      k6netext.Resolver
 	vu            k6modules.VU
 	customMetrics *k6ext.CustomMetrics
+	mi            metricInterceptor
 
 	// TODO: manage inflight requests separately (move them between the two maps
 	// as they transition from inflight -> completed)
@@ -88,7 +93,12 @@ type NetworkManager struct {
 
 // NewNetworkManager creates a new network manager.
 func NewNetworkManager(
-	ctx context.Context, customMetrics *k6ext.CustomMetrics, s session, fm *FrameManager, parent *NetworkManager,
+	ctx context.Context,
+	customMetrics *k6ext.CustomMetrics,
+	s session,
+	fm *FrameManager,
+	parent *NetworkManager,
+	mi metricInterceptor,
 ) (*NetworkManager, error) {
 	vu := k6ext.GetVU(ctx)
 	state := vu.State()
@@ -114,6 +124,7 @@ func NewNetworkManager(
 		attemptedAuth:    make(map[fetch.RequestID]bool),
 		extraHTTPHeaders: make(map[string]string),
 		networkProfile:   NewNetworkProfile(),
+		mi:               mi,
 	}
 	m.initEvents()
 	if err := m.initDomains(); err != nil {
@@ -181,7 +192,7 @@ func (m *NetworkManager) emitRequestMetrics(req *Request) {
 		tags = tags.With("method", req.method)
 	}
 	if state.Options.SystemTags.Has(k6metrics.TagURL) {
-		tags = tags.With("url", req.URL())
+		tags = handleURLTag(m.vu.Context(), m.mi, req.URL(), tags)
 	}
 
 	k6metrics.PushIfNotDone(m.vu.Context(), state.Samples, k6metrics.ConnectedSamples{
@@ -234,7 +245,7 @@ func (m *NetworkManager) emitResponseMetrics(resp *Response, req *Request) {
 		tags = tags.With("method", req.method)
 	}
 	if state.Options.SystemTags.Has(k6metrics.TagURL) {
-		tags = tags.With("url", url)
+		tags = handleURLTag(m.vu.Context(), m.mi, url, tags)
 	}
 	if state.Options.SystemTags.Has(k6metrics.TagIP) {
 		tags = tags.With("ip", ipAddress)
@@ -278,6 +289,22 @@ func (m *NetworkManager) emitResponseMetrics(resp *Response, req *Request) {
 	}
 }
 
+// handleURLTag will check if the url tag needs to be grouped by testing
+// against user supplied regex. If there's a match a user supplied name will
+// be used instead of the url for the url tag, otherwise the url will be used.
+func handleURLTag(ctx context.Context, mi metricInterceptor, url string, tags *k6metrics.TagSet) *k6metrics.TagSet {
+	if newTagName, urlMatched := mi.urlTagName(ctx, url); urlMatched {
+		tags = tags.With("url", newTagName)
+		tags = tags.With("name", newTagName)
+		return tags
+	}
+
+	tags = tags.With("url", url)
+	tags = tags.With("name", url)
+
+	return tags
+}
+
 func (m *NetworkManager) handleRequestRedirect(req *Request, redirectResponse *network.Response, timestamp *cdp.MonotonicTime) {
 	resp := NewHTTPResponse(m.ctx, req, redirectResponse, timestamp)
 	req.responseMu.Lock()

common/network_manager_test.go

@@ -209,6 +209,12 @@ func TestOnRequestPausedBlockedIPs(t *testing.T) {
 	}
 }
 
+type MetricInterceptorMock struct{}
+
+func (m *MetricInterceptorMock) urlTagName(ctx context.Context, urlTag string) (string, bool) {
+	return "", false
+}
+
 func TestNetworkManagerEmitRequestResponseMetricsTimingSkew(t *testing.T) {
 	t.Parallel()
 
@@ -271,7 +277,7 @@ func TestNetworkManagerEmitRequestResponseMetricsTimingSkew(t *testing.T) {
 
 			var (
 				vu = k6test.NewVU(t)
-				nm = &NetworkManager{ctx: vu.Context(), vu: vu, customMetrics: k6m}
+				nm = &NetworkManager{ctx: vu.Context(), vu: vu, customMetrics: k6m, mi: &MetricInterceptorMock{}}
 			)
 			vu.ActivateVU()