fix: rename metadata to attributes

Author: niieani

src/stories/mockComponents/App.tsx

@@ -17,18 +17,17 @@ import {
   NavItemText,
 } from '@zendeskgarden/react-chrome'
 import { PALETTE } from '@zendeskgarden/react-theming'
-
 import { ReactComponent as MenuTrayIcon } from '@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg'
 import { ReactComponent as PersonIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg'
+import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/26/arrow-right-left.svg'
 import { ReactComponent as ProductIcon } from '@zendeskgarden/svg-icons/src/26/garden.svg'
 import { ReactComponent as HomeIcon } from '@zendeskgarden/svg-icons/src/26/home-fill.svg'
-import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/26/arrow-right-left.svg'
 import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/26/zendesk.svg'
-import { TicketList } from './TicketList'
-import { TicketView } from './TicketView'
+import type { Operation } from '../../v2/operation'
 import { mockTickets } from './mockTickets'
 import { operationManager } from './operationManager'
-import type { Operation } from '../../v2/operation'
+import { TicketList } from './TicketList'
+import { TicketView } from './TicketView'
 
 export const App: React.FC = () => {
   const [selectedTicketId, setSelectedTicketId] = useState<number | null>(null)
@@ -45,15 +44,15 @@ export const App: React.FC = () => {
       operationName: `ticket-activation`,
       track: [
         {
-          match: { type: 'component-unmount', metadata: { ticketId: id } },
+          match: { type: 'component-unmount', attributes: { ticketId: id } },
           interruptWhenSeen: true,
         },
         {
-          match: { metadata: { ticketId: id } },
-          debounceEndWhenSeen: { debounceBy: 1000 },
+          match: { attributes: { ticketId: id } },
+          debounceEndWhenSeen: { debounceBy: 1_000 },
         },
         {
-          match: { metadata: { ticketId: id, visibleState: 'complete' } },
+          match: { attributes: { ticketId: id, visibleState: 'complete' } },
           requiredToEnd: true,
         },
       ],

src/stories/mockComponents/TicketView.tsx

@@ -36,7 +36,7 @@ export const TicketView: React.FC<TicketViewProps> = ({
 }) => {
   useCaptureRenderBeaconTask({
     componentName: 'TicketView',
-    metadata: { ticketId, loading: !cached },
+    attributes: { ticketId, loading: !cached },
     visibleState: cached ? VISIBLE_STATE.COMPLETE : VISIBLE_STATE.LOADING,
     operationManager,
   })

src/v2/constants.ts

@@ -45,4 +45,4 @@ export const DEFAULT_OBSERVED_ENTRY_TYPES = [
 ]
 
 /** when present on 'detail' of a performance measure/mark, it will ignore that event */
-export const SKIP_PROCESSING = Symbol.for('SKIP_PROCESSING')
+export const SKIP_PROCESSING = '__SKIP_PROCESSING__'

src/v2/defaultEventProcessor.ts

@@ -15,17 +15,17 @@ export const defaultEventProcessor: EventProcessor = (
   }
 
   const detail = typeof entry.detail === 'object' && entry.detail
-  const existingMetadata =
-    'metadata' in entry && typeof entry.metadata === 'object'
-      ? entry.metadata
+  const existingAttributes =
+    'attributes' in entry && typeof entry.attributes === 'object'
+      ? entry.attributes
       : {}
-  const metadata = detail
-    ? { ...detail, ...existingMetadata }
-    : existingMetadata
+  const attributes = detail
+    ? { ...detail, ...existingAttributes }
+    : existingAttributes
 
   const inputEvent = entry as InputEvent
 
-  inputEvent.metadata = metadata
+  inputEvent.attributes = attributes
 
   if (!('operations' in entry) || typeof entry.operations !== 'object') {
     inputEvent.operations = {}
@@ -43,14 +43,14 @@ export const defaultEventProcessor: EventProcessor = (
   if (entry.entryType === 'resource' || entry.entryType === 'navigation') {
     const { commonUrl, query, hash } = getCommonUrlForTracing(entry.name)
     commonName = commonUrl
-    metadata.resourceQuery = query
-    metadata.resourceHash = hash
+    attributes.resourceQuery = query
+    attributes.resourceHash = hash
 
     if (entry.entryType === 'resource') {
       const resource =
-        metadata.resource &&
-        typeof metadata.resource === 'object' &&
-        metadata.resource
+        attributes.resource &&
+        typeof attributes.resource === 'object' &&
+        attributes.resource
       const resourceType =
         resource && typeof resource.type === 'string' && resource.type
       const statusCode =

src/v2/element.tsx

@@ -9,14 +9,12 @@ const visuallyHiddenButRenderable: React.CSSProperties = {
   pointerEvents: 'none',
 } as const
 
-export const TimingComponent = React.memo(({ name }: { name: string }) => {
-  return (
-    <p
-      // @ts-ignore
-      elementtiming={name}
-      style={visuallyHiddenButRenderable}
-    >
-      &nbsp;
-    </p>
-  )
-})
+export const TimingComponent = React.memo(({ name }: { name: string }) => (
+  <p
+    // @ts-expect-error missing elementtiming from React types
+    elementtiming={name}
+    style={visuallyHiddenButRenderable}
+  >
+    &nbsp;
+  </p>
+))

src/v2/hooks.ts

@@ -4,18 +4,18 @@ import { useEffect, useRef } from 'react'
 import { useOnComponentUnmount } from '../ErrorBoundary'
 import { VISIBLE_STATE } from './constants'
 import { OperationManager } from './operation'
-import type { InputEvent, Metadata, OperationDefinition } from './types'
+import type { Attributes, InputEvent, OperationDefinition } from './types'
 
 // TODO: make a getUseCaptureRenderBeaconTask, and provide OperationManager there
 export const useCaptureRenderBeaconTask = ({
   componentName,
-  metadata: meta,
+  attributes: attr,
   error,
   visibleState = VISIBLE_STATE.COMPLETE,
   operationManager,
 }: {
   componentName: string
-  metadata: Record<string, unknown>
+  attributes: Record<string, unknown>
   error?: object
   /**
    * what is the state of the UX that the user sees as part of this render?
@@ -25,18 +25,18 @@ export const useCaptureRenderBeaconTask = ({
   operationManager: OperationManager
 }) => {
   const renderCountRef = useRef(0)
-  const metadata: Metadata = {
+  const attributes: Attributes = {
     visibleState: error ? VISIBLE_STATE.ERROR : visibleState,
     renderCount: renderCountRef.current,
-    ...meta,
+    ...attr,
   }
   renderCountRef.current += 1
   const renderStartTask = {
     entryType: error ? 'component-render-error' : 'component-render-start',
     name: componentName,
     startTime: operationManager.performance.now(),
     duration: 0,
-    metadata,
+    attributes,
   } satisfies InputEvent
 
   const nextStateObj = { visibleState, startTime: renderStartTask.startTime }
@@ -49,9 +49,9 @@ export const useCaptureRenderBeaconTask = ({
       name: componentName,
       startTime: previousState.startTime,
       duration: renderStartTask.startTime - previousState.startTime,
-      metadata: {
+      attributes: {
         previousVisibleState: previousState.visibleState,
-        ...metadata,
+        ...attributes,
       },
     } satisfies InputEvent)
   }
@@ -84,7 +84,7 @@ export const useCaptureRenderBeaconTask = ({
       name: componentName,
       startTime: renderStartTask.startTime,
       duration: operationManager.performance.now() - renderStartTask.startTime,
-      metadata,
+      attributes,
     } satisfies InputEvent)
   })
 
@@ -97,7 +97,7 @@ export const useCaptureRenderBeaconTask = ({
         name: componentName,
         startTime: operationManager.performance.now(),
         duration: 0,
-        metadata,
+        attributes,
         event: {
           ...(errorBoundaryMetadata
             ? {
@@ -121,7 +121,7 @@ export const useCaptureRenderBeaconTask = ({
 
 // records until all required render beacons are settled
 // (and until the page is interactive? or maybe that's the central manager's job)
-export const useCaptureOperationTiming = (
+export const useCaptureRenderTask = (
   operationDefinition: OperationDefinition & {
     // the operation will start once 'active' is true (or undefined)
     active?: boolean
@@ -139,8 +139,8 @@ export const useCaptureOperationTiming = (
   // starts an operation when:
   // - 'active' is true,
   // - all requiredToStart timings have been seen
-  // all metadata from required tasks is merged into the operation metadata
-  // the resulting task will have metadata that explains why it ended:
+  // all attributes from required tasks is merged into the operation attributes
+  // the resulting task will have attributes that explains why it ended:
   // - 'interrupted' if an interruptWhenSeen task was seen
   // - 'timeout' if the timeout was reached
   // - 'error'

src/v2/operation.test.ts

@@ -1,5 +1,4 @@
 /* eslint-disable jest/no-conditional-in-test */
-import { DEFAULT_DEBOUNCE_MS } from '../constants'
 import ticketActivationFixtureData from './__fixtures__/ticket-activation-select-tab-1.json'
 import { DEFAULT_DEBOUNCE_TIME, SKIP_PROCESSING } from './constants'
 import { type Operation, OperationManager } from './operation'
@@ -26,7 +25,7 @@ describe('operation tracking', () => {
         duration: operation.durationTillInteractive || operation.duration,
         detail: {
           [SKIP_PROCESSING]: true,
-          metadata: operation.metadata,
+          attributes: operation.attributes,
           id: operation.id,
           name: operation.name,
           events: operation.getEvents().map((event) => ({
@@ -780,7 +779,7 @@ describe('operation tracking', () => {
             requiredToStart: true,
           },
           {
-            match: { metadata: { ticketId: id } },
+            match: { attributes: { ticketId: id } },
             debounceEndWhenSeen: { debounceBy },
           },
           {
@@ -810,7 +809,7 @@ describe('operation tracking', () => {
             name: `ticket-${state}`,
             startTime: time,
             duration: 0,
-            metadata: { ticketId: id },
+            attributes: { ticketId: id },
           },
         ])
         jest.advanceTimersByTime(Math.max(0, time - getTimeNow()))
@@ -846,29 +845,29 @@ describe('operation tracking', () => {
     })
 
     it(`correctly captures the operation's duration`, () => {
-      const id = '13024'
+      const ticketId = '13024'
       const operationName = 'ticket.activation'
       const lastEventRelativeEndTime = 1_706.599_999_999_627_5
       const operationDefinition: OperationDefinition = {
         operationName,
         interruptSelf: true,
-        metadata: { ticketId: id },
+        attributes: { ticketId },
         waitUntilInteractive: true,
         startTime: ticketActivationFixtureData.startTime,
         timeout: 60_000,
         track: [
-          // debounce on anything that has ticketId metadata:
-          { match: { metadata: { ticketId: id } } },
+          // debounce on anything that has ticketId attributes:
+          { match: { attributes: { ticketId } } },
           // any resource fetch should debounce the end of the operation:
           { match: { type: 'resource' } },
           // debounce on element timing sentinels:
-          { match: { type: 'element', name: `ticket_workspace/${id}` } },
-          { match: { type: 'element', name: `omnilog/${id}` } },
+          { match: { type: 'element', name: `ticket_workspace/${ticketId}` } },
+          { match: { type: 'element', name: `omnilog/${ticketId}` } },
           // OmniLog must be rendered in 'complete' state to end the operation:
           {
             match: {
               name: 'OmniLog',
-              metadata: { ticketId: id, visibleState: 'complete' },
+              attributes: { ticketId, visibleState: 'complete' },
             },
             requiredToEnd: true,
           },