fix(metrics): Check for cls entry sources (#3775)

AbhiPrasad · web-flow · commit c95d0581dc2b · 2021-07-05T12:11:46.000Z
The LayoutShift.sources field may not exist in certain browsers, even if the LayoutShift API is there. This PR patches logic that adds CLS data to make sure that `._clsEntry.sources` exists. Ref: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
diff --git a/packages/tracing/src/browser/metrics.ts b/packages/tracing/src/browser/metrics.ts
@@ -214,7 +214,8 @@ export class MetricsInstrumentation {
       transaction.setTag('lcp.size', this._lcpEntry.size);
     }
 
-    if (this._clsEntry) {
+    // See: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
+    if (this._clsEntry && this._clsEntry.sources) {
       logger.log('[Measurements] Adding CLS Data');
       this._clsEntry.sources.map((source, index) =>
         transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),

Original file line number	Diff line number	Diff line change
`@@ -214,7 +214,8 @@ export class MetricsInstrumentation {`
`214`	`214`	`transaction.setTag('lcp.size', this._lcpEntry.size);`
`215`	`215`	`}`
`216`	`216`
`217`		`- if (this._clsEntry) {`
	`217`	`+ // See: https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift`
	`218`	`+ if (this._clsEntry && this._clsEntry.sources) {`
`218`	`219`	`logger.log('[Measurements] Adding CLS Data');`
`219`	`220`	`this._clsEntry.sources.map((source, index) =>`
`220`	`221`	transaction.setTag(`cls.source.${index + 1}`, htmlTreeAsString(source.node)),