site-kit-wp: Cannot read properties of undefined (reading 'isAdSenseLinked')

Bug Description

One user in the support forums reported the following error:

Cannot read properties of undefined (reading 'isAdSenseLinked')

    in ModuleTopEarningPagesWidget
    in WhenAnalyticsActive(ModuleTopEarningPagesWidget)
    in WidgetRenderer
    in div
    in Cell
    in WidgetCellWrapper
    in div
    in Row
    in div
    in div
    in ForwardRef
    in WidgetAreaRenderer
    in div
    in WidgetContextRenderer
    in ModuleApp
    in GoogleSitekitModule
    in RestoreSnapshots
    in ErrorHandler
    in Root

This was the sole occurrence and unfortunately we don’t have more insights other than the above.

While we don’t have the users site heath information from checking their site it looks like they have Advanced Ads active, along with WC Font end manager, elementor and Google Analytics for WordPress. I also noticed they have the AdSense snippet from Site Kit placed twice, also something we haven’t came across previously:

image

Steps to reproduce

Unable to reproduce, with no further insights provided.

Additional Notes

  • SK 1.48.1
  • Unknown if issue remains or where this appears
  • No response from impacted user

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

Acceptance criteria

  • No errors should be raised due to destructuring a potentially undefined value due to a problem with useSelect:
    • useSelect calls that include multiple select usages to return an object with multiple values should be split into individual calls to useSelect, unless that’s not possible in a straightforward manner (e.g. if there is logic relating to multiple select usages in there).
    • All useSelect calls where the result is then destructured (i.e. expects an object), should be rewritten to include a || {}, to avoid a JS error in case the return value is undefined.

Implementation Brief

  • Find all the instances of useSelect calls where the returned value is being destructured. ie. by searching for } = useSelect.
  • The getDateRangeDates can be safely destructured and should be kept as is.
  • In assets/js/components/notifications/WPVersionBumpNotification.js
    • Instead of destructuring version from the getWPVersion selector, make sure the selector is not undefined and return the version directly, otherwise return undefined.
  • Do the same in the following files for the mentioned selectors.
    • getModule
      • assets/js/components/ViewOnlyMenu/Service.js
      • assets/js/modules/idea-hub/components/dashboard/DashboardCTA.js
      • assets/js/modules/idea-hub/components/setup/SetupForm.js

Test Coverage

  • No tests should be failing.

QA Brief

  • Note: The changes implemented don’t include any feature/UI changes.
  • Set up Sit Kit and all the modules and ensure no regressions.
  • Connect and disconnect the modules and ensure no regressions.
  • If possible, ensure the JS error Cannot read properties of undefined is not reproducible.
  • Areas to focus:
    • Splash screen
    • Analytics, Adsense, Tag Manager setup and settings screens
    • View only menu dropdown

Changelog entry

  • Update certain selector usage to avoid crashing the dashboard in the event of an error.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 16 (5 by maintainers)

Most upvoted comments

SGTM 👍

@aaemnnosttv IMO a single PR for this should be okay? I don’t anticipate a lot of merge conflicts since we’re not heavily working on most of these components right now. It’s probably easier to fix a few merge conflicts than to artificially break this up, which might still cause similar merge conflicts to surface.

@felixarntz it looks good to me, although this could result in quite a large PR as there are at least 20 instances where this would be broken up. Do you think we should break this into multiple PRs perhaps but keep it as one issue?

Search results
21 results - 20 files

assets/js/components/user-input/UserInputApp.js:
  41: 	const { hasFinishedGettingInputSettings } = useSelect( ( select ) => ( {

assets/js/components/user-input/UserInputQuestionnaire.js:
  84: 	const { isSavingSettings, error, answeredUntilIndex } = useSelect(

assets/js/modules/adsense/components/common/AccountSelect.js:
  43: 	const { accounts, hasResolvedAccounts } = useSelect( ( select ) => ( {

assets/js/modules/adsense/components/common/WebStoriesAdUnitSelect.js:
  45: 	const { adunits, hasResolvedAdUnits } = useSelect( ( select ) => ( {

assets/js/modules/adsense/components/module/ModuleTopEarningPagesWidget/Header.js:
  39: 	const { currentDayCount, analyticsMainURL } = useSelect( ( select ) => {

assets/js/modules/adsense/components/module/ModuleTopEarningPagesWidget/index.js:
  71: 	const { isAdSenseLinked, error } = useSelect( ( select ) => {

assets/js/modules/adsense/components/settings/SettingsForm.js:
  49: 	const { existingTag, hasResolvedGetExistingTag } = useSelect(

assets/js/modules/analytics/components/common/AccountCreateLegacy.js:
  40: 	const { accounts, hasResolvedAccounts } = useSelect( ( select ) => ( {

assets/js/modules/analytics/components/common/AccountSelect.js:
  43: 	const { accounts, hasResolvedAccounts } = useSelect( ( select ) => ( {
  50: 	const { hasExistingTag, hasGTMPropertyID } = useSelect( ( select ) => {

assets/js/modules/analytics/components/common/PropertySelect.js:
  39: 	const { accountID, properties, isResolvingProperties } = useSelect(

assets/js/modules/analytics/components/common/AccountCreate/index.js:
  63: 	const { accounts, hasResolvedAccounts } = useSelect( ( select ) => ( {

assets/js/modules/analytics/components/dashboard/DashboardGoalsWidget.js:
  90: 	const { error, loading, serviceURL } = useSelect( ( select ) => {

assets/js/modules/analytics/components/dashboard/DashboardSearchVisitorsWidget.js:
  95: 	const { loading, error, serviceURL } = useSelect( ( select ) => {

assets/js/modules/idea-hub/components/dashboard/DashboardCTA.js:
  59: 	const { connected, active } = useSelect( ( select ) =>

assets/js/modules/idea-hub/components/setup/SetupForm.js:
  37: 	const { description } = useSelect( ( select ) =>

assets/js/modules/search-console/components/dashboard/DashboardClicksWidget.js:
  91: 	const { error, loading, serviceURL } = useSelect( ( select ) => {

assets/js/modules/search-console/components/dashboard/DashboardImpressionsWidget.js:
  91: 	const { error, loading, serviceURL } = useSelect( ( select ) => {

assets/js/modules/search-console/components/module/ModulePopularKeywordsWidget/Footer.js:
  39: 	const { serviceURL } = useSelect( ( select ) => {

assets/js/modules/search-console/components/module/ModulePopularKeywordsWidget/index.js:
  69: 	const { isLoading, error } = useSelect( ( select ) => {

assets/js/modules/tagmanager/components/common/AccountSelect.js:
  39: 	const { accounts, hasResolvedAccounts } = useSelect( ( select ) => ( {

I also noticed they have the AdSense snippet from Site Kit placed twice, also something we haven’t came across previously:

image

@jamesozzie the duplicate tag is not from Site Kit which you can tell in a few ways:

  • The tag is outside of the Site Kit start/end comments
  • The tag has two spaces between script and async unlike Site Kit’s
    image

This wouldn’t have anything to do with the error reported here though 🙂