[UI]: How to catch the `TON_CONNECT_SDK_ERROR` error?

[bchevalier]

Your Question

My application is triggering tons of TON_CONNECT_SDK_ERROR errors with the message Operation aborted. However, those are all uncaught promise exceptions. How can I catch them to handle them properly?

Here is the code of the application, note that I am handling errors in the status change:

    this.tonConnectUI = new TonConnectUI({
      manifestUrl: `${myUrl}/tonconnect-manifest.json`,
    });

    this.tonConnectUI.onStatusChange(
      async (status: ConnectedWallet | null) => onStatusChange,
      (error: TonConnectError) => {
        trackError('WalletConnectError', {
          name: error.name,
          message: error.message,
        });
      },

Context

No response

What have you tried so far?

No response

Relevant Code or Commands

No response

Documentation Check

• [X] Yes, I have checked the documentation.

[0x1337z]

Same issue here

[Sotatek-CanPham]

same issue in Nextjs

[zapletnev]

The same

[abhiyana]

Did you get any solution? I am facing same issue.

[bchevalier]

@abhiyana

One possible way to catch it is by using the javascript unhandledrejection event and identifying the ton connect sdk error:

function isTonConnectSdkError(error: Error | string) {
  const tonConnectError = 'TON_CONNECT_SDK';
  if (typeof error === 'string') {
    return error.includes(tonConnectError);
  }

  return error.message?.includes(tonConnectError);
}

window.addEventListener('unhandledrejection', function (rejection: PromiseRejectionEvent) {
  // handle rejection
  if (isTonConnectSdkError(rejection.reason)) {
    // ignore TonConnect sdk errors, they are handlded by sentry
    return;
  }
});

It's not ideal though because it does not prevent third party dependencies from catching those unhandled promise errors as well (such as analytics or error aggregation components).

[SharmilaBlessy27]

Hi everyone,

I’m using the tonconnect/ui-react package to trigger wallet connections in my project. The wallet connection is established successfully, but after 5 to 10 minutes, I start seeing the following error:

[TON_CONNECT_SDK_ERROR] TonConnectError Operation aborted Error: Operation aborted at abortController.signal.addEventListener.once (http://localhost:3000/static/js/bundle.js:64575:14) at signal.addEventListener.once (http://localhost:3000/static/js/bundle.js:64414:108) ...

Initially, everything works fine, but after some time, this error pops up. It seems to be related to the connection aborting after a certain amount of inactivity.

Has anyone encountered this issue or knows what could be causing the connection to abort after a delay? Please any one help me to resolve this?

[khanhhaquang]

[chengxianlov]

the same

[meri-maki]

same thing i want to implement cannot catch TonConnectUIProvider errors.....

[Tvenus]

The same

[minhkhoi8888]

the same

[runi-k]

same issue

[SaeedSoheili]

i have same issue

[Tvenus]

I solved that problem.

[uintptrs]

I solved that problem.

Would you share the step's you taken for solving this issue?

[Tvenus]

@uintptrs

layout.tsx

import { TonConnectUIProvider } from '@tonconnect/ui-react';

...

==================================================

And create tonconnect-manifest.json in the "public" folder.

Structure of tonconnect-manifest.json

  {
"url": "your site url", 
"name": "name",
"iconUrl": "iconUrl"
 }