JS console error appears when pressing "Set up now" on the GA4 Activation Banner

[techanvil]

Bug Description

When pressing the Set up now button on the GA4 Activation Banner an error appears in the JS console. See screenshots below.

Steps to reproduce

1. Ensure the GA4 Activation Banner is visible on the Dashboard. One way to achieve this is to connect Analytics and then delete the googlesitekit_analytics-4_settings WordPress option. Session storage may also need to be cleared.
2. Click on Set up now.
3. Observe the JS error in the console.

Screenshots

1. Press Set up now.

2. The banner successfully moves to the next stage, but an error appears in the console:

Additional Context

• PHP Version: any
• OS: any
• Browser: any
• Plugin Version: spotted on 1.82.0
• Device: any

---

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

Acceptance criteria

• No JS console error should appear when pressing Set up now on the GA4 Activation Banner.

Implementation Brief

• Being a trivial commit (3 line change), I have just pushed my changes to the attached PR which can be moved straight to QA if it looks good.
• In BannerNotification/index.js, use the useMountedState() hook from react-use which returns a function that will check if the component is mounted or not.
• In handleCTAClick(), use this function to wrap the state update setIsAwaitingCTAResponse( false ); which should only happen if the component is mounted. (The error occurs on this line as the line before changes the step state variable in the ActivationBanner component causing the child components to re-render).

Test Coverage

• No new tests required.

QA Brief

• Follow the steps to reproduce and verify the console error does not show.
• Also verify existing Banner Notifications, especially the Module Recovery Alert notification which should all still work normally (dismissing, clicking on CTAs, etc.).

Changelog entry

• Prevent updating Banner Notification component state when unmounted.

[techanvil]

Hey @jimmymadon - good shout on the use of useMountedState rather than rolling our own hook.

I've spotted another place where we could conceivably see the same error occurring. As dismissNotification is called after onCTAClick, this call to setIsDismissed could also be called when the component is no longer mounted. Maybe we should also wrap this in a check to isMounted(). Not super elegant having to call it in two places but I don't really see an obviously better refactor. What do you think?

I mean it's slighlty preemptive as it's not the specific call that causes the error, but would save us detective work if this one does come and bite us in future...

site-kit-wp/assets/js/components/notifications/BannerNotification/index.js

Line 150 in e0f60a9

setIsDismissed( true );

[jimmymadon]

@techanvil Nice catch - have updated the PR!

[techanvil]

Nice one @jimmymadon.

IB ✅

[wpdarren]

QA Update: ✅

Verified:

• The console error does not show when you click on the Set up now CTA button.
• Existing Banner Notifications, i.e. Module Recovery Alert notification should continue to work (see note)

Note: Currently, the zero and gathering data state notifications are not working due to the bug in #5148 which is currently being worked on. I checked to make sure the other banner notifications appeared.