Вэб аппынхаа цагаан хоосон хуудсыг хэрхэн засах вэ

Цагаан хоосон хуудас гэдэг нь ихэвчлэн хоёр зүйлийн аль нэг: аппын JavaScript юу ч зурахаас өмнө унасан, эсвэл JavaScript огт ачаалагдаагүй. Browser console (хулганы баруун товч → Inspect → Console) нээгээд эхний улаан алдааг унш, дараа нь Network таб дээр ачаалагдаагүй файлуудыг шалга. Ихэнх шалтгаан бол орчны хувьсагч дутуу, base path буруу, build дуусаагүй, эсвэл нэг компонентын crash.

Энэ гарын авлага React, Vue болон ижил төстэй framework-ээр бүтээсэн нэг хуудсан аппуудад хамаарна (AI builder-ээр хийсэн аппуудыг оруулаад), хоосон хуудас хамгийн их тохиолддог газар.

Яагаад хуудас цагаан байдаг вэ

Орчин үеийн нэг хуудсан апп (SPA) хөтөчид маш хоосон HTML файл илгээдэг, ойролцоогоор:

<body>
  <div id="root"></div>
  <script type="module" src="/assets/index-a1b2c3.js"></script>
</body>

Дараа нь JavaScript тэр хоосон div дотор бүх хуудсыг бүтээдэг. Хэрэв скрипт ачаалагдахгүй эсвэл рендерлэхээс өмнө алдаа гаргавал div хоосон хэвээр үлдэж та цагаан харна. Хуудас харагдахуйц “эвдэрсэн” биш; зүгээр л хэзээ ч зурагдаагүй.

Тиймээс засвар үргэлж хуудсаас биш, developer tools-ээс эхэлдэг.

Алхам 1: Console уншина уу

Developer tools нээ: хуудсан дээр хулганы баруун товч дараад Inspect сонгох, эсвэл F12 (Mac дээр Cmd+Option+I) дар. Console таб руу орж хуудсаа дахин ачаалуул.

Эхний улаан алдааг хар; дараагийнх нь ихэвчлэн дагалдах үр дагавар. Юу гэж бичсэн нь шалтгааныг заана:

Console мессеж (ердийн хэлбэр)	Юу гэсэн үг вэ	Очих
`Cannot read properties of undefined (reading '...')`	Код мэдээлэл хүлээсэн боловч байгаагүй	Алхам 4
`... is not defined` / `... is not a function`	Импорт, хувьсагч, эсвэл тохиргоо дутуу	Алхам 4 эсвэл Алхам 3
`Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”`	Скриптийн URL JavaScript биш HTML буцаасан	Алхам 2
`Uncaught SyntaxError: Unexpected token '<'`	Ижил зүйл: JavaScript хүлээсэн газарт HTML	Алхам 2
`supabaseUrl is required`, `Missing API key` эсвэл ижил	Орчны хувьсагч хоосон	Алхам 3
`Access to fetch ... has been blocked by CORS policy`	Өөр домэйн рүү хүсэлт блоклогдсон	CORS алдааг засах
Ямар ч алдаа байхгүй	Рендер ажилласан ч юу ч харуулахгүй, эсвэл CSS нуусан	Алхам 6

Бүтэн алдааны текстийг, файлын нэр ба мөрийн дугаарын хамт хуулаад аваарай. AI builder ашиглаж байгаа бол шууд чат руу буулгаарай.

Алхам 2: Файлууд ачаалагдсаныг шалга

Network таб нээ, Disable cache-ийг товшоод дахин ачаалуул. .js болон .css файлуудын хүсэлтүүдийг хар.

JavaScript файл дээр 404 статус: хуудас серверт байхгүй файл хүсэж байна.
200 статус боловч төрөл нь text/html: сервер скриптийн оронд хуудас (ихэвчлэн SPA fallback-оор index.html өөрөө) буцаасан. Үндсэн шалтгаан нь адил: файл хуудас хүлээж байгаа газартаа байхгүй.

Түгээмэл шалтгаанууд:

Буруу base path. Апп example.com/app/ дээр үйлчилж байгаа боловч /assets/...-ээс файл ачаалахаар build хийгдсэн бол скрипт бүр алдана. Vite-д энэ нь vite.config-ийн base сонголт; Create React App-д homepage талбар; Next.js-д basePath. Апп үнэндээ үйлчилж буй газартай таарах ёстой.

Хуучирсан index.html. Build хэрэгслүүд файлдаа hash агуулсан нэр өгдөг, жишээ нь index-a1b2c3.js. Шинэ deploy-ийн дараа хуучин файл алга болно. Хэрэв хөтөч эсвэл CDN хуучин index.html-ийг кэшлэсэн хэвээр байвал тэр хуучин файлыг хүсээд юу ч олохгүй. Hard refresh (Cmd+Shift+R эсвэл Ctrl+Shift+R) үүнийг батална. Урт хугацааны засвар нь index.html-ийг богино эсвэл кэшгүй header-тэй, hash-тай файлуудыг удаан кэштэй үйлчлэх явдал.

