логи

lib/components/QuizAnswerer.tsx

@@ -22,6 +22,9 @@ import { HelmetProvider } from "react-helmet-async";
 import "moment/dist/locale/ru";
 import { useQuizStore, setQuizData, addquizid } from "@/stores/useQuizStore";
 import { initDataManager, statusOfQuiz } from "@/utils/hooks/useQuestionFlowControl";
+
+console.log("🚀 QuizAnswerer: Component module loaded");
+
 moment.locale("ru");
 const localeText = ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
 
@@ -42,6 +45,13 @@ function QuizAnswererInner({
   className,
   disableGlobalCss = false,
 }: Props) {
+  console.log("🔧 QuizAnswererInner: Component function called with props:", {
+    quizId,
+    preview,
+    changeFaviconAndTitle,
+    disableGlobalCss,
+  });
+
   const [quizViewStore] = useState(createQuizViewStore);
   const [rootContainerWidth, setRootContainerWidth] = useState<number>(() => window.innerWidth);
   const rootContainerRef = useRef<HTMLDivElement>(null);
@@ -51,18 +61,21 @@ function QuizAnswererInner({
   const r = useQuizStore();
   const { settings, questions } = useQuizStore();
 
+  console.log("🔍 QuizAnswererInner: Component state initialized");
+
   useEffect(() => {
+    console.log("🔧 QuizAnswererInner: addquizid effect triggered");
     addquizid(quizId);
   }, []);
 
   useEffect(() => {
-    console.log(settings);
+    console.log("🔍 QuizAnswererInner: Debug effect - settings:", settings);
-    console.log(questions);
+    console.log("🔍 QuizAnswererInner: Debug effect - questions:", questions);
-    console.log("r");
+    console.log("🔍 QuizAnswererInner: Debug effect - r:", r);
-    console.log(r);
   }, [questions, settings]);
 
   useEffect(() => {
+    console.log("🔧 QuizAnswererInner: Metrics effect triggered");
     setTimeout(() => {
       vkMetrics.quizOpened();
       yandexMetrics.quizOpened();
@@ -72,7 +85,7 @@ function QuizAnswererInner({
   useEffect(() => {
     //Хук на случай если данные переданы нам сразу, а не "нам нужно их запросить"
     if (quizSettings !== undefined) {
-      console.log("QuizAnswerer: calling setQuizData with quizSettings");
+      console.log("🔧 QuizAnswererInner: setQuizData effect triggered with quizSettings");
       setQuizData(quizSettings);
       initDataManager({
         status: quizSettings.settings.status,
@@ -82,6 +95,7 @@ function QuizAnswererInner({
   }, [quizSettings]);
 
   useLayoutEffect(() => {
+    console.log("🔧 QuizAnswererInner: Layout effect triggered");
     if (rootContainerRef.current) setRootContainerWidth(rootContainerRef.current.clientWidth);
   }, []);
 
@@ -98,19 +112,44 @@ function QuizAnswererInner({
     };
   }, []);
 
+  console.log("🔍 QuizAnswererInner: About to render, current state:");
+  console.log("🔍 QuizAnswererInner: isLoading:", isLoading);
+  console.log("🔍 QuizAnswererInner: error:", error);
+  console.log("🔍 QuizAnswererInner: settings keys count:", Object.keys(settings).length);
+  console.log("🔍 QuizAnswererInner: questions length:", questions.length);
+
   console.log("settings");
   console.log(settings);
-  if (isLoading && !questions.length) return <LoadingSkeleton />;
+  if (isLoading && !questions.length) {
+    console.log("🔍 QuizAnswererInner: Rendering LoadingSkeleton");
+    return <LoadingSkeleton />;
+  }
   console.log("error");
   console.log(error);
-  if (error) return <ApologyPage error={error} />;
+  if (error) {
+    console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to error");
+    return <ApologyPage error={error} />;
+  }
 
-  if (Object.keys(settings).length == 0) return <ApologyPage error={new Error("quiz data is null")} />;
+  if (Object.keys(settings).length == 0) {
-  if (questions.length === 0) return <ApologyPage error={new Error("No questions found")} />;
+    console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to empty settings");
+    return <ApologyPage error={new Error("quiz data is null")} />;
+  }
+  if (questions.length === 0) {
+    console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to no questions");
+    return <ApologyPage error={new Error("No questions found")} />;
+  }
 
-  if (questions.length === 1 && settings.cfg.noStartPage && statusOfQuiz != "ai")
+  if (questions.length === 1 && settings.cfg.noStartPage && statusOfQuiz != "ai") {
+    console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to quiz is empty");
     return <ApologyPage error={new Error("quiz is empty")} />;
-  if (!quizId) return <ApologyPage error={new Error("no quiz id")} />;
+  }
+  if (!quizId) {
+    console.log("🔍 QuizAnswererInner: Rendering ApologyPage due to no quiz id");
+    return <ApologyPage error={new Error("no quiz id")} />;
+  }
+
+  console.log("🔍 QuizAnswererInner: Rendering main quiz container");
 
   const quizContainer = (
     <Box
@@ -152,6 +191,8 @@ function QuizAnswererInner({
   );
 }
 export default function QuizAnswerer(props: Props) {
+  console.log("🔧 QuizAnswerer: Main component function called with props:", props);
+
   return (
     <HelmetProvider>
       <LocalizationProvider

lib/components/ViewPublicationPage/Footer.tsx

@@ -15,7 +15,18 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
   const theme = useTheme();
   const { questions, settings } = useQuizStore();
   const questionsAmount = questions.filter(({ type }) => type !== "result").length;
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  // Диагностика i18n в Footer
+  console.log("🔍 Footer: useTranslation called");
+  console.log("🔍 Footer: i18n instance:", i18n);
+  console.log("🔍 Footer: i18n.isInitialized:", i18n.isInitialized);
+  console.log("🔍 Footer: i18n.language:", i18n.language);
+  console.log("🔍 Footer: Testing translations:");
+  console.log("🔍 Footer: t('Step'):", t("Step"));
+  console.log("🔍 Footer: t('of'):", t("of"));
+  console.log("🔍 Footer: t('Prev'):", t("Prev"));
+  console.log("🔍 Footer: t('Next'):", t("Next"));
 
   return (
     <Box

lib/components/ViewPublicationPage/ViewPublicationPage.tsx

@@ -21,9 +21,13 @@ import unscreen from "@/ui_kit/unscreen";
 import { changeNextLoading, useQuizStore } from "@/stores/useQuizStore";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 
+console.log("🚀 ViewPublicationPage: Component module loaded");
+
 polyfillCountryFlagEmojis();
 
 export default function ViewPublicationPage() {
+  console.log("🔧 ViewPublicationPage: Component function called");
+
   const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizStore();
   const answers = useQuizViewStore((state) => state.answers);
   const ownVariants = useQuizViewStore((state) => state.ownVariants);
@@ -42,7 +46,12 @@ export default function ViewPublicationPage() {
   useYandexMetrics(settings?.cfg?.yandexMetricsNumber, preview);
   useVKMetrics(settings?.cfg?.vkMetricsNumber, preview);
 
+  console.log("🔍 ViewPublicationPage: Component state initialized");
+  console.log("🔍 ViewPublicationPage: currentQuizStep:", currentQuizStep);
+  console.log("🔍 ViewPublicationPage: currentQuestion:", currentQuestion);
+
   useEffect(() => {
+    console.log("🔧 ViewPublicationPage: unscreen effect triggered");
     const root = document.getElementById("root");
     const overlay = document.getElementById("hideoverlay");
 
@@ -70,7 +79,8 @@ export default function ViewPublicationPage() {
   if (settings.cfg.antifraud && recentlyCompleted) throw new Error("Quiz already completed");
   if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
 
-  if (!currentQuestion)
+  if (!currentQuestion) {
+    console.log("🔍 ViewPublicationPage: No current question, rendering error");
     return (
       <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
         <Typography
@@ -81,21 +91,27 @@ export default function ViewPublicationPage() {
         </Typography>
       </ThemeProvider>
     );
+  }
 
   const currentAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);
 
+  console.log("🔍 ViewPublicationPage: About to render quiz step:", currentQuizStep);
+
   let quizStepElement: ReactElement;
   switch (currentQuizStep) {
     case "startpage": {
+      console.log("🔍 ViewPublicationPage: Rendering startpage");
       quizStepElement = <StartPageViewPublication />;
       break;
     }
     case "question": {
       if (currentQuestion.type === "result") {
+        console.log("🔍 ViewPublicationPage: Rendering result form");
         quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
         break;
       }
 
+      console.log("🔍 ViewPublicationPage: Rendering question");
       quizStepElement = (
         <Question
           key={currentQuestion.id}

lib/components/ViewPublicationPage/tools/NextButton.tsx

@@ -10,7 +10,15 @@ interface Props {
 
 export default function NextButton({ isNextButtonEnabled, moveToNextQuestion }: Props) {
   const { settings, nextLoading } = useQuizStore();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  // Диагностика i18n в NextButton
+  console.log("🔍 NextButton: useTranslation called");
+  console.log("🔍 NextButton: i18n instance:", i18n);
+  console.log("🔍 NextButton: i18n.isInitialized:", i18n.isInitialized);
+  console.log("🔍 NextButton: i18n.language:", i18n.language);
+  console.log("🔍 NextButton: Testing translation:");
+  console.log("🔍 NextButton: t('Next'):", t("Next"));
 
   return nextLoading ? (
     <Skeleton

lib/components/ViewPublicationPage/tools/PrevButton.tsx

@@ -13,7 +13,16 @@ export default function PrevButton({ isPreviousButtonEnabled, moveToPrevQuestion
   const theme = useTheme();
   const { settings } = useQuizStore();
   const isMobileMini = useRootContainerSize() < 382;
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  // Диагностика i18n в PrevButton
+  console.log("🔍 PrevButton: useTranslation called");
+  console.log("🔍 PrevButton: i18n instance:", i18n);
+  console.log("🔍 PrevButton: i18n.isInitialized:", i18n.isInitialized);
+  console.log("🔍 PrevButton: i18n.language:", i18n.language);
+  console.log("🔍 PrevButton: Testing translation:");
+  console.log("🔍 PrevButton: t('Prev'):", t("Prev"));
+
   return (
     <Button
       disabled={!isPreviousButtonEnabled}

src/App.tsx

@@ -2,15 +2,23 @@ import { Box } from "@mui/material";
 import { useParams } from "react-router-dom";
 import QuizAnswerer from "../lib/components/QuizAnswerer";
 
+console.log("🚀 App: Component module loaded");
+
 // const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
 // const defaultQuizId = "b7dafa46-a535-4beb-b289-65253d14a951"; //looooong header
 const defaultQuizId = "3c49550d-8c77-4788-bc2d-42586a261514"; //тест визуала
 // const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
 
 export default function App() {
+  console.log("🔧 App: Component function called");
+
   const quizId = useParams().quizId || "";
   const currentUrl = window.location.pathname.slice(1);
 
+  console.log("🔍 App: quizId from params:", quizId);
+  console.log("🔍 App: currentUrl:", currentUrl);
+  console.log("🔍 App: final quizId:", quizId || currentUrl || "");
+
   return (
     <Box
       sx={{

src/i18n/i18n.ts

@@ -2,6 +2,10 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import Backend from "i18next-http-backend";
 
+console.log("🚀 Main i18n: Starting main i18n initialization...");
+console.log("🔍 Main i18n: i18next instance before init:", i18n);
+console.log("🔍 Main i18n: i18next isInitialized before init:", i18n.isInitialized);
+
 // 1. Функция для принудительного определения языка из URL
 const getLanguageFromURL = (): string => {
   const path = window.location.pathname;
@@ -10,11 +14,12 @@ const getLanguageFromURL = (): string => {
   const langMatch = path.match(/^\/(en|ru|uz)(\/|$)/i);
 
   if (langMatch) {
-    //console.log("Язык из URL:", langMatch[1]);
+    const detectedLang = langMatch[1].toLowerCase();
-    return langMatch[1].toLowerCase();
+    console.log("🔍 Main i18n: Detected language from URL:", detectedLang, "path:", path);
+    return detectedLang;
   }
 
-  //console.log('Язык не указан в URL, используем "ru"');
+  console.log('🔍 Main i18n: Language not specified in URL, using "ru"');
   return "ru"; // Жёсткий фолбэк
 };
 
@@ -46,11 +51,11 @@ i18n
       caches: [], // Не использовать localStorage
     },
     parseMissingKeyHandler: (key) => {
-      console.warn("Missing translation:", key);
+      console.warn("⚠️ Main i18n: Missing translation:", key);
       return key; // Вернёт ключ вместо ошибки
     },
     missingKeyHandler: (lngs, ns, key) => {
-      console.error("🚨 Missing i18n key:", {
+      console.error("🚨 Main i18n: Missing i18n key:", {
         key,
         languages: lngs,
         namespace: ns,
@@ -59,34 +64,41 @@ i18n
     },
   })
   .then(() => {
-    console.log("i18n initialized. Current language:", i18n.language);
+    console.log("✅ Main i18n: Initialization completed successfully");
-    console.log("Loading translations from:", `/locales/${i18n.language}.json`);
+    console.log("🔍 Main i18n: Current language:", i18n.language);
+    console.log("🔍 Main i18n: Loading translations from:", `/locales/${i18n.language}.json`);
+    console.log("🔍 Main i18n: i18n.isInitialized:", i18n.isInitialized);
+    console.log("🔍 Main i18n: i18n.store.data:", i18n.store.data);
   })
   .catch((err) => {
-    console.error("Ошибка i18n:", err);
+    console.error("❌ Main i18n: Initialization failed:", err);
   });
 
 // 3. Логирование всех событий
 i18n.on("languageChanged", (lng) => {
-  console.log("Язык изменён на:", lng);
+  console.log("🔄 Main i18n: Language changed to:", lng);
+});
+
+i18n.on("initialized", (options) => {
+  console.log("🎯 Main i18n: Initialized event fired with options:", options);
 });
 
 i18n.on("failedLoading", (lng, ns, msg) => {
-  console.error(`Ошибка загрузки ${lng}.json:`, msg);
+  console.error(`💥 Main i18n: Failed loading ${lng}.json:`, msg);
 
   // Если не удалось загрузить русский, пробуем английский
   if (lng === "ru") {
-    console.log("Пробуем загрузить английский язык как fallback");
+    console.log("🔄 Main i18n: Trying to load English as fallback");
     i18n.changeLanguage("en");
   }
 });
 
 i18n.on("loaded", (loaded) => {
-  console.log("Переводы загружены:", loaded);
+  console.log("📦 Main i18n: Translations loaded:", loaded);
 });
 
 i18n.on("missingKey", (lngs, namespace, key, res) => {
-  console.warn("Отсутствует ключ перевода:", { lngs, namespace, key, res });
+  console.warn("⚠️ Main i18n: Missing key event:", { lngs, namespace, key, res });
 });
 
 export default i18n;

src/i18n/i18nWidget.ts

@@ -5,7 +5,9 @@ import { initReactI18next } from "react-i18next";
 const getLanguageFromURL = (): string => {
   const path = window.location.pathname;
   const langMatch = path.match(/^\/(en|ru|uz)(\/|$)/i);
-  return langMatch ? langMatch[1].toLowerCase() : "ru"; // Фолбэк на 'ru'
+  const detectedLang = langMatch ? langMatch[1].toLowerCase() : "ru"; // Фолбэк на 'ru'
+  console.log("🔍 Widget i18n: Detected language from URL:", detectedLang, "path:", path);
+  return detectedLang;
 };
 
 // 2. Локали, встроенные прямо в конфиг
@@ -199,6 +201,10 @@ const r = {
   },
 };
 
+console.log("🚀 Widget i18n: Starting initialization...");
+console.log("🔍 Widget i18n: i18next instance before init:", i18n);
+console.log("🔍 Widget i18n: i18next isInitialized before init:", i18n.isInitialized);
+
 // 3. Конфигурация i18n без Backend
 i18n
   .use(initReactI18next)
@@ -220,11 +226,11 @@ i18n
       caches: [],
     },
     parseMissingKeyHandler: (key) => {
-      console.warn("Missing translation:", key);
+      console.warn("⚠️ Widget i18n: Missing translation key:", key);
       return key;
     },
     missingKeyHandler: (lngs, ns, key) => {
-      console.error("🚨 Missing i18n key:", {
+      console.error("🚨 Widget i18n: Missing i18n key:", {
         key,
         languages: lngs,
         namespace: ns,
@@ -233,21 +239,53 @@ i18n
     },
   })
   .then(() => {
-    console.log("i18n initialized. Current language:", i18n.language);
+    console.log("✅ Widget i18n: Initialization completed successfully");
-    console.log("Available languages:", i18n.languages);
+    console.log("🔍 Widget i18n: Current language:", i18n.language);
-    console.log("Available keys for ru:", Object.keys(r.ru));
+    console.log("🔍 Widget i18n: Available languages:", i18n.languages);
-    console.log("Available keys for en:", Object.keys(r.en));
+    console.log("🔍 Widget i18n: Available keys for ru:", Object.keys(r.ru));
-    console.log("Available keys for uz:", Object.keys(r.uz));
+    console.log("🔍 Widget i18n: Available keys for en:", Object.keys(r.en));
-    console.log("Looking for keys: Step, of, Prev, Next");
+    console.log("🔍 Widget i18n: Available keys for uz:", Object.keys(r.uz));
-    console.log("Step in ru:", r.ru.Step);
+    console.log("🔍 Widget i18n: Looking for keys: Step, of, Prev, Next");
-    console.log("of in ru:", r.ru.of);
+    console.log("🔍 Widget i18n: Step in ru:", r.ru.Step);
-    console.log("Prev in ru:", r.ru.Prev);
+    console.log("🔍 Widget i18n: of in ru:", r.ru.of);
-    console.log("Next in ru:", r.ru.Next);
+    console.log("🔍 Widget i18n: Prev in ru:", r.ru.Prev);
+    console.log("🔍 Widget i18n: Next in ru:", r.ru.Next);
+
+    // Проверяем, что ключи доступны через i18n
+    console.log("🔍 Widget i18n: Testing translations through i18n:");
+    console.log("🔍 Widget i18n: t('Step'):", i18n.t("Step"));
+    console.log("🔍 Widget i18n: t('of'):", i18n.t("of"));
+    console.log("🔍 Widget i18n: t('Prev'):", i18n.t("Prev"));
+    console.log("🔍 Widget i18n: t('Next'):", i18n.t("Next"));
+
+    // Проверяем состояние i18n
+    console.log("🔍 Widget i18n: i18n.isInitialized:", i18n.isInitialized);
+    console.log("🔍 Widget i18n: i18n.store.data:", i18n.store.data);
+    console.log("🔍 Widget i18n: i18n.store.options:", i18n.store.options);
+  })
+  .catch((error) => {
+    console.error("❌ Widget i18n: Initialization failed:", error);
   });
 
 // 4. Логирование событий
 i18n.on("languageChanged", (lng) => {
-  console.log("Language changed to:", lng);
+  console.log("🔄 Widget i18n: Language changed to:", lng);
+});
+
+i18n.on("initialized", (options) => {
+  console.log("🎯 Widget i18n: Initialized event fired with options:", options);
+});
+
+i18n.on("loaded", (loaded) => {
+  console.log("📦 Widget i18n: Loaded event fired:", loaded);
+});
+
+i18n.on("failedLoading", (lng, ns, msg) => {
+  console.error("💥 Widget i18n: Failed loading:", { lng, ns, msg });
+});
+
+i18n.on("missingKey", (lngs, namespace, key, res) => {
+  console.warn("⚠️ Widget i18n: Missing key event:", { lngs, namespace, key, res });
 });
 
 export default i18n;

src/main.tsx

@@ -2,8 +2,14 @@ import { createRoot } from "react-dom/client";
 import { RouteObject, RouterProvider, createBrowserRouter } from "react-router-dom";
 import App from "./App";
 import { StrictMode, lazy } from "react";
+
+console.log("🚀 Main: Starting main application...");
+console.log("🔍 Main: About to import main i18n...");
+
 import "./i18n/i18n";
 
+console.log("✅ Main: Main i18n imported successfully");
+
 const routes: RouteObject[] = [
   {
     path: "/",
@@ -38,8 +44,12 @@ const router = createBrowserRouter(routes);
 
 const root = createRoot(document.getElementById("root")!);
 
+console.log("🔧 Main: About to render application...");
+
 root.render(
   <StrictMode>
     <RouterProvider router={router} />
   </StrictMode>
 );
+
+console.log("✅ Main: Application rendered successfully");

src/widget.tsx

@@ -2,8 +2,14 @@ import QuizAnswerer from "@/components/QuizAnswerer";
 import { createRoot } from "react-dom/client";
 // eslint-disable-next-line react-refresh/only-export-components
 export * from "./widgets";
+
+console.log("🚀 Widget: Starting widget initialization...");
+console.log("🔍 Widget: About to import i18nWidget...");
+
 import "./i18n/i18nWidget";
 
+console.log("✅ Widget: i18nWidget imported successfully");
+
 // old widget
 const widget = {
   create({
@@ -15,11 +21,18 @@ const widget = {
     quizId: string;
     changeFaviconAndTitle: boolean;
   }) {
-    const element = document.getElementById(selector);
+    console.log("🔧 Widget: create() called with:", { selector, quizId, changeFaviconAndTitle });
-    if (!element) throw new Error("Element for widget doesn't exist");
 
+    const element = document.getElementById(selector);
+    if (!element) {
+      console.error("❌ Widget: Element for widget doesn't exist:", selector);
+      throw new Error("Element for widget doesn't exist");
+    }
+
+    console.log("✅ Widget: Element found, creating root...");
     const root = createRoot(element);
 
+    console.log("🔧 Widget: Rendering QuizAnswerer component...");
     root.render(
       <QuizAnswerer
         quizId={quizId}
@@ -27,7 +40,10 @@ const widget = {
         disableGlobalCss
       />
     );
+    console.log("✅ Widget: QuizAnswerer component rendered successfully");
   },
 };
 
+console.log("✅ Widget: Widget object created and exported");
+
 export default widget;