Safari issue: Failed to initialize NumberFormat since used feature is not supported in the linked ICU version

Bug Description

There have been reports of the below dashboard error since 1.31.0 was released. This appears when accessing the primary Site Kit dashboard. Failed to initialize NumberFormat since used feature is not supported in the linked ICU version

One user has reported this only occurs in a Safari browser, troubleshooting ongoing with the other.

Failed to initialize NumberFormat since used feature is not supported in the linked ICU version

    in DataBlock
    in div
    in div
    in section
    in LegacySearchConsoleDashboardWidgetOverview
    in withData(LegacySearchConsoleDashboardWidgetOverview)
    in Unknown
    in WithSelect(withData(LegacySearchConsoleDashboardWidgetOverview))
    in div
    in Layout
    in div
    in div
    in div
    in div
    in GoogleSitekitSearchConsoleDashboardWidget
    in FilteredComponent
    in WithFilters(ModuleApp)
    in ModuleApp
    in GoogleSitekitModule
    in RestoreSnapshots
    in ErrorHandler
    in Root

Failed to initialize NumberFormat since used feature is not supported in the linked ICU version
in DataBlock
in div
in LegacySearchConsoleDashboardWidgetTopLevel
in withData(LegacySearchConsoleDashboardWidgetTopLevel)
in Unknown
in WithSelect(withData(LegacySearchConsoleDashboardWidgetTopLevel))
in FilteredComponent
in FilteredComponent
in WithFilters(LegacyDashboardSearchFunnelInner)
in div
in div
in div
in Layout
in div
in LegacyDashboardSearchFunnel
in FilteredComponent
in FilteredComponent
in FilteredComponent
in WithFilters(LegacyDashboardModule)
in div
in Row
in div
in Grid
in div
in DashboardApp
in GoogleSitekitDashboard
in RestoreSnapshots
in ErrorHandler
in Root

Impacted users:

• https://wordpress.org/support/topic/google-site-kit-issue/ | Open | SH info provided
• https://wordpress.org/support/topic/site-kit-encountered-an-error-31/ | Open| SH info provided | **MacOS 10.14.6 **
• https://wordpress.org/support/topic/failed-to-initialize-numberformat/ | Open | SH info provided | MacOS Mojave, Safari 14.1
• https://wordpress.org/support/topic/google-site-kit-encountered-an-error/ | Open | SH info provided
• https://wordpress.org/support/topic/analytics-issue-after-connecting/ Open | SH info provided MacOS Mojave 10.14.6 | Safari 14.1.1
• https://wordpress.org/support/topic/error-failed-to-initialize-numberformat-in-dashboard/ | Open | SH info provided

Additional Context

• Occurred since 1.31.0
• Unable to recreate in support site (Safari 14 on Mac - Big Sur). Tested via Browserstack
• Site Health information provided by both users
• No matching plugins
• One user reported the issue no longer occurs after using the Health Check & Troubleshooting plugin and then exiting troubleshooting mode.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• NumberFormat should not fail to initialize due to unsupported features in supported browsers, specifically Safari 14.1 on MacOS Mojave
• Other similar classes used under Intl.* should also be checked for similar compatibility errors

Implementation Brief

• In /assets/js/util/i18n.js export const numberFormat()
• Wrap Intl.NumberFormat in a try/catch, if an error is thrown we call our new logging function (defined further in the IB) with a message: Unable to: new Intl.NumberFormat( ${ JSON.stringify( locale ) }, ${ JSON.stringify( formatOptions ) } ).format( ${ number } );
• Remove the following formatOption key/values if they exist:

{
	currencyDisplay: 'narrow',
	currencySign: 'accounting',
	style: 'unit',
}

Remove these formatOption keys irrespective of value: [ 'signDisplay', 'compactDisplay' ]

• Run Intl.NumberFormat again with the smaller subset of formatOptions, also in a try/catch if that fails again, fallback to just calling: new Intl.NumberFormat( locale ).format( num );

• File location: https://github.com/google/site-kit-wp/blob/9f1b51bd491f249c30752980203eb7971bdfcfb6/assets/js/util/i18n.js#L289

• Create a logFunction logOnce( message ), that is memoized, such that it calls console.warn on a given message only one time, see: https://github.com/google/site-kit-wp/issues/3255#issuecomment-867597440 for an example.

• WIP Branch https://github.com/google/site-kit-wp/pull/3620.

Test Coverage

• Jest tests can be updated to not expect a console.warn(), however we can’t run our tooling in a specific version of a specific browser to ensure it isn’t broken.

Visual Regression Changes

• N/A

QA Brief

• Confirm you’re on an affected browser/OS by running either of these two in your console:
• new Intl.NumberFormat('en-US', {style: "percent", signDisplay: "never", maximumFractionDigits: 1}).format(1.234)
• new Intl.NumberFormat( "en-US", {"unitDisplay":"narrow","style":"unit","unit":"second"} ).format( 1 );
• With an affected browser open your console and browse to the main dashboard with analytics connected /wp-admin/admin.php?page=googlesitekit-dashboard
• Confirm you have the at least one warning in your console related to Intl.NumberFormat, similar to the followingUnable to: new Intl.NumberFormat( "en-US", {"style":"percent","signDisplay":"never","maximumFractionDigits":1} ).format( 0.09 );

Changelog entry

• Fix a bug related to localized number formatting for browsers that have limited support for formatting options.