JS errors if Analytics is disabled via googlesitekit_available_modules

Bug Description

Now that we have the googlesitekit_available_modules filter available (https://github.com/google/site-kit-wp/issues/3993) some administrators may run into various dashboard errors if Google Analytics is disabled, possibly due to Analytics dependency or due the module having already been connected before then being programmatically disabled.

https://user-images.githubusercontent.com/41326532/162795661-a044d95e-d17b-4ecb-82cd-a000dd033db9.mp4

Example of JS errors include the below:

Error one: An error occurred while running 'mapSelect': Cannot read properties of null (reading 'getServiceReportURL')

Occurs if Analytics was already connected before being programaticaly disabled

`An error occurred while running ‘mapSelect’: Cannot read properties of null (reading ‘getServiceReportURL’) The error may be correlated with this previous error: TypeError: Cannot read properties of null (reading ‘getServiceReportURL’) at Object.eval [as current] (webpack-internal:///./assets/js/modules/search-console/components/dashboard/SearchFunnelWidget/Footer.js:120:101) at onStoreChange (webpack-internal:///./node_modules/@wordpress/data/build-module/components/use-select/index.js:135:46) at eval (webpack-internal:///./node_modules/@wordpress/data/build-module/components/use-select/index.js:155:7) at commitHookEffectList (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22030:26) at commitLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22080:9) at commitLayoutEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25344:7) at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:336:14) at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:385:16) at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:440:31) at commitRootImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25082:9)

Original stack trace:

in Footer (created by WidgetFooter)
in WidgetFooter (created by Widget)
in div (created by Widget)
in div (created by Widget)
in Widget (created by WithWidgetSlug(Widget))
in WithWidgetSlug(Widget) (created by SearchFunnelWidget)
in SearchFunnelWidget (created by WidgetRenderer)
in WidgetRenderer (created by WidgetAreaRenderer)
in div (created by Cell)
in Cell (created by WidgetCellWrapper)
in WidgetCellWrapper (created by WidgetAreaRenderer)
in div (created by Row)
in Row (created by WidgetAreaRenderer)
in div (created by WidgetAreaRenderer)
in div (created by ForwardRef)
in ForwardRef (created by WidgetAreaRenderer)
in WidgetAreaRenderer (created by WidgetContextRenderer)
in div (created by WidgetContextRenderer)
in WidgetContextRenderer (created by DashboardMainApp)
in DashboardMainApp (created by DashboardEntryPoint)
in DashboardEntryPoint
in RestoreSnapshots (created by Root)
in ErrorHandler (created by Root)
in Root`

Error two: Cannot read properties of undefined (reading 'hasGTMAnalyticsPropertyID')

Occurs With a GTM placed snippet

Cannot read properties of undefined (reading 'hasGTMAnalyticsPropertyID')

Steps to reproduce

1. Connect Site Kit and also GA
2. Apply the below filter, to ensure only SC is available
3. Visit your Site Kit dashboard
4. Error 1 from above will appear

add_filter(
	'googlesitekit_available_modules',
	function( $modules ) {
		return array( 'search-console' );
	}
);

---

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

Acceptance criteria

• Any references to modules/analytics or modules/analytics-4 store selectors or actions from a component or store that is part of another module should only occur after verifying that the module is available (available, regardless of whether it is active or not).
  • In other words, this issue should cover all accesses within assets/js/modules/* other than assets/js/modules/analytics and assets/js/modules/analytics-4.
  • A good way to tackle this is to search for any MODULES_ANALYTICS / MODULES_ANALYTICS_4 references in those other module directories and adjust/wrap them accordingly.
  • At a minimum, the check needs to ensure that the respective MODULES_ANALYTICS / MODULES_ANALYTICS_4 datastore is available before calling a selector or action on it.
  • Use reasonable fallback values (e.g. false for a boolean, null for an object, etc.).
• It is okay not to worry about potentially “weird” looking UI due to not showing certain Analytics information, since this is a special case that we are not going to specifically support through clean UI. In other words, e.g. the Analytics setup CTAs are perfectly fine to be replaced with nothing, i.e. simply white-space.

Implementation Brief

• Find all instances of select( MODULES_ANALYTICS )/dispatch( MODULES_ANALYTICS ) and select( MODULES_ANALYTICS_4 )/dispatch( MODULES_ANALYTICS_4 ) and ensure that isModuleAvailable( MODULES_ANALYTICS ) (or isModuleAvailable( MODULES_ANALYTICS_4 ) is true before using those selectors/dispatching those actions.
• Find instances of isModuleActive( MODULES_ANALYTICS ) and first check for isModuleAvailable( MODULES_ANALYTICS ) (do the same with MODULES_ANALYTICS_4).

Test Coverage

• Add tests to any components with existing tests that disable Analytics; ensure they still render without errors/console warnings.

QA Brief

• Set up Site Kit (without activating Analytics).
• Add the filter below to your WordPress site, e.g. in your theme’s functions.php.
• Access the Site Kit main dashboard and entity dashboard and ensure there are no errors due to Analytics not being available.

Filter

add_filter(
	'googlesitekit_available_modules',
	function( $modules ) {
		$index = array_search( 'analytics', $modules, true );
		if ( false !== $index ) {
			unset( $modules[ $index ] );
			return array_values( $modules );
		}
		return $modules;
	}
);

Changelog entry

[felixarntz]

@jamesozzie I’ve also created #5074 to further break this down, as there are also problems when not having Tag Manager available. I believe your “Error two” above actually occurs when removing Tag Manager from the list of modules rather than Analytics.

[jamesozzie]

@felixarntz @aaemnnosttv Just tagging you here for visibility based on our discussion last week. I also created #5071 in relation to the same filter.