Implement the full-tile error states for the Audience Tile

[techanvil]

Feature Description

Implement the error handling for Audience Tiles for the cases where an error occurs when retrieving the audience data.

Note that this entails showing the Audience Tile Error when an individual tile is in the error state, or the Full Width Error Banner in the case where all audience tiles are in an error state.

See audience tiles > error states in the design doc.

---

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

Acceptance criteria

Implementation Brief

• [ ]

Test Coverage

QA Brief

Changelog entry

[techanvil]

Note, I've moved this to the backlog pending the addition of the full width error state as a GitHub issue, which this issue may depend on.

[techanvil]

The full width error state is now defined and added as a dependency for this issue, which is ready for AC.

[techanvil]

Hi @hussain-t, just letting you know I've moved this back to Backlog as the final in-progress changes to the design doc, relating to audience caching, will probably affect the AC for this one (we probably need to handle an audience sync error here). Please feel free to get preliminary AC ready in the meantime.

[techanvil]

Hi again @hussain-t! As the audience caching aspect of the design doc has been sufficiently finalised, I've moved this back to AC.

[techanvil]

Thanks @hussain-t, nice work here so far on the IB. A couple of points:

• [ ] Retrieve all the following report errors using the getErrorForSelector by passing the appropriate report options:
  • [ ] reportOptions
  • [ ] totalPageviewsReportOptions
  • [ ] topCitiesReportOptions
  • [ ] topContentReportOptions
  • [ ] topContentPageTitlesReportOptions

It's worth bearing in mind that reportOptions and totalPageviewsReportOptions are both for reports that apply to all tiles rather than per-tile. We should clarify this in the IB and consider how they will need to be handled differently to the other reports.

• [ ] Modify the AudienceTile component to accept a new error prop.
• [ ] Conditionally render the AudienceTileError component with in the Widget when an error is present.
• [ ] Pass the error prop to the AudienceTileError component.

Hmm, I think it would be cleaner to conditionally render AudienceTileError directly in AudienceTiles rather than in AudienceTile. That way we can return early in the map over visibleAudiences rather than going through all the irrelevant logic of extracting the various data points (and running the various unneeded useSelect() calls in AudienceTile). We might want to lift the render of AudienceTileLoading out to AudienceTiles at some point for the same reason.

[hussain-t]

Thanks for the valuable feedback, @techanvil. I've updated the IB accordingly.

[techanvil]

Thanks @hussain-t! Nice work, that LGTM.

IB :white_check_mark:

[techanvil]

Hey @hussain-t, while working on the IB for #8190 I've noticed that one detail of the AC has been missed in the IB here.

• In the case where an error occurs while retrieving data for all of the selected audiences:
  • ...
  • The Audience Tiles and Info Notice should not be displayed.

As per the above point, we need to ensure the Info Notice is not displayed when we are showing the Full Width Error Banner. Please can you update the IB accordingly?

[hussain-t]

Thanks, @techanvil. I've updated the IB.

[techanvil]

Thanks @hussain-t! IB :white_check_mark: once again :)

[techanvil]

Nice work on the QAB here @ankitrox. One suggestion - it's possible the audience IDs will change in the future if they are archived and recreated. So, I will suggest adding a point to run googlesitekit.data.select( 'modules/analytics-4' ).getAvailableAudiences() in the JS console and cross reference the IDs to make sure they are correct:

[techanvil]

Hey @ankitrox, good work on the PR which I have merged. Please can you take a look at my comment above re. the QAB.

[ankitrox]

Hi @techanvil ,

Sorry for missing the QAB update. I've updated the QAB and added the point as note at the top of QAB.

[kelvinballoo]

QA update ⚠️

Hi @ankitrox , I tried to do a happy scenario without any rules on the tweak extension but I hit a permission error. The permission error does appear in the dev console but doesn't appear in the FE. Is that expected?

Refer to the video below. Happy to jump on a call to discuss this.

https://github.com/user-attachments/assets/5e40a65c-01d1-45d8-a232-2fa044d54e57

[kelvinballoo]

Confirmed with @ankitrox that the issue raised would be fixed under https://github.com/google/site-kit-wp/issues/8179

Will continue testing this ticket.

[kelvinballoo]

QA update ⚠️

@ankitrox , given that there is an error and the panel doesn't show up...I'm eventually blocked because I can't do this part of the QAB: Select Returning visitors and All visitors to show in audience tiles widget area from the selection panel.

Let me know if I missed anything or how best to navigate this. Happy to jump on a call if that's easier.

[kelvinballoo]

QA Update ⚠️

The errors are loading fine based on the AC but I have a couple of observations. It's highly likely it's not going to be under this ticket and so, please let me know and I'll raise another ticket.

