[Bug]: App crashed on init call

[Volaheck]

Telegram Application

Telegram for Android

Describe the Bug

App crashed when you try to initialize the sdk on android
Telegram client: 11.6.2
Android: 15
@telegram-apps/sdk-react: 2.0.23

To Reproduce

Steps to reproduce the behavior:

1. import init from "@telegram-apps/sdk-react"
2. call init()
3. try to launch your application using telegram client (v11.6.2) for android 15
4. see crash of application

to reproduce use following snippet (react, ts, TMA)

import { initNavigator, retrieveLaunchParams } from "@telegram-apps/sdk";
import { init, miniApp, swipeBehavior, viewport } from "@telegram-apps/sdk-react";

(() => {
    init();
    if (miniApp.mount.isAvailable()) {
        miniApp.mount();
        miniApp.ready();
        miniApp.bindCssVars();
    }

    if (swipeBehavior.mount.isAvailable()) {
        swipeBehavior.mount();
        swipeBehavior.disableVertical();
    }

    const initDataRaw = retrieveLaunchParams().initDataRaw;
    if (!initDataRaw) return;

    OpenAPI.HEADERS = {
        Authorization: initDataRaw,
    };
})();

error with crash:

Expected Behavior

SDK initialized succesfully

[heyqbnk]

Unfortunately, I have no Android device to look into the issue. Could you show the code area around the thrown error? Just to understand what throws it, because there is no such error in the SDK

[Volaheck]

current version with this bug:

import { Route, Router } from "react-router-dom";
import { Routes } from "react-router";
import { Global } from "@emotion/react";
import { SkeletonTheme } from "react-loading-skeleton";
import { useTonEventHandler } from "@hooks/use-ton-event-handler";
import { CustomToastContainer } from "@shared/components/custom-toast-container";
import { Portal } from "@shared/components/portal";
import { Loader } from "@app/components/loader";
import { Game } from "@game";
import { OpenAPI } from "@api/generated";
import { globalStyles } from "./styled";
import { Leaderboard } from "./views/leaderboard";
import { Play } from "./views/play";
import { Purchase } from "./views/purchase";
import { Store } from "./views/store";
import { Wallet } from "./views/wallet";

import "react-loading-skeleton/dist/skeleton.css";
import "@mocks/telegram";

import { useEffect, useMemo } from "react";
import { useIntegration } from "@telegram-apps/react-router-integration";
import { initNavigator, retrieveLaunchParams } from "@telegram-apps/sdk";
import { init, miniApp, swipeBehavior, viewport } from "@telegram-apps/sdk-react";
import { useInitTheme } from "@hooks/use-init-theme";

(() => {
    init();
    if (miniApp.mount.isAvailable()) miniApp.mount();
    if (miniApp.ready.isAvailable()) miniApp.ready();
    if (miniApp.bindCssVars.isAvailable()) miniApp.bindCssVars();
    if (swipeBehavior.mount.isAvailable()) swipeBehavior.mount();
    if (swipeBehavior.disableVertical.isAvailable()) swipeBehavior.disableVertical();

    const initDataRaw = retrieveLaunchParams().initDataRaw;
    if (!initDataRaw) return;

    OpenAPI.HEADERS = {
        Authorization: initDataRaw,
    };
})();

(async () => {
    if (viewport.mount.isAvailable()) await viewport.mount();
    if (viewport.expand.isAvailable()) viewport.expand();
    if (viewport.bindCssVars.isAvailable()) viewport.bindCssVars();
})();

export const App = () => {
    useTonEventHandler();
    const theme = useInitTheme();

    const navigator = useMemo(() => initNavigator("app-navigation-state"), []);
    const [location, reactNavigator] = useIntegration(navigator);

    useEffect(() => {
        navigator.attach();
        return () => navigator.detach();
    }, [navigator]);

    return (
        <SkeletonTheme
            baseColor={theme.colors.skeletonBaseColor}
            highlightColor={theme.colors.skeletonHighlightColor}
            borderRadius={20}
            enableAnimation
        >
            <Global styles={globalStyles} />
            <Loader>
                <Router location={location} navigator={reactNavigator}>
                    <Routes>
                        <Route path="/wallet" element={<Wallet />} />
                        <Route path="/leaderboard" element={<Leaderboard />} />
                        <Route path="/store" element={<Store />} />
                        <Route path="/purchase" element={<Purchase />} />
                        <Route path="/game" element={<Game />} />
                        <Route path="/" element={<Play />} />
                    </Routes>
                </Router>
            </Loader>
            <Portal>
                <CustomToastContainer />
            </Portal>
        </SkeletonTheme>
    );
};

If I remove everything related to @telegram-apps/sdk-react and @telegram-apps/react-router-integration except for init, the issue persists. Only after removing init() does the application stop crashing.

[Volaheck]

The issue was resolved immediately after I made the IIFE asynchronous, even though all the functions inside it are synchronous. This is rather non-obvious behavior. However, even after this, I get the error 'Java bridge method can't be invoked on a non-injected object' when I try to use hapticFeedback (only for Android). Also for each call I use isAvailable or ifAvailable methods

[Volaheck]

My problem has been resolved after i remove this code:

import { mockTelegramEnv } from "@telegram-apps/sdk-react";

mockTelegramEnv({
    themeParams: {
        accentTextColor: "#6ab2f2",
        bgColor: "#17212b",
        buttonColor: "#5288c1",
        buttonTextColor: "#ffffff",
        destructiveTextColor: "#ec3942",
        headerBgColor: "#17212b",
        hintColor: "#708499",
        linkColor: "#6ab3f3",
        secondaryBgColor: "#232e3c",
        sectionBgColor: "#17212b",
        sectionHeaderTextColor: "#6ab3f3",
        subtitleTextColor: "#708499",
        textColor: "#f5f5f5",
    },
    initData: {
        user: {
            id: 99281932,
            firstName: "Andrew",
            lastName: "Rogue",
            username: "rogue",
            languageCode: "en",
            isPremium: true,
            allowsWriteToPm: true,
        },
        hash: "89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31",
        authDate: new Date(1716922846000),
        signature: "abc",
        startParam: "debug",
        chatType: "sender",
        chatInstance: "8428209589180549439",
    },
    initDataRaw: new URLSearchParams([
        [
            "user",
            JSON.stringify({
                id: 99281932,
                first_name: "Andrew",
                last_name: "Rogue",
                username: "rogue",
                language_code: "en",
                is_premium: true,
                allows_write_to_pm: true,
            }),
        ],
        ["hash", "89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31"],
        ["auth_date", "1716922846"],
        ["start_param", "debug"],
        ["signature", "abc"],
        ["chat_type", "sender"],
        ["chat_instance", "8428209589180549439"],
    ]).toString(),
    version: "7.2",
    platform: "android",
});

[Volaheck]

it remains to understand why the use of mocks leads to such a error

[zxvfc]

I also faced the same issue after migrating from @telegram-apps/sdk-react 2.0.23 to 3.0.5.

In my case, it fails only when running the TWA in Telegram, but it works fine in the browser. It seems that the mocked data conflicts with the data provided by Telegram, and instead of handling it gracefully, the application just crashes.

Since running in a browser is useful during development, I added a call to isTMA(), which returns true or false depending on where the application was started, and applied mocks only if the app was not running in Telegram.

Here’s an example from sdk-react. Also, it's worth mentioning that starting from version 3.x.x, isTWA no longer supports 'simple' as an argument, so I just call the function without any arguments.