App Lovable bị trang trắng: tìm nguyên nhân trong console

Khi app Lovable hiện trang trắng, hãy mở chính site đã publish, mở công cụ developer của trình duyệt và tải lại trang. Dòng đỏ đầu tiên trong tab Console cho biết nguyên nhân, còn tab Network xác nhận lại. Dán đúng dòng đó cho Lovable, và chuyển sang Plan mode nếu đã sửa một lần mà không được.

Ngày 26/10/2026, mình cố tình làm hỏng một app React nhỏ và một app TanStack Start, rồi ghi lại console nói gì mỗi lần. Năm nguyên nhân khác nhau cho ra năm dòng lỗi đầu tiên khác nhau. Mỗi cái có cách sửa riêng.

Trước hết: chỉ site đã publish bị hỏng thôi sao?#

Mở preview và địa chỉ đã publish cạnh nhau. Nếu cả hai đều trắng, vấn đề nằm trong code, và Lovable thấy được nó trong preview. Nếu chỉ site đã publish bị trắng, khác biệt nằm ở thứ được publish: cấu hình, các file, hoặc phía hosting.

Kiểm tra nền tảng trước khi nghi code. Ngày 27/3/2026, trang trạng thái của Lovable báo “an issue that is causing published projects to display blank pages” và cho biết publish lại thì hết (trang trạng thái Lovable). Nếu status.lovable.dev đang có sự cố, hãy chờ hoặc publish lại.

Đọc dòng đỏ đầu tiên#

Trên Chrome hoặc Edge, bấm F12 (Cmd+Option+J trên Mac) và mở tab Console. Sau đó mở tab Network, tích "Disable cache" rồi tải lại. Bỏ qua mọi thứ sau lỗi đầu tiên: các lỗi phía sau thường chỉ là cùng một sự cố lan ra.

Đây là những dòng đầu tiên mình thấy, và ý nghĩa của từng dòng.

"X is required" ngay lúc tải trang: thiếu cấu hình#

Uncaught Error: supabaseUrl is required. xuất hiện trước khi bất cứ thứ gì hiện lên. App tạo Supabase client ngay khi file được nạp, mà bản build đã publish không có URL cho nó. Với app single-page, kết quả là trang trắng. Với app TanStack Start, nơi server render trang trước, trang trông vẫn bình thường nhưng không gì bấm được: nút "Add to cart" không phản hồi trong cả 3/3 lần.

Thứ cần sửa là giá trị, không phải code. Thêm biến môi trường hoặc secret còn thiếu vào nơi app đã publish đọc nó, rồi publish lại. Nhờ Lovable liệt kê các biến mà code cần và mỗi biến được đặt ở đâu.

"Cannot read properties of undefined": lỗi khi render#

TypeError: Cannot read properties of undefined (reading 'name') kèm tên một component trong stack nghĩa là component đó nhận dữ liệu không đúng hình dạng nó chờ. Không có error boundary, React gỡ cả trang. Lovable sửa được component đó; stack cho nó biết là component nào.

Nhờ thêm cả error boundary, để lần lỗi sau chỉ thay một phần trang chứ không mất cả trang. Bài error boundary và lỗi async trong React đã thử xem boundary bắt được lỗi nào và lỗi nào nó không bao giờ thấy.

Với app TanStack Start, lỗi trong một trang hiện ra màn hình dự phòng của router, "Something went wrong!", thay vì trang trắng. Console có lỗi thật, và nếu app chưa có error component thì có thêm cảnh báo lỗi đó “wasn't caught by any route”.

"Failed to fetch dynamically imported module": tab cũ#

TypeError: Failed to fetch dynamically imported module: …/assets/settings-….js sau một lần publish nghĩa là tab của người dùng vẫn đang chạy bản cũ. Nó xin một file của trang mà bản publish mới không còn. Tải lại trang là hết với người đó.