ITEM 1: ⚠️ For the 2nd scenario where the full width error appears, the Info notice doesn't appear as expected. However, if I click on 'Retry', it will appear for a brief second before disappearing again. I think it would be a better experience if it doesn't show up, at least until there is no error detected.

https://github.com/user-attachments/assets/76d827b1-a001-461e-ab1f-58c28f790f3b

---

ITEM 2: Clarification ⚠️ I tried to interchange the audience numbers for rule 2 such that 'All Visitors' would hit error and not 'Returning Visitors' but when I did it, the full width error banner showed up. I was expecting only the 'All Visitors' tile to have error. Or we can't really test it this way?

---

ITEM 3: ⚠️ Scenario 1: Full width error banner On mobile and iPad mini, you will see at the top of the tile, the corners are square. It should have been rounded.

Scenario 2: Two tiles with only one error In this scenario, the top corners should have been squared but they are rounded.

---

Other than that, the errors are showing up accordingly in general. ✅

Rule 2 active:

Rule 1 Active:

[techanvil]

Hi @kelvinballoo, thanks for raising these issues.

ITEM 1: ⚠️ For the 2nd scenario where the full width error appears, the Info notice doesn't appear as expected. However, if I click on 'Retry', it will appear for a brief second before disappearing again. I think it would be a better experience if it doesn't show up, at least until there is no error detected.

Good shout, however the intention here is for the widget to show in its loading state while the reports are being retried. I've created a followup PR which fixes this: https://github.com/google/site-kit-wp/pull/9254

ITEM 2: Clarification ⚠️ I tried to interchange the audience numbers for rule 2 such that 'All Visitors' would hit error and not 'Returning Visitors' but when I did it, the full width error banner showed up. I was expecting only the 'All Visitors' tile to have error. Or we can't really test it this way?

The audiences appear in a fixed order in the request URL, so to reverse the scenario, you'll need to keep the IDs in the same order but adjust the regular expression syntax as follows:

.*/wp-json/google-site-kit/v1/modules/analytics-4/data/report(?!.*8587716470).*2786548370.*

ITEM 3: ⚠️ Scenario 1: Full width error banner On mobile and iPad mini, you will see at the top of the tile, the corners are square. It should have been rounded. ... Scenario 2: Two tiles with only one error In this scenario, the top corners should have been squared but they are rounded.

This is another good spot, I've included a fix for this in my followup PR.

[kelvinballoo]

QA Update ⚠️

Thanks @techanvil This has been verified good overall. Just need your confirming on ITEM 1.

ITEM 1 ⚠️ For item 1, I re-tested this and noticed that you have put the tiles in loading state. Agreed on that. Just confirming as well that, it's fine for the 'Info notice' to appear below them, because it's part of the loading state?

---

ITEM 2 ✅ Noted on that. I was able to do the proper change in the URL and I could interchange the positions. Looking as expected.

---

ITEM 3 ✅ The tiles on mobile and desktop are appearing as expected now.

2/3 tiles present:

1 tile only present:

[techanvil]

ITEM 1 ⚠️ For item 1, I re-tested this and noticed that you have put the tiles in loading state. Agreed on that. Just confirming as well that, it's fine for the 'Info notice' to appear below them, because it's part of the loading state?

Thanks @kelvinballoo, this is indeed expected for now. We do have an issue to only show the info notice when there is relevant data for it, which implies it won't show up while the tiles are in the loading state, but this is currently in the backlog for post-launch: https://github.com/google/site-kit-wp/issues/8140

[kelvinballoo]

QA Update ✅

Great, thanks for the confirmation @techanvil . Moving this ticket to approval.

---

I was able to do the proper change in the URL and I could interchange the positions. ✅ Looking as expected.

---

The tiles on mobile and desktop are appearing as expected. ✅

2/3 tiles present:

1 tile only present:

---

The errors are showing up accordingly. ✅

Rule 2 active:

Rule 1 Active:

[aaemnnosttv]

@kelvinballoo it looks like only the catch-all error case was tested here. Was the permissions error case also tested as mentioned in the AC?

[kelvinballoo]

@aaemnnosttv , apologies! Yes, only the catch-all error was tested. Missed out on the permissions error.

@ankitrox , could you update the QAB for how to test for the Permissions error please?

[kelvinballoo]

QA Update ✅

Permissions error variant tested by changing the tweak extension response to:

{
  "code": 403,
  "message": "Insufficient Permissions Test Error",
  "data": {
    "status": 403,
    "reason": "insufficientPermissions"
  }
}

The Permission error variant appeared accordingly and is looking good on desktop, mobile and tablet viewports.

• All tiles error ✅

  

• One tile error: ✅

  

---

The catch-all variant was tested good already ✅

1 tile error:

All tiles error:

[aaemnnosttv]

Thanks @kelvinballoo !