feat: add team attribute to beacons

zendesk · Jan 24, 2025 · cad6384 · cad6384
1 parent cfbd0a9
commit cad6384
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/src/stories/mockComponentsv3/TicketView.tsx b/src/stories/mockComponentsv3/TicketView.tsx
@@ -36,6 +36,7 @@ export const TicketView: React.FC<TicketViewProps> = ({
 }) => {
   useBeacon({
     name: 'TicketView',
+    team: 'test',
     scope: { ticketId },
     renderedOutput: cached ? 'content' : 'loading',
     isIdle: cached,

diff --git a/src/v3/hooks.ts b/src/v3/hooks.ts
@@ -12,7 +12,7 @@ import type { ScopeValue, Timestamp } from './types'
 
 type MakeEntryInput<AllPossibleScopesT> = Omit<
   ComponentRenderSpan<AllPossibleScopesT>,
-  'startTime'
+  'startTime' | 'team'
 > & {
   startTime?: Timestamp
 }
@@ -40,17 +40,19 @@ export const generateUseBeacon =
     const renderCountRef = useRef(0)
     renderCountRef.current += 1
 
-    const { attributes, renderedOutput } = config
+    // For ease of use we accept `team` as a separate field in the config, but we need to merge it into the attributes
+    const { attributes: _attributes, team, ...remainingConfig } = config
+    const attributes = { ..._attributes, team }
 
     const status = config.error ? 'error' : 'ok'
 
     const isIdle =
       config.isIdle ??
-      (renderedOutput === 'content' || renderedOutput === 'error')
+      (config.renderedOutput === 'content' || config.renderedOutput === 'error')
 
     const renderStartTaskEntry: ComponentRenderSpan<AllPossibleScopesT> =
       makeEntry({
-        ...config,
+        ...remainingConfig,
         type: 'component-render-start',
         duration: 0,
         attributes,
@@ -68,7 +70,7 @@ export const generateUseBeacon =
     useEffect(() => {
       traceManager.processSpan(
         makeEntry({
-          ...config,
+          ...remainingConfig,
           startTime: renderStartRef.current!,
           type: 'component-render',
           duration: performance.now() - renderStartRef.current!.now,
@@ -85,7 +87,7 @@ export const generateUseBeacon =
     useOnComponentUnmount(
       (errorBoundaryMetadata) => {
         const unmountEntry = makeEntry({
-          ...config,
+          ...remainingConfig,
           type: 'component-unmount',
           attributes,
           error: errorBoundaryMetadata?.error,

diff --git a/src/v3/hooksTypes.ts b/src/v3/hooksTypes.ts
@@ -8,6 +8,7 @@ export interface BeaconConfig<AllPossibleScopesT> {
   name: string
   scope: ScopeOnASpan<AllPossibleScopesT>
   renderedOutput: RenderedOutput
+  team: string
   isIdle?: boolean
   attributes?: Attributes
   error?: Error

diff --git a/src/v3/spanTypes.ts b/src/v3/spanTypes.ts
@@ -115,7 +115,7 @@ export interface SpanBase<AllPossibleScopesT> {
 
 export interface ComponentRenderSpan<AllPossibleScopesT>
   extends Omit<SpanBase<AllPossibleScopesT>, 'scope' | 'attributes'>,
-    BeaconConfig<AllPossibleScopesT> {
+    Omit<BeaconConfig<AllPossibleScopesT>, 'team'> {
   type: ComponentLifecycleSpanType
   isIdle: boolean
   errorInfo?: ErrorInfo

diff --git a/src/v3/types.test-d.ts b/src/v3/types.test-d.ts
@@ -102,20 +102,23 @@ describe('type tests', () => {
     // valid beacon
     useBeacon({
       name: 'OmniLog',
+      team: 'test',
       renderedOutput: 'content',
       scope: { ticketId: '123' },
     })
 
     // valid beacon
     useBeacon({
       name: 'UserPage',
+      team: 'test',
       renderedOutput: 'content',
       scope: { userId: '123' },
     })
 
     // invalid
     useBeacon({
       name: 'UserPage',
+      team: 'test',
       renderedOutput: 'content',
       // @ts-expect-error invalid scope
       scope: { invalid: '123' },