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

[jamesozzie]

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.

Full error details below for 1 user

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

Full error for second user (slightly different - **_LegacySearchConsoleDashboardWidgetTopLevel_**)

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:

  site-kit-wp/assets/js/util/i18n.js

  Line 289 in 9f1b51b

  return new Intl.NumberFormat( locale, formatOptions ).format( number );

• Create a logFunction logOnce( message ), that is memoized, such that it calls console.warn on a given message only one time, see: Safari issue: Failed to initialize NumberFormat since used feature is not supported in the linked ICU version #3255 (comment) for an example.

• WIP Branch Allow numberFormat to degrade gracefully. #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.

[mxbclang]

Noting that another user suspects this is a Webkit/Safari issue.

[aegisdesign]

I get the error after re-installing 1.30 as well btw so possibly this is an issue introduced with Safari 14.1 and not the SiteKit 1.31 update. Safari 14.1 was installed on 27th April.

[adamsilverstein]

I was able to reproduce this using Safari 14.1 and the latest version of Site Kit. I didn't see the error on an older version of the plugin - I will try to isolate the version or commit that introduces the issue.

My trace was a bit different than reported above, possibly worth noting that the error appears related to the GoogleChart component:

A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

    in GoogleChart (created by Chart)
    in ContextProvider (created by Chart)
    in Chart (created by GoogleChartV2)
    in div (created by GoogleChartV2)
    in GoogleChartV2 (created by UserCountGraph)
    in div (created by UserCountGraph)
    in UserCountGraph (created by DashboardAllTrafficWidget)
    in div (created by Cell)
    in Cell (created by DashboardAllTrafficWidget)
    in div (created by Row)
    in Row (created by DashboardAllTrafficWidget)
    in div (created by Grid)
    in Grid (created by DashboardAllTrafficWidget)
    in div (created by Widget)
    in div (created by Widget)
    in Widget (created by WithWidgetSlug(Widget))
    in WithWidgetSlug(Widget) (created by DashboardAllTrafficWidget)
    in DashboardAllTrafficWidget (created by WhenAnalyticsActive(DashboardAllTrafficWidget))
    in WhenAnalyticsActive(DashboardAllTrafficWidget) (created by LegacyDashboardAllTraffic)
    in div (created by Layout)
    in Layout (created by LegacyDashboardAllTraffic)
    in div (created by Cell)
    in Cell (created by LegacyDashboardAllTraffic)
    in LegacyDashboardAllTraffic
    in FilteredComponent (created by FilteredComponent)
    in FilteredComponent (created by FilteredComponent)
    in FilteredComponent (created by FilteredComponent)
    in FilteredComponent (created by FilteredComponent)
    in FilteredComponent (created by WithFilters(LegacyDashboardModule))
    in WithFilters(LegacyDashboardModule) (created by DashboardApp)
    in div (created by Row)
    in Row (created by DashboardApp)
    in div (created by Grid)
    in Grid (created by DashboardApp)
    in div (created by DashboardApp)
    in DashboardApp (created by GoogleSitekitDashboard)
    in GoogleSitekitDashboard
    in RestoreSnapshots (created by Root)
    in ErrorHandler (created by Root)
    in Root

[jamesozzie]

Some additional insights provided by one user. With the issue only occurring with Safari the user pointed out one article which may contain additional information.

Setting time aside for testing tomorrow.

[jamesozzie]

Safari 14 (Big Sur) - Unable to recreate issue.
MasOC Catalina 13.1 - Unable to recreate issue.

Two sites tested with all services connected. All Site Kit tabs checked - Browserstack testing account

There was a potentically impacted bug which seems to have been resolved which may have impacted reporting:
https://bugs.webkit.org/show_bug.cgi?id=225344

@adamsilverstein Based on the localstorage issue as reported above do you think Site Kit users may have been impacted?

[aegisdesign]

fyi. There's a newer build of Safari 14.1 out today to address a WebKit exploit. Version 14.1 (14611.1.21.161.7)

I'm getting the same issue on this version as the previous version (ending 161.5)

https://www.macworld.co.uk/news/safari-webkit-exploit-update-3804296/

[jamesozzie]

@aegisdesign This latest 14.1 version isn't available on my test Browserstack account just yet but many thanks for the update.

@bethanylang @adamsilverstein I've added notes to the above after being unable to reproduce on my side via Browserstack. Escalating for further review.

[Hazlitte]

I've just been testing this in Safari 14.0.1 and then in the latest download of 14.1 (15611.1.21.161.7). I tested with releases 1.30, 1.31 and 1.32 and was unable to recreate the issue.

[jamesozzie]

Pending users facing this issue below:

