Improve widget level Error Handler UI/UX for small widget areas

[kuasha420]

Feature Description

In #6695, we introduced an error boundary around the individual Widgets, this works well and prevents the whole dashboard from crashing if an Widget crashes due to error.

However, as pointed out by @aaemnnosttv in his comment, this should be improved to fit small widgets like Key Metrics tiles, and can be more user friendly.

Finally the error should be tracked differently, to distinguish from other dashboard. It would be great to be able to see which widget is crashing from the logs as well.

Originally, the ACs here recommended a new prop for the existing ErrorHandler component. But given the output and tracking would differ, a new component should be created instead 🙂

---

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

Acceptance criteria

• The ErrorHandler component should be replaced with a new WidgetErrorHandler component at

  site-kit-wp/assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js

  Line 210 in dc89f6c

  <ErrorHandler>

• This component should be specific to widget errors:
  • The error state should fit comfortably into even a WIDGET_WIDTHS.QUARTER widget.
  • The error handling component/output should be similar to the GoogleChartErrorHandler component.
  • The trackEvent call should use 'widget_error' instead of 'react_error' for the first argument.
  • The third argument to trackEvent should be prefixed with the widget slug so it is easier to pinpoint which widget is causing errors.

Implementation Brief

• Add assets/js/components/WidgetErrorHandler
  • Use assets/js/components/GoogleChartErrorHandler/index.js as a starting point
  • In console.error, use Widget error for text
  • trackEvent should use widget_error for event name, and use this.props.slug as a prefix to the current label (3rd parameter). Second parameter should stay the same
  • Replace mentions of Google chart with the Widget in the description and title props of CTA component
  • Replace googlesitekit-googlechart-error-handler class with googlesitekit-widget-error-handler
• Add assets/sass/widgets/_googlesitekit-widget-error-handler.scss to apply any needed styles
  • Observe the error handler in key metrics widget, it should render properly, as well is in other regular widget areas where one full width widget is rendered.
• Update assets/js/googlesitekit/widgets/components/WidgetAreaRenderer.js
  • Replace current ErrorHandler with WidgetErrorHandler and pass the widget.slug to the new slug prop

Test Coverage

• Add stories and test files, you can use the ones in assets/js/components/GoogleChartErrorHandler/ as a starting point

QA Brief

• Setup Site Kit and Analytics module
• Use a browser extension to modify the response (like tweak for example):
  • For url use google-site-kit\/v1\/modules\/analytics-4\/data\/report\?metrics
  • For method use GET and 200 for status code
  • For response use this JSON:

{
  "rowCount": 2,
  "metadata": {
    "currencyCode": "USD",
    "timeZone": "America/Los_Angeles"
  },
  "rows": [{"metricValues": {}}]
}

This will cause error widget in place for some widgets in the dashboard (like Find out how your audience is growing) and for some key metric widgets like Most engaging pages and Top pages by returning visitors

• Verify the content matches the one described in AC, as well as the event name/category, etc and it does not render in a broken way in both full size widgets and quarter size widgets
  • Note for the GA4 events, you can filter the events by searching for handle_mainDashboard_error on main dashboard. Event category should be widget_error and label should include the widget slug prefix, example kmAnalyticsTopReturningVisitorPages_An error occurred...

Changelog entry

• Improve error handling for widgets.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ⚠️

• Tested on dev environment.
• Tested using Tweak extension.
• Generated error on main dashboard and verified that Ga4 event gets track for each error.
• Verified event_category: "widget_error" , "event", "handle_mainDashboard_error" and and event_label: include widget slug prefix, (Example- "analyticsAllTrafficGA4')
• Verified that errors are showing as per AC.
• Verified link appearing under error and copy content functionality.

@zutigrm I’ve noticed that the height of KM widgets increases when an error message is displayed, causing misalignment of the widget's content. Should I create a new issue for this, or can it be addressed in a follow up PR?

PASS CASES

event_category: "widget_error" , "event", "handle_mainDashboard_error", and event_label: include widget slug prefix, (Example- "analyticsAllTrafficGA4)

[zutigrm]

@mohitwp Thank you for the observation. Yeah, I was trying to see if I can find a way around it to make it smaller, but couldn't fit it, as we need to show the error message, it is a bit longer than most content in the KM widgets, and making the font size smaller didn't help. So not sure we can do much about it, as this will catch the error within the widget, and if there is a problem, it will affect the functioning of the widget itself, showing the error, so layout being expanded a bit, doesn't seem much of priority, since fixing the issue would resolve that, and there is also a possibility error is temporary and on next visit it will be gone. as this will be shown only in very rare cases that one of the widgets actually encounter the error.

You can potentially open a new issue, so we can see if any different decision can be made on this, or if it will be needed.

[mohitwp]

QA Update ✅

Thank you @zutigrm !

• Tested on dev environment.
• Tested using Tweak extension.
• Generated error on main dashboard and verified that Ga4 event gets track for each error.
• Verified event_category: "widget_error" , "event", "handle_mainDashboard_error" and and event_label: include widget slug prefix, (Example- "analyticsAllTrafficGA4')
• Verified that errors are showing as per AC.
• Verified link appearing under error and copy content functionality.

event_category: "widget_error" , "event", "handle_mainDashboard_error", and event_label: include widget slug prefix, (Example- "analyticsAllTrafficGA4)