Changes proposed in this Pull Request
When loading checkout, it’s possible to add items to the cart directly from the URL (plans, non-plan products, or renewals). This mechanism has several places that it can fail, but none of those failures generate an error that the user can see. This is most noticeable when the cart is otherwise empty because then one of these failures will result in a silent redirect to the plans page with no explanation.
This PR displays those errors to the user instead. It also prevents the redirect if an error is being displayed (just like other errors).
In addition, this PR records those errors to Tracks and to Logstash so they can be examined later.
(As a side effect of some of the refactoring here, usePrepareProductsForCart
now will never change its returned products once they’ve been created. This should have no noticeable effect but is more efficient and should help with other hooks that depend on its return value.)
Fixes #45521
Testing instructions
- Visit calypso and turn on analytics debugging by typing
localStorage.setItem('debug', 'calypso:analytics')
in your console and then reloading the page.
- Visit checkout with a URL like http://calypso.localhost:3000/checkout/example.com/personal and verify that the plan gets added to your cart correctly.
- Visit checkout with a URL like http://calypso.localhost:3000/checkout/example.com/domain-mapping:whatever.com and verify that the product gets added to your cart correctly.
- Visit checkout with a URL like http://calypso.localhost:3000/checkout/example.com/abcd (
abcd
is a non-existent product alias).
- Verify that you see an error message displayed about failing to find the requested product.
- Click to renew an existing product and verify that it gets added to your cart correctly.
- Visit checkout with a URL like http://calypso.localhost:3000/checkout/abcd/renew/10001/example.com (
abcd
is a non-existent product slug).
- Verify that you see an error message displayed about failing to find the requested product.
- Verify that you see a reference to an event like
calypso:analytics Record event "calypso_checkout_composite_products_load_error" called with props
in your console.
- In your browser’s devtools network tab, verify that you see a call to the
logstash
endpoint which refers to the same error message you saw on the screen.
Unfortunately, no screenshots were provided by the developer.