site-kit-wp: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Bug Description

There have been reports of the following error from different users. Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

It’s unknown at what stage this occurs, possible during a PageSpeed Insights test based on the title of the most recent topic. Awaiting additional information for further troubleshooting.

Support Topics (in order or occurrence - newest on top):

• https://wordpress.org/support/topic/cancelacion-de-analisis-velocidad-del-sitio/
• https://wordpress.org/support/topic/bug-312/
• https://wordpress.org/support/topic/google-site-kit-2/
• https://wordpress.org/support/topic/nao-sei-o-que-esta-acontecendo/
• https://wordpress.org/support/topic/site-toolkit-encountered-an-error/
• https://wordpress.org/support/topic/site-kit-обнаружил-ошибку/
• https://wordpress.org/support/topic/плагин-site-kit-обнаружил-ошибку/
• https://wordpress.org/support/topic/site-kit-error-6/

Steps to reproduce

Assuming your browser’s preferred language and site locale are set to English:

1. Configure Chrome language settings (chrome://settings/languages) to add another language
   
2. For the added language, check the box to “Offer to translate pages in this language”
3. Set up Site Kit and enable PageSpeed insights as normal
   • Wait for the PageSpeed report to finish loading
4. Select the “In the Lab” tab in the “Page Speed and Experience” widget on the dashboard
5. Right-click on the page and select “Translate to {your chosen language}”
6. Once translated, toggle the device switch on the PageSpeed Insights report (mobile <-> desktop)
7. This should immediately trigger a fatal client side error and you should now see the error boundary component with the error

This is only one instance which is easily reproducible and was reported by users in the support forums, but others are possible as well.

Additional Context

• Issue first arose around SK 1.16.0

---

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

Acceptance criteria

• Site Kit interfaces should remain stable and interactive after translation by Google Translate
  For more information, see https://github.com/facebook/react/issues/11538

Note: 1st party translation via i18n functions is only possible in WP 5.0+ and when translation files have been downloaded. Also, Google APIs may not support all the possible locales that WP does which may lead to some users needing to use external translation services, such as Google Translate.

Implementation Brief

This bug can be solved in slightly different ways depending on where it occurs:

1. Edit assets/js/modules/pagespeed-insights/components/common/ReportMetric.js

• Update each conditional render of the category in the JSX wrapping the rendered text in a span tag. Example:
  • { category === CATEGORY_FAST && <span>{ _x( 'Good', 'Performance rating', 'google-site-kit' ) }</span> }

1. Edit assets/js/modules/analytics/components/common/TrackingExclusionSwitches.js

• Within the <p> tag in the JSX, change the two conditional render statements to a single statement using inline conditional syntax ( condition ? true : false )

1. Edit Assets/js/modules/analytics/components/common/UseSnippetSwitch.js

• Within the <p> tag in the JSX, each __( 'translate me', 'google-site-kit' ) needs to be wrapped with a span tag when rendered

1. Edit assets/js/modules/tagmanager/components/common/UseSnippetSwitch.js

• Within the <p> tag in the JSX, change the two conditional render statements to a single statement using inline conditional syntax ( condition ? true : false )

1. Edit assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget/TotalUserCount.js

• Within the <h3> tag wrap __( 'All Users', 'google-site-kit' ) with a span tag for the cases where it is not wrapped in a Link.
• Also wrap the render of { dimensionValue } in a <span> tag. https://github.com/google/site-kit-wp/blob/f77568c26e42dbc2f374e0a5161f72c6c43d2c21/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget/TotalUserCount.js#L96-L106

Here are further locations in the code where __( 'translate me', 'google-site-kit' ) needs to be wrapped with a span tag when rendered: 6. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/components/setup/CompatibilityChecks/CompatibilityErrorNotice.js#L91-L95 7. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/components/user-input/UserInputSelectOptions.js#L159-L163 8. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/adsense/components/settings/SettingsView.js#L134-L137 9. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/analytics/components/common/AccountCreate/index.js#L169-L172 10. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/adsense/components/setup/SetupAccountApproved.js#L97-L115 11. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/analytics/components/settings/SettingsView.js#L121-L124 12. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/analytics/components/settings/SettingsView.js#L106-L111 13. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/tagmanager/components/settings/SettingsView.js#L69-L72 14. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/tagmanager/components/settings/SettingsView.js#L81-L84 15. https://github.com/google/site-kit-wp/blob/4739c5c87ea9e068b0ef0c2beda4fe79e185f9e9/assets/js/modules/tagmanager/components/settings/SettingsView.js#L98-L101

Test Coverage

• Run Jest tests to check they all pass and update them if necessary.

Visual Regression Changes

• Run Backstop tests to check they all pass

QA Brief

• In the Pagespeed widget on the dashboard follow the 'Steps to reproduce` in the issue description above to try and generate the error in the console
• In Analytics settings, as before, translate the page to another language, click on Edit and toggle all the switches to see if they generate the error in the console
• In Tag Manager settings translate the page to another language, click on Edit and toggle the switch to see if it generates the error in the console
• In the Analytics widget on the dashboard, translate the page to another language. Then click on the ‘Channels/Locations/Devices’ tabs and slices on the piechart to see if the the error is generated in the console
• In Adsense settings translate the page to another language. Try clicking on edit and toggling the switch to see it if geneates the error in the console
• If connected, disconnect AdSense in settings. Then connect AdSense. On the step that says “Looks like you are already using AdSense” translate the page and try toggling the switch. See if the error is generated in the console

Changelog entry

• Fix javascript issues that appear when admin pages have been translated with Google Translate