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

1 files changed, 2 insertions, 2 deletions

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;
         }