Truncate long element names for OOB core web vital metrics

.changeset/strong-avocados-prove.md

@@ -0,0 +1,5 @@
+---
+'@firebase/performance': patch
+---
+
+Fixed errors thrown when capturing long target element names for the out-of-the-box metrics.

packages/performance/src/resources/trace.test.ts

@@ -306,4 +306,37 @@ describe('Firebase Performance > trace', () => {
       expect(trace.getAttribute('stage')).to.equal('beginning');
     });
   });
+
+  describe('#addWebVitalMetric', () => {
+    it('has correctly scaled metric', () => {
+      Trace.addWebVitalMetric(trace, 'metric', 'attributeName', {
+        value: 0.5,
+        elementAttribution: 'test'
+      });
+
+      expect(trace.getMetric('metric') === 500);
+    });
+
+    it('has correct attribute', () => {
+      Trace.addWebVitalMetric(trace, 'metric', 'attributeName', {
+        value: 0.5,
+        elementAttribution: 'test'
+      });
+
+      expect(trace.getAttribute('attributeName') === 'test');
+    });
+
+    it('correctly truncates long attribute names', () => {
+      Trace.addWebVitalMetric(trace, 'metric', 'attributeName', {
+        value: 0.5,
+        elementAttribution:
+          'html>body>main>p>button.my_button_class.really_long_class_name_that_is_above_100_characters.another_long_class_name'
+      });
+
+      expect(
+        trace.getAttribute('attributeName') ===
+          'html>body>main>p>button.my_button_class.really_long_class_name_that_is_above_100_characters.another_'
+      );
+    });
+  });
 });

packages/performance/src/resources/trace.ts

@@ -34,6 +34,7 @@ import { Api } from '../services/api_service';
 import { logTrace, flushLogs } from '../services/perf_logger';
 import { ERROR_FACTORY, ErrorCode } from '../utils/errors';
 import {
+  MAX_ATTRIBUTE_VALUE_LENGTH,
   isValidCustomAttributeName,
   isValidCustomAttributeValue
 } from '../utils/attributes_utils';
@@ -382,7 +383,14 @@ export class Trace implements PerformanceTrace {
     if (metric) {
       trace.putMetric(metricKey, Math.floor(metric.value * 1000));
       if (metric.elementAttribution) {
-        trace.putAttribute(attributeKey, metric.elementAttribution);
+        if (metric.elementAttribution.length > MAX_ATTRIBUTE_VALUE_LENGTH) {
+          trace.putAttribute(
+            attributeKey,
+            metric.elementAttribution.substring(0, MAX_ATTRIBUTE_VALUE_LENGTH)
+          );
+        } else {
+          trace.putAttribute(attributeKey, metric.elementAttribution);
+        }
       }
     }
   }

packages/performance/src/utils/attributes_utils.ts

@@ -70,7 +70,7 @@ interface NavigatorWithConnection extends Navigator {
 const RESERVED_ATTRIBUTE_PREFIXES = ['firebase_', 'google_', 'ga_'];
 const ATTRIBUTE_FORMAT_REGEX = new RegExp('^[a-zA-Z]\\w*$');
 const MAX_ATTRIBUTE_NAME_LENGTH = 40;
-const MAX_ATTRIBUTE_VALUE_LENGTH = 100;
+export const MAX_ATTRIBUTE_VALUE_LENGTH = 100;
 
 export function getServiceWorkerStatus(): ServiceWorkerStatus {
   const navigator = Api.getInstance().navigator;