Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add error message for fetch errors on checkout #5341

Merged
merged 4 commits into from
Dec 13, 2021

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Dec 8, 2021

Adds handling for network errors during the request to /wc/store/checkout. Currently it handles API errors (4xx/5xx) but does not factor in other errors like failed requests and offline browsers.

Fixes #4894

Screenshots

In offline mode, this is now shown:

Screenshot 2021-12-08 at 14 37 51

Testing

How to test the changes in this Pull Request:

  1. Go to checkout and open network tools
  2. Place an order using an invalid postcode so that an error is returned. Confirm postcode error is shown.
  3. Right click the checkout/ request and block it (I used firefox)
  4. Place order again and it should give you a network error

User Facing Testing

  1. Confirm that you can placing an order without inputting an address shows an error notice at the top of the checkout page
  2. Confirm that you can place an order successfully with a valid address

Changelog

Add error handling for network errors during checkout.

@mikejolley mikejolley self-assigned this Dec 8, 2021
@rubikuserbot rubikuserbot requested review from a team and ralucaStan and removed request for a team December 8, 2021 15:03
@mikejolley mikejolley added status: needs review type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels Dec 8, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2021

Size Change: -21.8 kB (-3%)

Total Size: 819 kB

Filename Size Change
build/active-filters.js 7.05 kB -11 B (0%)
build/all-products-frontend.js 18.6 kB +42 B (0%)
build/all-products.js 34.4 kB -3 B (0%)
build/all-reviews.js 8.35 kB -8 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB -1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 6.87 kB -15 B (0%)
build/atomic-block-components/add-to-cart.js 6.42 kB -1 B (0%)
build/atomic-block-components/button-frontend.js 1.48 kB +2 B (0%)
build/atomic-block-components/button.js 849 B +1 B (0%)
build/atomic-block-components/category-list-frontend.js 457 B -1 B (0%)
build/atomic-block-components/image-frontend.js 1.37 kB -2 B (0%)
build/atomic-block-components/image.js 1.05 kB +1 B (0%)
build/atomic-block-components/price-frontend.js 1.74 kB -2 B (0%)
build/atomic-block-components/rating-frontend.js 552 B -1 B (0%)
build/atomic-block-components/sale-badge-frontend.js 625 B -1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 584 B -1 B (0%)
build/atomic-block-components/summary-frontend.js 872 B -3 B (0%)
build/atomic-block-components/tag-list-frontend.js 458 B -1 B (0%)
build/atomic-block-components/title-frontend.js 1.11 kB +1 B (0%)
build/atomic-block-components/title.js 1.1 kB +1 B (0%)
build/attribute-filter-frontend.js 16.3 kB -281 B (-2%)
build/attribute-filter.js 12.7 kB -8 B (0%)
build/blocks-checkout.js 17.6 kB +7 B (0%)
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB +5 B (0%)
build/cart-blocks/express-payment-frontend.js 4.86 kB -6 B (0%)
build/cart-blocks/filled-cart-frontend.js 766 B -1 B (0%)
build/cart-blocks/items-frontend.js 298 B +1 B (0%)
build/cart-blocks/line-items-frontend.js 5.13 kB -7 B (0%)
build/cart-blocks/order-summary-frontend.js 8.98 kB +23 B (0%)
build/cart-frontend.js 45.6 kB +92 B (0%)
build/cart.js 44.2 kB +241 B (+1%)
build/checkout-blocks/actions-frontend.js 1.44 kB -2 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.24 kB -6 B (0%)
build/checkout-blocks/billing-address-frontend.js 884 B -3 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.93 kB -13 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.15 kB -18 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 11.4 kB -27 B (0%)
build/checkout-blocks/payment-frontend.js 7.41 kB -66 B (-1%)
build/checkout-blocks/shipping-address-frontend.js 971 B -2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB +4 B (0%)
build/checkout-blocks/terms-frontend.js 1.21 kB -1 B (0%)
build/checkout-blocks/totals-frontend.js 324 B +1 B (0%)
build/checkout-frontend.js 47.7 kB +117 B (0%)
build/checkout.js 47.1 kB +70 B (0%)
build/featured-product.js 9.9 kB -2 B (0%)
build/handpicked-products.js 7.32 kB -4 B (0%)
build/legacy-template.js 2.08 kB +31 B (+2%)
build/mini-cart-component-frontend.js 14.2 kB -23.4 kB (-62%) 🏆
build/mini-cart-contents.js 3.46 kB +2 B (0%)
build/mini-cart-frontend.js 1.76 kB +3 B (0%)
build/mini-cart.js 6.65 kB -17 B (0%)
build/price-filter-frontend.js 12.4 kB +30 B (0%)
build/price-filter.js 8.6 kB -8 B (0%)
build/product-best-sellers.js 7.51 kB -3 B (0%)
build/product-categories.js 3.47 kB -1 B (0%)
build/product-category.js 8.35 kB -4 B (0%)
build/product-new.js 7.66 kB -3 B (0%)
build/product-search.js 2.46 kB -2 B (0%)
build/product-tag.js 7.76 kB -8 B (0%)
build/product-top-rated.js 7.63 kB -3 B (0%)
build/products-by-attribute.js 8.48 kB -1 B (0%)
build/reviews-by-category.js 11.8 kB -7 B (0%)
build/reviews-by-product.js 12.9 kB -7 B (0%)
build/reviews-frontend.js 7.24 kB +13 B (0%)
build/single-product-frontend.js 22.1 kB +126 B (+1%)
build/single-product.js 10.4 kB -7 B (0%)
build/stock-filter-frontend.js 6.81 kB +12 B (0%)
build/stock-filter.js 6.82 kB -11 B (0%)
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 18.9 kB +4 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js 6.82 kB +3 B (0%)
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB +1 B (0%)
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB +1 B (0%)
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB +1 B (0%)
build/wc-blocks-data.js 8.84 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 4.4 kB +127 B (+3%)
build/wc-blocks-editor-style.css 4.4 kB +124 B (+3%)
build/wc-blocks-style-rtl.css 21.6 kB +523 B (+2%)
build/wc-blocks-style.css 21.6 kB +525 B (+2%)
build/wc-blocks-vendors.js 65.5 kB +40 B (0%)
build/wc-blocks.js 2.96 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating.js 553 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator.js 586 B
build/atomic-block-components/summary.js 872 B
build/atomic-block-components/tag-list.js 458 B
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/fields-frontend.js 343 B
build/featured-category.js 8.55 kB
build/price-format.js 1.18 kB
build/product-on-sale.js 8.05 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.6 kB