Build дуусаагүй эсвэл deploy хийгдээгүй. Build бүтэлгүйтвэл хост хоосон эсвэл хуучин гаралтын хавтсыг үйлчилж болно. Build лог дээрх алдааг шалга.

Буруу хавтас нийтлэгдсэн. Хост build гаралтыг (ихэвчлэн dist эсвэл build) үйлчлэх ёстой, төслийн эх хавтсыг биш. Эх хавтсыг үйлчлэвэл /src/main.tsx руу заасан index.html гарна, үүнийг хөтөч ажиллуулж чадахгүй.

Алхам 3: Орчны хувьсагчдыг шалга

Фront end апп API хаяг эсвэл нийтийн түлхүүр гэх мэт тохиргоог build үед уншдаг. Хэрэв хувьсагч амьд build дээр дутуу бол createClient(undefined, undefined) гэх мэт код шууд унаж, хуудас цагаан болно.

Мэдэх зүйлс:

Vite-д зөвхөн VITE_ угтвартай хувьсагч хөтчийн кодод байна, import.meta.env.VITE_NAME гэж уншина. Create React App-д REACT_APP_; Next.js-д NEXT_PUBLIC_.
Эдгээр утгууд апп build хийгдэх үед бэхлэгддэг. Build-ийн дараа хувьсагч нэмэхэд build-ээ дахин хийж, deploy хийх хүртэл юу ч өөрчлөгдөхгүй.
Preview эсвэл локал компьютер .env файлтай байж болох ч production build-д байхгүй байж болно. Ижил хувьсагчдыг хост дээр тохируул.
Эдгээр угтвартай бүх зүйл нийтийн JavaScript-д орно. Зөвхөн нийтийн утгыг тэнд тавь, нууц түлхүүрийг хэзээ ч бүү тавь.

Хурдан туршилт: console-ийн алдаанд тохиргооны нэрийн ойролцоо undefined байгааг хай, эсвэл асуу:

Нийтлэгдсэн апп хоосон хуудас харуулж байна. Front end-ийн уншдаг орчны хувьсагч бүрийг жагсаа, амьд build дээр аль нь дутуу эсвэл хоосон байгааг шалга, дутуу байвал хоосон хуудас биш тодорхой алдааны мессеж харуул.

Алхам 4: Crash-ийг засах

Console дээр энгийн JavaScript алдаа харагдвал код рендерлэх явцад унасан. AI-аар бүтээсэн аппуудад түгээмэл шалтгаанууд:

Өгөгдөл хараахан ачаалагдаагүй. Компонент user ирэхээс өмнө user.name уншдаг. Засвар нь ачаалах төлөв, эсвэл optional chaining (user?.name).
Хоосон өгөгдөл. Шинэ бүртгэлд бичлэг байхгүй, гэтэл код жагсаалтад дор хаяж нэг зүйл байна гэж үзсэн.
Хүлээгээгүй өгөгдлийн хэлбэр. API жагсаалтын оронд алдааны объект буцаасан.
Дутуу импорт файл нэр солигдсон эсвэл зөөгдсөний дараа.
Зөвхөн браузерт байдаг API-г server-side рендерийн үед ашиглах, жишээ нь Next.js server component дээр window эсвэл localStorage.

AI-д бүтэн алдаа, хуудас, таны нэвтэрсэн бүртгэлийг өг:

Dashboard хуудас шинэ хэрэглэгчдэд хоосон байна. Console: TypeError: Cannot read properties of undefined (reading 'map'), ProjectList.tsx:18 дээр. Миний бүртгэл, төсөлтэй, ажилладаг. Хоосон бүртгэл дээр “Төсөл алга байна” харуулахаар засаад, шинэ бүртгэлээр preview дээр шалгаарай.

Алхам 5: Error boundary нэм

React-д нэг crash компонент бүхэл аппыг салгаж чаддаг тул жижиг алдаа бүрэн хоосон хуудас үүсгэдэг. Error boundary нь доорх рендерийн алдааг барьж, оронд нь нөөц харуулдаг компонент юм.

Гол маршрутуудын эргэн тойронд error boundary нэм, “Алдаа гарлаа” гэж Reload товчтой харуулж, алдааг console руу бүртгэ. Толгой хэсэг болон навигац нь гадна байлгаж, тэд үргэлж рендерлэгдэх ёстой.

Энэ нь алдааг засдаггүй, гэхдээ зочдод хоосон дэлгэцийн оронд мессеж харагдаж, та алдаа хаана гарсныг харна.

Алхам 6: Алдаа байхгүй, гэхдээ хоосон

Console цэвэр, скриптүүд ачаалагдсан бол:

