[UI]: Errors impossible to catch and slows user progression in React (dev only)

[bchevalier]

Describe the bug

Some errors are not caught by the errorHandlers of the onStatusChange setter.

For instance, upon calling tonConnectUI.openModal(), after selecting the OKX Wallet, the error [TON_CONNECT_SDK_ERROR] TonConnectError Aborted after attempts 1 is uncaught by the tonConnectUi component and is then caught by React which displays an error overlay.

Expected behavior

I expected to be able to catch every error, including the abort error inside the errorHandlers callback of the onStatusChange setter.

Current behavior

Instead the error cannot be caught.

Steps to Reproduce

• Install the OKX Wallet browser extension.
• Use the following code to trigger the wallet connection:

    const tonConnectUI = new TonConnectUI({
      manifestUrl,
    });

    tonConnectUI.onStatusChange(
      async (status: ConnectedWallet | null) => {
        // do something here
      },
      (error: TonConnectError) => {
        // handle error here
        console.error('error caught:', error);
      },
    );

    await tonConnectUI.openModal();

• Select the "Browser Extension" log-in method when prompted

Environment

npm ls @tonconnect/{ui-react,ui,sdk,protocol,isomorphic-fetch,isomorphic-eventsource}:
├─┬ @tonconnect/[email protected]
│ ├── @tonconnect/[email protected]
│ ├── @tonconnect/[email protected]
│ └── @tonconnect/[email protected]
├─┬ @tonconnect/[email protected]
│ └── @tonconnect/[email protected] deduped
└─┬ @tonconnect/[email protected]
└── @tonconnect/[email protected] deduped

OS: MacOS v13.5
Browser: Chrome v131.0.6778.109

Additional context

No response