• https://wordpress.org/support/topic/site-kit-encountered-an-error-31/: Italian it_IT | Issue remains although unknown Safari version (Also en for second user who responded in the thread - unknown if this still occurs with this user) | SH info
• https://wordpress.org/support/topic/google-site-kit-issue/ - English en_US | Unknown if the issue persists, awaiting response from user | **SH info within support topic **
• https://wordpress.org/support/topic/failed-to-initialize-numberformat/ - English en_US | Issue persists when switching languages | SH info

@aegisdesign Do you encounter the same issue with only the Site Kit plugin active or when switching languages temporarily? Using the Health Check & Troubleshooting plugin as per the steps in this support topic is a good way to eliminate a multi party conflict.

[aaemnnosttv]

Not sure if Safari uses this code or not but it seems the error may also be related to specific formatting options:
https://github.com/WebKit/WebKit/blob/9cb35748705901155cb6d83963671c791046c035/Source/JavaScriptCore/runtime/IntlNumberFormat.cpp#L550-L586

[mxbclang]

Another new report today with another slightly different message:

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

    in DataBlock
    in div
    in div
    in div
    in div
    in Widget
    in WithWidgetSlug(Widget)
    in DashboardSummaryWidget
    in WhenAdsenseActive(DashboardSummaryWidget)
    in WidgetRenderer
    in div
    in Cell
    in WidgetCellWrapper
    in div
    in Row
    in div
    in div
    in Grid
    in WidgetAreaRenderer
    in div
    in WidgetContextRenderer
    in DashboardApp
    in GoogleSitekitDashboard
    in RestoreSnapshots
    in ErrorHandler
    in Root

[aaemnnosttv]

@bethanylang I've taken another look at this and unfortunately I don't think we have enough information to track down the problem. It doesn't seem to be as simple as an incompatibility with a specific browser only but seems to be more specific to a combination of locale and data. Is there anyone who is able to consistently reproduce this that we can ask for more information?

[mxbclang]

@jamesozzie @abdullah1908 Do either of you have an open topic that you can work with more closely here to troubleshoot?

[jamesozzie]

@bethanylang I'm doing testing on this today to try and reproduce. I've sent out responses to users in #3278 which is also Safari related, possibly connected. I'll include any additional observations here.

I've also added the OS and browser version where obtained to the original issue details.

[jamesozzie]

Unable to reproduce this testing from Big Sur Mac (11.3.1), Safari 14.1, English & Italian languages defined within Site Kit.

Based on one users insights on another safari specific issue (#3278) I also enabled all "Experimental Features" within Safari, without being able to recreate this or the error from that issue.

[jamesozzie]

Some excellent insights provided by one impacted user:

• The same issue occurs on this users other Mac devices, desktop and laptop (both MacOS Mojave v10.14.6 with Safari v14.1 (14611.1.21.161.7))
• Doesn't occur on Safari for iOS
• Occurs with only the Search Console module active
• Reset all Safari "Experimental Features" and the same issue persists
• Not browser extension related, the same occurs with all extensions deactivated

[aaemnnosttv]

@jamesozzie have we tested on Mojave?

[jamesozzie]

@aaemnnosttv I'm unable to reproduce using Mojave with Safari 12.12. Mojave 10.14.6

[aaemnnosttv]

IB ✅ 😄

[aaemnnosttv]

@wpdarren @cole10up – due to the environment-specific nature of this bug, you may need to collaborate with @ivankruchkoff for QA as he is the only one with this environment that we know of 😄

[wpdarren]

@aaemnnosttv apologies if this is obvious :D but when we run new Intl.NumberFormat('en-US', {style: "percent", signDisplay: "never", maximumFractionDigits: 1}).format(1.234) in the console, what should we expect to see if its an affected browser/OS? I am assuming that the environment we need is Mojave and Safari 14.0? @ivankruchkoff maybe it would be easier for all if we jump on a call tomorrow morning?

[wpdarren]

Update: @ivankruchkoff has very kindly offered to do a screencast to show the issue and also the fix. 👍

[wpdarren]

QA Update: ✅

• Verified that the issue is fixed based on Ivan's video (sorry too big to load here)

[constgen]

Can you share with video again please? How it was fixed?

[jamesozzie]

@constgen There is no action required for users who previously encountered this error, with the fix incorporated into the plugin as of version 1.36.0.

If you're encountering similar errors or unusual behavior specific to Safari feel free to open a support topic on the WordPress support forums and we'd be happy to assist.

[constgen]

I just need to fix the same error on my code base. I have errors reports from Sentry. But without having Safari 14.1 I can't correctly reproduce and debug the issue. Can you refer the commit with fix or something?

[constgen]

I think I found that PR https://github.com/google/site-kit-wp/pull/3620/files . Correct me if I am wrong and there was something else

[aaemnnosttv]

@constgen – for us the problem was related to using specific number format options (e.g. style: unit) that were not supported in specific versions of Safari (which also seemed to be specific to MacOS version as well). #3620 was the fix for our use but yours may be different. Good luck!