Elements таб шалга. <div id="root"> дотор агуулга байна уу? Тийм бол рендерлэгдэж байгаа ч харагдахгүй: цагаан дээр цагаан текст, opacity: 0, display: none, эсвэл бүтэн дэлгэцийн элемент дарж байна.
Router шалга. Одоогийн URL-д тохирох маршрут байхгүй, “олдсонгүй” маршрутгүй бол зарим router юу ч рендерлэдэггүй. 404 хуудас харуулах catch-all маршрут нэм.
Mount цэгийг шалга. Код байгаа элементэд mount хийх ёстой. Хэрэв index.html дээр id="app" байгаа ч код root-ыг хайж байвал юу ч гарахгүй (React ихэвчлэн алдаа бичдэг).
Browser extension шалга. Private цонхноос туршаарай. Ad blocker заримдаа analytics эсвэл ads гэх мэт нэртэй скриптийг блоклодог.

Зөвхөн хуудсыг дахин ачаалахад хоосон болдог уу?

Нүүр хуудас ажилладаг ч /dashboard-ыг шинэчлэхэд хоосон эсвэл 404 гарвал сервер аппын маршрутуудад index.html илгээх талаар мэддэггүй. Энэ нь routing fallback асуудал бөгөөд deploy хийсний дараах 404 алдааг хэрхэн засах вэ гарын авлагад байна.

Түгээмэл алдаа

Эхний биш сүүлийн алдааг унших. Эхний улаан мөр ихэвчлэн шалтгаан.
Орчны хувьсагчийг build-гүйгээр тохируулах. Front end-ийн хувьсагчид build үед бэхлэгддэг.
Зөвхөн өөрийн бүртгэлээр турших. Хоосон бүртгэл дээрх crash бол хамгийн түгээмэл хоосон хуудасны шалтгаануудын нэг.
Deploy ажилласан гэж үзэх. Кодыг дебаг хийхээсээ өмнө build лог шалга.
Бүхнийг хөтчийн кэш гэж үзэх. Hard refresh нь үүнийг секундэд хасдаг; хуудас хоосон хэвээр байвал өөр зүйл.

Mythex дэх хоосон хуудас

Хэрэв Preview хоосон бол эхлээд аппыг ажиллаж байгааг шалга (Code → terminal нээ), дараа нь Mythex-аас зөв серверийг эхлүүлэхийг хүс, preview toolbar дээрх Refresh дар, эсвэл /fix ашигла. Нийтлэгдсэн URL хоосон бол баримт бичгийн зөвлөгөө: нэг минут хүлээж hard-refresh хий, нийтлэхээсээ өмнө орчны хувьсагч болон өгөгдлийн сан бэлэн эсэхийг шалга, мөн хостингийн хязгаараа шалга. Санаарай: нийтлэгдсэн апп нь агшин зуурын хуулбар тул засвараас хойш дахин нийтэл. Хэрэв өөрчлөлт шалтгаан болсон бол сүүлийн сайн хариултын дээр Revert to this point дарж төслөө буцаана. Харна уу: Асуудал шийдэх болон Нийтлэх асуудлыг шийдэх баримт бичгүүд, мөн AI-аар бүтээсэн аппыг дебаг хийх ерөнхий гарын авлага.

Цагаан хуудасны хяналтын жагсаалт

Console-ийн эхний улаан алдааг уншсан
Network таб дээр 404 эсвэл HTML буцаасан .js/.css файлуудыг шалгасан
Base path нь аппыг үйлчлэх газартай таарч байна
Build дууссан, build гаралтын хавтас нь нийтлэгдэж байна
Бүх front end орчны хувьсагч амьд build дээр тохирсон, дараа нь rebuild хийсэн
Crash засагдсан, хоосон болон шинэ бүртгэлд ч
Ирээдүйн алдаа мессеж харуулах error boundary байгаа
Үл мэдэгдэх URL-ийн catch-all маршрут байгаа
Hard refresh болон private цонхонд туршсан

Асуултууд

React ап яагаад цагаан хоосон хуудас харуулдаг вэ?

Ихэвчлэн юу ч зурахаас өмнө JavaScript унасан, эсвэл JavaScript файл огт ачаалагдаагүй байдаг. Browser console нээгээд улаан алдааг хар: тэр нь аль нь болох, мөн алдаа гарсан файл, мөрийг чинь харуулна.

Локалд ажилладаг апп яагаад deploy хийсний дараа хоосон хуудас харуулдаг вэ?

Хамгийн түгээмэл шалтгаанууд бол шууд build-ийн орчны хувьсагчийг тохируулаагүй байх, JavaScript болон CSS файлыг буруу замаар (base path-ийн зөрүү) хүсэх, мөн одоо байхгүй файлуудыг заасан хуучин кэшлэгдсэн index.html.

“Failed to load module script” гэдэг нь юу гэсэн үг вэ?

Browser JavaScript файл хүссэн боловч JavaScript биш HTML хуудас буцаасан байна, ихэвчлэн сайтын index.html эсвэл алдааны хуудас. Файлын зам буруу эсвэл файл серверт байхгүй тул build гаралт болон аппын base path тохиргоог шалга.

Нэг алдаа бүх хуудсыг хоосон болгохоос хэрхэн сэргийлэх вэ?

Error boundary нэм. React-д error boundary нь доорх хэсгийн рендерийн алдааг барьж, бүхнийг салгахын оронд нөөц мессеж харуулдаг компонент юм.