Sida loo hagaajiyo khaladaadka 404 ka dib marka website-ka ama app-ka la geeyo

Haddii app-kaagu kombiyuutarka ku shaqeeyo laakiin bogagga ay 404 siiyaan geynta ka dib, sababta ugu badan waa SPA routing (single-page app) oo maqan: server-ku wuxuu raadinayaa fayl la yiraahdo /dashboard oo aan jirin, sababtoo ah route-kaasi wuxuu ku jiraa JavaScript oo keliya. Xalku waa xeer fallback ah oo u adeegta index.html routes-ka app-ka. Sababo kale waa faylasha ka maqan output-ka build-ka, jidadka xarfaha weyn-yar ee case-sensitive ah, farqiga slash-ka ku dambeeya, base path khaldan, iyo API routes aan waligood la geyn.

Ka bilow inaad qortid URL-ka saxda ah ee 404 siiya iyo sida aad u gaartay. Qaabku wuxuu si toos ah u tilmaamaa sababta.

Tallaabo 1: Hel qaabka

Si aad u aragto status code-ka dhabta ah, fur developer tools (midig-riix → Inspect), u gudub tab-ka Network, dib u cusboonaysii, oo fiiri status-ka codsiga ugu horreeya.

Tallaabo 2: Ku dar SPA fallback

Kan waa kii caadiga ahaa. Single-page app React, Vue ama Svelte ah, server-ku wuxuu leeyahay faylal dhab ah oo yar: index.html iyo qaar ka mid ah JavaScript iyo CSS. Routes sida /dashboard ama /projects/42 waxaa maamula router browser-ka.

• Riixitaanka link-ka waa shaqeeyaa: router-ku wuxuu beddelaa URL-ka oo bogga cusub wuu sawiraa adigoon server-ka waydiin.
• Cusboonaysiinta ama furitaanka link-ka tooska ah way fashilmaysaa: browser-ku wuxuu server-ka ka waydiinayaa /dashboard, server-kuna ma leh fayl noocaas ah, wuuna soo celinayaa 404.

Xalku waa xeer leh: haddii codsigu aanu waafaqin fayl dhab ah, u adeeg index.html status 200, oo u ogolow router-ka inuu qabsado. Sida aad ku darto waxay ku xirantahay host-ka (hubi dokumentiyada host-kaaga ee hadda, sababtoo ah faahfaahinta way isbeddeshaa):

Hubi in xeerku aanu liqin faylalka dhabta ah: codsiyada /assets/app.js waa inay weli soo celiyaan faylka JavaScript. Haddii ay soo celiyaan index.html halkeeda, waxaad heleysaa bog madhan oo qalad “Failed to load module script” ah. Eeg sida loo hagaajiyo bog cad oo madhan.

Sidoo kale siiso router-ka route catch-all si URL-yada aan waafaqin bog kasta ay u muujiyaan “Page not found” qurux badan halkii ay ka muuqan lahayn wax aan lahayn.