compressed-size-action

let errorNotice = sprintf(
// Translators: %s Error text.
__(
'Error: %s Please try placing your order again.',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about Order could not be placed. %s Please try placing your order again. instead of Error: %s Please try placing your order again..

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ralucaStan Updated to 'Something went wrong. %s Please try placing your order again.' to match other notices.

dispatchActions.setAfterProcessing( response );
setIsProcessingOrder( false );
} );
errorNotice = formatStoreApiErrorMessage( response );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand the reason behind declaring errorNotice and replacing it here. What changes?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to avoid calling addErrorNotice in multiple places. it's done at the end.

@ralucaStan
Copy link
Contributor

I've tested and the offline error is showed as expected but I think the PR introduces a bug:

when going to the Checkout block and entering invalid zip code I used to see this error:
The provided postcode / ZIP is not valid
on this branch I see this error:
Something went wrong. Something went wrong. Please try placing your order again.

@ralucaStan
Copy link
Contributor

The testing steps did not work for me. Placing an order without an address does not call the /checkout endpoint, because a front-end validation appears. I've tested introducing an invalid zip (Germany, 100000000).

@ralucaStan ralucaStan self-requested a review December 10, 2021 16:45
Copy link
Contributor

@ralucaStan ralucaStan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please see my comments, I think there is a regression we need to fix.

@mikejolley
Copy link
Member Author

@ralucaStan can you try now? I think it was the let.

@ralucaStan ralucaStan self-requested a review December 13, 2021 15:08
Copy link
Contributor

@ralucaStan ralucaStan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works as expected. thanks for updating the testing steps as well

@github-actions github-actions bot added this to the 6.6.0 milestone Dec 13, 2021
@mikejolley mikejolley merged commit 2f66545 into trunk Dec 13, 2021
@mikejolley mikejolley deleted the fix/4894-error-handling branch December 13, 2021 15:31
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
* Add error message for fetch errors on checkout

* Update message text

* revert gitignore change

* Remove errorNotice variable
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
* Add error message for fetch errors on checkout

* Update message text

* revert gitignore change

* Remove errorNotice variable
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Blocks checkout shows infinite loading on ajax failure
2 participants