Jetpack Dashboard: More meaningful error notices.

[sergeymitr]

If Jetpack encounters a communication error, it suggest reconnecting.
That doesn't always help. In fact, there is a myriad of other reasons why the error might be thrown, and blindly suggesting to restore connection might only mislead users.

Changes proposed in this Pull Request:

This PR introduces different types of error:

• ApiError is clearly a connection error, and might be solved by reconnecting.

• JsonParseError is a JSON parsing issue. This usually means there's an error output included into the JSON response, so we suggest the user to check the error log, and don't show the "Restore Connection" button.

• Anything else: we do nothing, as we have no idea what's going on. Most likely it's a network issue, and we don't have an easy solution for that.

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

1. If you don't run yarn watch, please rebuild the JS after checking out the branch.
2. Go to the Jetpack Dashboard, make sure no error notices appear.

Connection Error

3. Break your blog_token, refresh the dashboard and wait until it loads.
4. Confirm that you see the error notice (see example above), and the "Restore Connection" button.
5. Click on the "Restore Connection", the Dashboard should reload
6. The error notice should not appear, the blog_token should get restored.

JSON parsing error

7. Find the Jetpack_Core_Json_Api_Endpoints::get_site_data() API endpoint method:

   jetpack/_inc/lib/class.core-rest-api-endpoints.php

   Line 1755 in de74386

   public static function get_site_data() {

8. Add some output into the first line of the method (e.g. echo 'something';) to break the output JSON.
9. Confirm that you see the error notice (see example above). The "Restore Connection" button must not appear.

Why not both?

This is a special use case that needed to be fixed separately, so we need to test it too.
10. Keep your echo 'something'; in place, but in addition to that break the blog_token. So the connection will be broken, but the error response will also contain invalid JSON.
11. Reload the Dashboard, and confirm that you see the "update to communicate" error notice (see example above). The "Restore Connection" button must not appear, as it's pointless trying to restore the connection as we won't be able to parse the response anyway.
12. Fix the JSON by removing your echo 'something'; line from the Jetpack_Core_Json_Api_Endpoints::get_site_data() method. Keep the token broken for now.
13. Reload the dashboard. You should see the "Restore Connection" error notice.
14. Click on the "Restore Connection", the page should reload, the error notice should no longer appear.

Thanks for testing! 🙂

Proposed changelog entry for your changes:

• Improved error notices in the Jetpack Dashboard.

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16883

Scheduled Jetpack release: September 1, 2020.
Scheduled code freeze: August 25, 2020

Generated by 🚫 dangerJS against e5e08bc

[jeherve]

That's going to be a nice improvement 🤩

I wonder if we should consider adding whatever raw message we may be getting in some cases from the API response to the end of the error messages. In some cases, it may give more information as to what's happening?

[sergeymitr]

@jeherve that's a great idea, I added that 👍
The new commit introduces two things:

• error_code in the notice
• error notice displayed for the site id missing error, and suggests to reconnect to restore it

Please re-review the PR.

[leogermani]

This is great @sergeymitr, thanks for that!

I also tested forcing some error to the site request by adding this to my .htaccess

RewriteRule ^wp-json\/jetpack\/v4\/site$  - [R=503,L]

And it worked as expected!