Feature Description

Implement the error handling for the "no audiences" banner, showing the Full Width Error Banner when there is an error.

See no audiences banner > error state in the design doc.

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

Acceptance criteria

• Given that the Audience Segmentation feature has already been set up:
  • If an error occurs when syncing the list of available audiences (which should occur for an authenticated user, either when viewing the Audience Widget Area and an hour or more has passed since the last sync, or when opening the Audience Selection Panel the first time for a given page load):
    • The Full Width Error Banner should be displayed in the appropriate variant.
      • If a permission error is returned by the API call, the "insufficient permissions" variant of the error banner will be shown (see the AC for Add the Full Width Error Banner (Storybook) #8230).
      • Otherwise, the catch-all variant will be shown. Clicking the Retry button will retry syncing the list of available audiences.
    • The Audience Tiles and Info Notice should not be displayed.

Implementation Brief

Note that we should ensure this IB is drafted after that of its dependency, #8147.

• Within AudienceTilesWidget, retrieve the syncAvailableAudiences error via getErrorForAction().
  • If the error is set:
    • Render AudienceSegmentationErrorWidget, passing the error via the errors prop.
    • If the error is not an insufficient permission error:
      • Pass the showRetryButton and onRetry() props.
      • In the onRetry() callback, clear the syncAvailableAudiences error and dispatch the syncAvailableAudiences() action.
• Refer to AudienceSelectionPanel/ErrorNotice for similar logic regarding the syncAvailableAudiences error.

Test Coverage

• Add JS test coverage for the changes to AudienceTilesWidget.

QA Brief

1. Enable audience segmentation and enable audience groups so that audiences are visible in audience tile area.

2. Install Time Travel extension in chrome.

3. Using the Tweak Chrome extension, create a rule as follows.

• URL: .*/wp-json/google-site-kit/v1/modules/analytics-4/data/sync-audiences.*
• Enable the use of regular expressions (.*)
• HTTP Method: POST
• Status code: 400
• Response payload.

{
    "code": 400,
    "message": "Some Error",
    "data": {
        "status": 400,
        "reason": "Some Reason"
    }
}

4. Set the time in Time travel extension to couple of hours later in the future. Reload the page.

5. There should be a the error banner visible in audience tile area with retry button.

6. Change the payload in tweak to following and refresh the page. This time, there should be no retry button, but banner should be visible.

{
  "code": 400,
  "message": "Some Error",
  "data": {
    "status": 400,
    "reason": "insufficientPermissions"
  }
}

Changelog entry

• Add handling for audience sync errors in the audiences widget area.