Move call to error reporter to end of handler so that even if reporting the error takes a while, it doesn't block the UI

4 files changed, 6 insertions, 6 deletions

diff --git a/packages/website/ts/components/eth_weth_conversion_button.tsx b/packages/website/ts/components/eth_weth_conversion_button.tsx
index e802b8782..f45b72d9b 100644
--- a/packages/website/ts/components/eth_weth_conversion_button.tsx
+++ b/packages/website/ts/components/eth_weth_conversion_button.tsx
@@ -109,11 +109,11 @@ export class EthWethConversionButton extends
             } else if (!_.includes(errMsg, 'User denied transaction')) {
                 utils.consoleLog(`Unexpected error encountered: ${err}`);
                 utils.consoleLog(err.stack);
-                await errorReporter.reportAsync(err);
                 const errorMsg = direction === Side.Deposit ?
                                  'Failed to wrap your ETH. Please try again.' :
                                  'Failed to unwrap your WETH. Please try again.';
                 this.props.dispatcher.showFlashMessage(errorMsg);
+                await errorReporter.reportAsync(err);
             }
         }
         this.setState({
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ac826fdf6..73850f3b9 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -594,10 +594,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             }
             globalErrMsg = 'Failed to fill order, please refresh and try again';
             utils.consoleLog(`${err}`);
-            await errorReporter.reportAsync(err);
             this.setState({
                 globalErrMsg,
             });
+            await errorReporter.reportAsync(err);
             return;
         }
     }
@@ -677,10 +677,10 @@ export class FillOrder extends React.Component<FillOrderProps, FillOrderState> {
             }
             globalErrMsg = 'Failed to cancel order, please refresh and try again';
             utils.consoleLog(`${err}`);
-            await errorReporter.reportAsync(err);
             this.setState({
                 globalErrMsg,
             });
+            await errorReporter.reportAsync(err);
             return;
         }
     }
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 4c15ed4a0..1c39a37d7 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -84,8 +84,8 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
             }
             utils.consoleLog(`Unexpected error encountered: ${err}`);
             utils.consoleLog(err.stack);
-            await errorReporter.reportAsync(err);
             this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
+            await errorReporter.reportAsync(err);
         }
     }
     private isAllowanceSet() {
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index ab4b04868..2e2ad74e3 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -590,10 +590,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
             }
             utils.consoleLog(`Unexpected error encountered: ${err}`);
             utils.consoleLog(err.stack);
-            await errorReporter.reportAsync(err);
             this.setState({
                 errorType: BalanceErrs.mintingFailed,
             });
+            await errorReporter.reportAsync(err);
             return false;
         }
     }
@@ -619,13 +619,13 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
         const responseBody = await response.text();
         if (response.status !== constants.SUCCESS_STATUS) {
             utils.consoleLog(`Unexpected status code: ${response.status} -> ${responseBody}`);
-            await errorReporter.reportAsync(new Error(`Faucet returned non-200: ${JSON.stringify(response)}`));
             const errorType = response.status === constants.UNAVAILABLE_STATUS ?
                               BalanceErrs.faucetQueueIsFull :
                               BalanceErrs.faucetRequestFailed;
             this.setState({
                 errorType,
             });
+            await errorReporter.reportAsync(new Error(`Faucet returned non-200: ${JSON.stringify(response)}`));
             return false;
         }