Vite, công cụ build app Lovable, bắn ra sự kiện vite:preloadError cho đúng trường hợp này, và tài liệu của Vite gợi ý tải lại trang (tài liệu Vite). Trong bản build TanStack Start của mình, sự kiện bắn ra cả 3/3 lần. Một đoạn xử lý tải lại đúng một lần, và dừng nếu file thật sự không còn:

if (typeof window !== "undefined") {  window.addEventListener("vite:preloadError", () => {    const last = Number(sessionStorage.getItem("reloaded-at") ?? 0);    if (Date.now() - last < 10_000) return; // vừa tải lại rồi: file thật sự đã mất    sessionStorage.setItem("reloaded-at", String(Date.now()));    window.location.reload();  });}

Mình đã thử việc sự kiện có bắn ra, chưa thử việc tải lại của đoạn code này. Vite cũng lưu ý HTML không được cache, nếu không lần tải lại sẽ mang về tên file cũ.

404 đỏ trong Network: mất file chính#

Nếu Console chỉ có Failed to load resource: the server responded with a status of 404 và không gì khác, hãy xem tab Network. Khi file lỗi là script chính, thường là index-<hash>.js, thì chưa dòng code nào của app chạy cả. Công cụ theo dõi lỗi không báo được trường hợp này, vì chính nó nằm trong phần code không tải được.

Publish lại trước đã. Nếu vẫn bị, so tên file mà HTML yêu cầu với những gì site đã publish đang có. Bài giám sát app vibe coding có một script 15 dòng kiểm tra việc này sau mỗi lần publish.

Đưa cho Lovable đúng dòng lỗi, đừng chỉ nói "hỏng rồi"#

Hướng dẫn của chính Lovable khuyên mô tả cái gì hỏng, ở đâu, chuyện gì đã xảy ra, và dán nguyên văn lỗi khi nó xảy ra “outside the preview, for example on your published site”. Hướng dẫn cũng viết “switching to Plan mode after one or two failed attempts is usually faster than trying again” (hướng dẫn debug của Lovable), tức là sau một hai lần sửa hỏng thì chuyển sang Plan mode sẽ nhanh hơn thử tiếp. Một prompt làm theo cả hai:

App đã publish của mình (không phải preview) bị trang trắng ở /settings.Lỗi đầu tiên trong console sau khi tải lại:TypeError: Failed to fetch dynamically imported module: https://my-app.lovable.app/assets/settings-Db7yFogk.jsNetwork: file đó trả 404. Preview vẫn chạy.Trước khi sửa code, giải thích nguyên nhân và bạn định thay đổi gì.

Để ý tên file. Ví dụ lỗi trong chính tài liệu Lovable, Q9() is undefined at …/assets/index-DWQbrtrQQj.js:435, trỏ vào một bundle đã minify. Nó cho biết code hỏng ở đâu trong file đã build, chứ không cho biết mở file nguồn nào. Source map đưa nó về đúng file và dòng, và hướng dẫn source map cho thấy Belvador áp dụng chúng thế nào.

Để lần sau bạn biết trước người dùng#

Mọi trường hợp trên đều xảy ra trên trình duyệt của người dùng, và trang nào cũng trả HTTP 200. Bạn chỉ biết vì có người báo. Một công cụ theo dõi lỗi khởi động trước code của app tự báo được bốn trên năm trường hợp; riêng mất bundle thì cần kiểm tra từ bên ngoài. Bài prompt cài đặt theo dõi lỗi cho Lovable có prompt cài cả hai trong một app Lovable, còn hướng dẫn TanStack Start liệt kê từng file mà nó sửa.

Giới hạn của các phép thử#

Hai app nhỏ, chỉ Chromium, chạy trên máy chứ không phải trên hosting của Lovable. Lỗi đầu tiên của bạn có thể viết khác trên Safari hay Firefox, và một app lớn có thể hỏng theo những cách danh sách này chưa có. Script và kết quả nằm trong thư mục bằng chứng của mình, còn trang TanStack Start cho thấy Belvador báo được gì trong các app này.