Disabling ApplicationInsights' deprecated unload event listener in Angular

When using default Application Insights on your Angular page, Chrome Lighthouse flags unload-event listeners as deprecated (they block the back/forward cache and degrade UX12). In this post we'll explore why this matters, why unload is deprecated, what the ApplicationInsights client does by default and how to use it properly Why does this matter? You might ask yourself: why does this matter? To be frank: it probably doesn't. It does not (yet) affect your (clients) browser experience. It could matter if you (or your clients) are caring for google lighthouses numbers regarding best practices. Second, it also shows that you are aware of the deprecation issue and are actively working to a solution. Why “Unload” Is Deprecated Browsers are moving away from the legacy unload event because it breaks the back/forward cache (bfcache), an in-memory snapshot that makes “back”/“forward” navigations nearly instant. Any page with an unload listener is ineligible for bfcache, slowing down users when they navigate away and then return13. Chrome’s Deprecation Timeline Starting Chrome 115 you can opt out of delivering unload to handlers; Chrome 117+ will default-disable them on all sites, with full removal in the next few milestones45. Lighthouse Audit The “Deprecated feature used: Unload event listeners are deprecated and will be removed” warning lives in Lighthouse’s Best Practices category under the no-unload-listeners audit3. ApplicationInsights’ Default Behavior By default, the ApplicationInsights JavaScript SDK attaches to several page-lifecycle events—including unload, beforeunload, pagehide and visibilitychange—so it can flush telemetry exactly when the user leaves6. This is great for reliability but trips Lighthouse’s deprecated-API check: Deprecated feature used Unload event listeners are deprecated and will be removed. Suppressing Just the Unload Hook Since v3.0.3 the SDK supports an almost-undocumented config field, disablePageUnloadEvents?: string[], where you list the event names you do not want hooked6. To disable only the "unload" listener while preserving pagehide and visibilitychange, initialize like this: import { ApplicationInsights } from "@microsoft/applicationinsights-web"; const appInsights = new ApplicationInsights({ config: { connectionString: "", // …other settings… disablePageUnloadEvents: ["unload"] } }); appInsights.loadAppInsights(); With that in place, Lighthouse will no longer complain about unload listeners, and your pages remain eligible for bfcache and near-instant navigations12. Verifying Your Fix Rerun Lighthouse and confirm the “Unload event listeners” warning has disappeared. In Chrome DevTools, go to Application → Back/forward cache, click Test back/forward cache, and ensure your page can be cached (no unload handlers present)4. Optionally, inspect Issues in DevTools for any residual warnings. Balancing Telemetry & Best Practices If you still need to capture last-minute metrics on page exit, use the bfcache-compatible events: pagehide fires whenever a page is about to be hidden or cached. visibilitychange (when document.hidden === true) fires reliably across modern browsers and mobile devices78. These events let you flush critical data without slipping back into deprecated territory. Did this tip help you keep your scores green? Drop a comment below

Apr 29, 2025 - 14:48

Disabling ApplicationInsights' deprecated unload event listener in Angular

When using default Application Insights on your Angular page, Chrome Lighthouse flags unload-event listeners as deprecated (they block the back/forward cache and degrade UX¹²). In this post we'll explore why this matters, why unload is deprecated, what the ApplicationInsights client does by default and how to use it properly

Why does this matter?

You might ask yourself: why does this matter?
To be frank: it probably doesn't. It does not (yet) affect your (clients) browser experience.
It could matter if you (or your clients) are caring for google lighthouses numbers regarding best practices.
Second, it also shows that you are aware of the deprecation issue and are actively working to a solution.

Why “Unload” Is Deprecated

Browsers are moving away from the legacy unload event because it breaks the back/forward cache (bfcache), an in-memory snapshot that makes “back”/“forward” navigations nearly instant. Any page with an unload listener is ineligible for bfcache, slowing down users when they navigate away and then return¹³.

Chrome’s Deprecation Timeline Starting Chrome 115 you can opt out of delivering unload to handlers; Chrome 117+ will default-disable them on all sites, with full removal in the next few milestones⁴⁵.
Lighthouse Audit The “Deprecated feature used: Unload event listeners are deprecated and will be removed” warning lives in Lighthouse’s Best Practices category under the no-unload-listeners audit³.

ApplicationInsights’ Default Behavior

By default, the ApplicationInsights JavaScript SDK attaches to several page-lifecycle events—including unload, beforeunload, pagehide and visibilitychange—so it can flush telemetry exactly when the user leaves⁶. This is great for reliability but trips Lighthouse’s deprecated-API check:

Deprecated feature used

Unload event listeners are deprecated and will be removed.

Suppressing Just the Unload Hook

Since v3.0.3 the SDK supports an almost-undocumented config field, disablePageUnloadEvents?: string[], where you list the event names you do not want hooked⁶. To disable only the "unload" listener while preserving pagehide and visibilitychange, initialize like this:

import { ApplicationInsights } from "@microsoft/applicationinsights-web";

const appInsights = new ApplicationInsights({
  config: {
    connectionString: "",
    // …other settings…
    disablePageUnloadEvents: ["unload"]
  }
});
appInsights.loadAppInsights();

With that in place, Lighthouse will no longer complain about unload listeners, and your pages remain eligible for bfcache and near-instant navigations¹².

Verifying Your Fix

Rerun Lighthouse and confirm the “Unload event listeners” warning has disappeared.
In Chrome DevTools, go to Application → Back/forward cache, click Test back/forward cache, and ensure your page can be cached (no unload handlers present)⁴.
Optionally, inspect Issues in DevTools for any residual warnings.

Balancing Telemetry & Best Practices

If you still need to capture last-minute metrics on page exit, use the bfcache-compatible events:

pagehide fires whenever a page is about to be hidden or cached.
visibilitychange (when document.hidden === true) fires reliably across modern browsers and mobile devices⁷⁸.

These events let you flush critical data without slipping back into deprecated territory.

Did this tip help you keep your scores green? Drop a comment below