test: resource spans

Author: AbhiPrasad

packages/tracing/src/browser/metrics.ts

@@ -212,10 +212,17 @@ function addMeasureSpans(
   return measureStartTimestamp;
 }
 
+export interface ResourceEntry extends Record<string, unknown> {
+  initiatorType?: string;
+  transferSize?: number;
+  encodedBodySize?: number;
+  decodedBodySize?: number;
+}
+
 /** Create resource related spans */
-function addResourceSpans(
+export function addResourceSpans(
   transaction: Transaction,
-  entry: Record<string, unknown>,
+  entry: ResourceEntry,
   resourceName: string,
   startTime: number,
   duration: number,
@@ -227,15 +234,15 @@ function addResourceSpans(
     return undefined;
   }
 
-  const tags: Record<string, string> = {};
+  const data: Record<string, any> = {};
   if (entry.transferSize) {
-    tags.transferSize = (entry.transferSize as number).toString();
+    data.transferSize = entry.transferSize;
   }
   if (entry.encodedBodySize) {
-    tags.encodedBodySize = (entry.encodedBodySize as number).toString();
+    data.encodedBodySize = entry.encodedBodySize;
   }
   if (entry.decodedBodySize) {
-    tags.decodedBodySize = (entry.decodedBodySize as number).toString();
+    data.decodedBodySize = entry.decodedBodySize;
   }
 
   const startTimestamp = timeOrigin + startTime;
@@ -246,7 +253,7 @@ function addResourceSpans(
     endTimestamp,
     op: entry.initiatorType && entry.initiatorType !== '' ? `resource.${entry.initiatorType}` : 'resource',
     startTimestamp,
-    tags,
+    data,
   });
 
   return endTimestamp;

packages/tracing/test/browser/metrics.test.ts

@@ -1,5 +1,5 @@
 import { Span, Transaction } from '../../src';
-import { _startChild } from '../../src/browser/metrics';
+import { _startChild, addResourceSpans, ResourceEntry } from '../../src/browser/metrics';
 
 describe('_startChild()', () => {
   it('creates a span with given properties', () => {
@@ -38,3 +38,108 @@ describe('_startChild()', () => {
     expect(transaction.startTimestamp).toEqual(123);
   });
 });
+
+describe('addResourceSpans', () => {
+  const transaction = new Transaction({ name: 'hello' });
+  beforeEach(() => {
+    transaction.startChild = jest.fn();
+  });
+
+  // We already track xhr, we don't need to use
+  it('does not create spans for xmlhttprequest', () => {
+    const entry: ResourceEntry = {
+      initiatorType: 'xmlhttprequest',
+      transferSize: 256,
+      encodedBodySize: 256,
+      decodedBodySize: 256,
+    };
+    addResourceSpans(transaction, entry, '/assets/to/me', 123, 456, 100);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(transaction.startChild).toHaveBeenCalledTimes(0);
+  });
+
+  it('does not create spans for fetch', () => {
+    const entry: ResourceEntry = {
+      initiatorType: 'fetch',
+      transferSize: 256,
+      encodedBodySize: 256,
+      decodedBodySize: 256,
+    };
+    addResourceSpans(transaction, entry, '/assets/to/me', 123, 456, 100);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(transaction.startChild).toHaveBeenCalledTimes(0);
+  });
+
+  it('creates spans for resource spans', () => {
+    const entry: ResourceEntry = {
+      initiatorType: 'css',
+      transferSize: 256,
+      encodedBodySize: 456,
+      decodedBodySize: 593,
+    };
+
+    const timeOrigin = 100;
+    const startTime = 23;
+    const duration = 356;
+
+    const endTimestamp = addResourceSpans(transaction, entry, '/assets/to/css', startTime, duration, timeOrigin);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(transaction.startChild).toHaveBeenCalledTimes(1);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(transaction.startChild).toHaveBeenLastCalledWith({
+      data: {
+        decodedBodySize: entry.decodedBodySize,
+        encodedBodySize: entry.encodedBodySize,
+        transferSize: entry.transferSize,
+      },
+      description: '/assets/to/css',
+      endTimestamp: timeOrigin + startTime + duration,
+      op: 'resource.css',
+      startTimestamp: timeOrigin + startTime,
+    });
+
+    expect(endTimestamp).toBe(timeOrigin + startTime + duration);
+  });
+
+  it('creates a variety of resource spans', () => {
+    const table = [
+      {
+        initiatorType: undefined,
+        op: 'resource',
+      },
+      {
+        initiatorType: '',
+        op: 'resource',
+      },
+      {
+        initiatorType: 'css',
+        op: 'resource.css',
+      },
+      {
+        initiatorType: 'image',
+        op: 'resource.image',
+      },
+      {
+        initiatorType: 'script',
+        op: 'resource.script',
+      },
+    ];
+
+    for (const { initiatorType, op } of table) {
+      const entry: ResourceEntry = {
+        initiatorType,
+      };
+      addResourceSpans(transaction, entry, '/assets/to/me', 123, 234, 465);
+
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      expect(transaction.startChild).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          op,
+        }),
+      );
+    }
+  });
+});