Tenant-Wide Telemetry Application Customizer

[ValerasNarbutas]

Tenant-Wide Telemetry Application Customizer

---

Sample Description

I would like to build a new SPFx sample that demonstrates how to build a tenant-wide Application Customizer designed to provide centralized telemetry for a SharePoint Online tenant.

What the sample should demonstrate

1. Application Customizer (React) that runs on every modern page

   • Deployable tenant-wide via the App Catalog and the Tenant Wide Extensions list.
   • Uses skipFeatureDeployment: true so no per-site installation is needed.
   • Automatically loads on every modern site/page within the tenant (based on extension registration).

2. Telemetry Initialization Logic

   • Initializes a telemetry provider at page load:

     • Application Insights (connection string provided in component properties), OR
     • A configurable HTTP endpoint (Azure Function) to enable Event Grid / downstream processing.

   • Supports loading configuration from:

     • ClientSideComponentProperties
     • App catalog / tenant-wide extensions entry

3. Listening for Custom Events

   • The customizer listens for browser CustomEvents (e.g., spfx-telemetry) dispatched by SPFx components.

   • This allows other web parts/extensions to send data without embedding their own telemetry logic.

   • The sample should show how the Application Customizer listens with:

     window.addEventListener("spfx-telemetry", (e: CustomEvent) => {
       // handle telemetry payload
     });

4. Telemetry Payload Enrichment

   • The Application Customizer enriches telemetry with contextual data:

     • Tenant ID (if available)
     • Site URL
     • Page URL
     • User ID (hashed)
     • Timestamp
     • Any fields received from the event payload

   • Ensures all telemetry is consistent across all SPFx components.

5. Sending Telemetry to Backend

   • The sample should show two possible patterns:

     • Direct Application Insights (JS SDK)
     • HTTP POST to a custom backend (Azure Function)

   • Telemetry errors must never break page rendering.

6. Tenant-Wide Deployment

   • Demonstrates:

     • Using skipFeatureDeployment: true
     • How to register the Application Customizer in the Tenant Wide Extensions list
     • How to configure component properties (e.g., App Insights connection string JSON)

Why this sample is useful

Many enterprises deploy dozens of SPFx solutions across thousands of sites.
There is no out-of-the-box tenant-wide analytics mechanism for customizations.

This sample will show how to:

• Deploy one Application Customizer solution globally
• Initialize telemetry one time per page
• Allow any SPFx web part or extension to send telemetry via simple CustomEvents
• Centralize all event capture & enrichment

This pattern improves governance, modernization, and observability for large tenants.

Technology Stack

• SPFx Application Customizer (React)
• TypeScript telemetry service
• Application Insights (optional)
• HTTP telemetry endpoint (optional)
• Tenant Wide Extensions deployment

Expected Output

• One SPFx solution containing only the Application Customizer

• Telemetry service included within the solution

• Documentation for:

  • How to deploy tenant-wide
  • How to configure properties
  • How other components can dispatch events
  • Example payload format
  • Example KQL queries for Application Insights

SPFx version

1.21.1

Are you willing to help?

Yes

[ValerasNarbutas]

this can be assigned to me