Some clients require visibility beyond overall page load times—they want to know how each tab performs individually. Since tab load duration is different from page load metrics in Application Insights, we need a way to capture this detail without compromising UI responsiveness.
To address this, I’ve implemented a telemetry enhancement that leverages the navigator.sendBeacon() API to asynchronously log tab-level metrics into Application Insights.
✨ Why this matters:
Unlike synchronous logging methods, sendBeacon ensures telemetry is dispatched reliably—even during navigation or unload events—without affecting page load performance or user experience.
📌 Implementation Highlights:
Trigger: Tab load timer starts on TabStateChange or OnLoad, ends on full render.
Telemetry Dispatch: Compact payload sent via navigator.sendBeacon().
Performance Benefit: Non-blocking, thread-safe, ideal for unload scenarios.
Integration: Custom endpoint feeds into Application Insights for dashboards and anomaly detection.
🧪 Sample Code Snippet:
`javascript
function logTabLoad(tabName, durationMs, userId, sessionId) {
const payload = {
name: "Microsoft.ApplicationInsights.Event",
time: new Date().toISOString(),
iKey: "<YOUR-INSTRUMENTATION-KEY>",
data: {
baseType: "EventData",
baseData: {
name: "TabLoad",
properties: {
tabName: tabName,
durationMs: durationMs,
userId: userId,
sessionId: sessionId
}
}
}
};
const endpoint = "https://lnkd.in/gXBcy-Zn";
navigator.sendBeacon(endpoint, JSON.stringify(payload));
}
// Example usage
logTabLoad("Account Details", 1200, "user123", "session456");
`
This approach aligns with our goal of maintaining UI elegance while deepening visibility into lifecycle performance.
Curious how do you handle specific indepth telemetry in your Applications. Let's share with each other to improve our knowledge on different concepts. Thanks!
#Dynamics365 #CRMPerformance #ApplicationInsights #SendBeacon #Telemetry #PowerPlatform #Observability #DigitalExperience #TechLeadership