Haddii aadan bedeli karin dejinta server-ka, hash routing (URL-yada sida /#/dashboard) ayaa dhibaatada ka fogeeya, sababtoo ah qaybta ka dambaysa # mar weligeed looma diro server-ka. Waa xal ku meel gaadh ah, ma aha doorashada ugu horreysa: URL-yadu waa kuwo aan qurux lahayn oo search engines-ka kuma habboona.

Framework-yada bogagga ku soo bandhigaya server-ka ama ku soo saaraya waqtiga build-ka (Next.js, Astro iyo kuwa la mid ah) badanaa waxay leeyihiin faylal dhab ah ama server routes bog kasta, sidaas darteed dhibaatadan halkaas ma caadi tahay. Sidoo kale isku mid ah waa bog aan waligiis lagu soo saarin waqtiga build-ka.

Tallaabo 3: Hubi waxa dhabta ah lagu geeyey

Haddii wax walba 404 siiyaan, server-ku wuxuu u badan yahay inuusan u adeegin app-kaaga la dhisay.

• Folder-ka saxda ah. Host-ku waa inuu daabacaa output-ka build-ka (caadi ahaan dist Vite-ka, build Create React App-ka, out static Next.js export-ka), ma aha root-ka mashruuca.
• Build-ku wuu shaqeeyey. Akhri log-ka geynta. Haddii build-ku fashilmay, host-ku waxa laga yaabaa inuusan geyn waxba, ama nooc hore.
• index.html waa heer sare folder-ka la daabacay, ma aha folder hoose.
• Base path-ku wuu waafaqsan yahay. Haddii app-ka lagu adeego example.com/app/, waa in lagu dhisaa base-kaas (Vite-ka base, React Router-ka basename), warna route kasta iyo asset kasta way lumaan.

Tallaabo 4: Hagaaji faylasha maqan iyo jidadka khaldan

Marka bogagga la furo laakiin assets-ka 404 siiyaan:

• Xasaasiyadda xarfaha. macOS iyo Windows badanaa waxay u arkaan Logo.png iyo logo.png isku fayl. Server-yada Linux badankood ma sidaas samaynayaan. Ka dhig tixraac kasta inuu si sax ah ula mid yahay magaca faylka dhabta ah.
• Faylasha ka baxsan build-ka. Vite-ka, faylasha ku jira public/ waa la koobiyeeyaa sida ay yihiin oo waxaa lagu tixraacaa root-ka (/logo.png). Faylasha code-ka ka soo dhoofiyo waa la isku xidhaa. Fayl meel kale mashruuca ku jira ayaa laga yaabaa inuusan waligiis la geyn.
• Jidadka relative-ka. images/photo.jpg waxaa lagu xallinayaa URL-ka hadda, sidaas darteed wuu jabaa /blog/post-1 dushiisa. Isticmaal /images/photo.jpg.
• Faylasha la soo upload-gareeyay oo lagu kaydiyay disk-ka local-ka. Haddii upload-yada isticmaalayaasha lagu qoray folder-ka server-ka, waa ay baabbi'ayaan markii nooc cusub la geeyo. Isticmaal kayd faylal oo saxan.

Tallaabo 5: Si isku mid ah u maamul trailing slashes

/about iyo /about/ waa URL-yo kala duwan. Host-yadu way kala duwan yihiin in ay ku daraan ama ka saaraan slash-ka, iyo is-khilaafka link-yadaada ama router-kaaga ayaa keeni kara 404 ama redirect loops. Dooro hal qaab, ka dhig link-yadaadu inay isticmaalaan, oo dejin host-ka inuu u dirayo qaabka kale. Isku mid ahaantu wuxuu sidoo kale caawiyaa search engines, kuwaas oo haddii kale arki kara laba nuqul oo bog kasta.

Tallaabo 6: Hagaaji API routes ee 404 siiya

Haddii bogga uu furmo laakiin Network tab-ku muujiyo codsiyada /api/... oo soo celinaya 404:

• Backend-ka lama geyn. Host-ka static wuxuu u adeegaa faylal oo keliya; backend-ku waa inuu ku shaqeeyo meel.
• Jidka wuxuu production-ka ku socdaa si kale. Horumarinta, proxy ayaa laga yaabaa inuu /api u wareejiyay server kale. Production-ka, host-ku wuxuu u baahan yahay rewrite la mid ah, ama frontend-ku waa inuu wicitaan u sameeyaa cinwaanka dhabta ah ee API-ga.
• SPA fallback-ka ayaa qabtay. Codsi API ah oo soo celiya index.html status 200 ah wuxuu muujinayaa in xeerka fallback-ku baaxad weyn yahay. Ka saar /api/* ka.

Codsiyada app-ka la daabacay ee /api/orders waxay soo celinayaan 404, laakiin preview-ka way shaqeeyaan. Hubi sida /api loo waddo preview-ka iyo app-ka la daabacay, oo ka dhig frontend-ka la daabacay inuu gaaro backend-ka si la mid ah.

Tallaabo 7: Dib u jiheey URL-yada hore

Haddii aad ka guurtay site kale ama aad dib u qaabeysay, URL-yada hore ee dadka iyo search engines-ku weli isticmaalaan waxay 404 siin doonaan. Ku dar 301 (joogto ah) redirect ka URL kasta oo hore ilaa gurigiisa cusub. Liis hay oo tijaabi tiro muuqasho ka dib markii la furay. Hagahayaga ku saabsan guurista site-ka WordPress wuxuu daboolayaa dhismaha liiskaas.

Tallaabo 8: Hubi domain-ka

Haddii app-ku ku shaqeeyo cinwaanka host-ka laakiin 404 siiyo custom domain-kaaga, domain-ku wuxuu laga yaabaa inuu tilmaamayo mashruuc khaldan, ama host-ku weli kuma xidhin domain-ka site-kaaga. Hubi DNS records-ka iyo dejinta domain-ka host-ka. Eeg sida loo xiro custom domain.

Ka dhig bogga 404 dhabta ah mid waxtar leh

Qaar 404 waa sax: qof URL ayuu qaldey. Ka dhig bogaas mid caawiya:

• Fariin gaagaaban iyo link-ka bogga hore iyo qaybaha muhiimka ah
• Sanduuq raadin, haddii site-ku leeyahay raadin
• Header-ka iyo navigation-ka isku mid ah sida qaybta kale ee site-ka

Halka habaynta aad ogolaato, soo celi status 404 dhab ah bogagga aan jirin. Fariinta “not found” ee loo soo celiyo status 200 waa waxa search engines-ku ku yiraahdaan soft 404, waxayna lumin kartaa waqtiga crawl-ka oo waxay carqaladeyn kartaa indexing-ka.

Khaladaadka caadiga ah

• In la tijaabiyo oo keliya riixitaan. Had iyo jeer ku tijaabi URL-yada deep ah adigoo ku dhex dhejinaya tab cusub oo cusboonaysiinaya.
• Fallback wax walba qabsada. Assets iyo API routes waxay soo celiyaan index.html, taas oo keenta bogag madhan iyo khaladaad API ah oo aan cad.
• Xarfaha weyn-yar oo is-khilaafaya oo kaliya server-ka ku jabaya.
• Geynta folder-ka source-ka halkii build output-ka.
• URL-yada dib loo qaabeeyay iyada oo aan redirects lahayn. Link kasta oo hore wuxuu noqonayaa 404.

404 Mythex

Mythex waxaad ka daabacdaa workspace-ka, frontends-ka static-ka ahna waxay geynaan sida static sites. Haddii bog la daabacay 404 siiyo, siiso agent-ka URL-ka saxda ah, sheeg in ay ku dhacdo cusboonaysiinta iyo mid riixitaanka, iyo waxa Network tab-ku muujiyo, oo weydii inuu hubiyo routing-ka. Ka dib hagaajinta dib u daabac, sababtoo ah app-ka nool waa snapshot ilaa aad dib u daabacdo. Haddii aad dhowaan beddeshay mashruuca oo site-ka nool uu u muuqdo mid hore, dib u daabac oo hard-refresh samee. Isticmaal Fix with AI dialog-ka daabacaadda haddii build-ku fashilmo. Eeg Sida loo daabaco iyo Publish troubleshooting docs-ka, iyo hagahayaga debugging app AI lagu dhisay.

Liiska 404

• Waxaa la qoray URL-yada saxda ah ee 404 siiya iyo haddii ay ku dhacaan riixitaan, cusboonaysiin ama labaduba
• SPA fallback-ku wuxuu u adeegaa index.html routes-ka app-ka, status 200
• Fallback-ku wuxuu ka saaraa faylasha dhabta ah iyo /api/*
• Router-ku wuxuu leeyahay route catch-all oo ah “not found”
• Folder-ka output-ka build-ka ayaa la daabacay, build-kuna wuu guuleystay
• Base path-ku wuxuu waafaqsan yahay meesha app-ka la adeegayo
• Xarfaha magaca faylka waxay waafaqaan tixraac kasta
• Jidadka assets-ka waxay ku bilaabmaan /
• Qaabka trailing slash-ka waa isku mid
• API routes waa la geeyay oo production-ka lagu waddo
• 301 redirects URL-yada hore
• Deep links waa la tijaabiyay adigoo ku dhex dhejinaya tab cusub

Su'aalaha