Prompt cài theo dõi lỗi cho app Lovable, và cách kiểm tra nó chạy

Muốn cài theo dõi lỗi cho đúng trong một app Lovable, hãy nói rõ cho Lovable sửa file nào, theo thứ tự nào, rồi bắt nó chứng minh từng phần đều báo được lỗi. Thứ tự là phần mà phần lớn prompt bỏ qua, và nó quyết định lỗi lúc khởi động có được báo hay không.

Mình rút ra điều này từ chính prompt của mình. Ngày 26/10/2026, mình chạy cách cài TanStack Start của Belvador với bốn kiểu lỗi trên trình duyệt, trên bản build production. Cách cài đang phát hành lúc đó không báo được lỗi nào trong 12 lần. Dời ba dòng và thêm một dòng, nó báo đủ cả 12.

Prompt cần chốt những gì#

Một agent cài theo dõi lỗi sẽ sửa những file bạn không tự viết, trong một app có khi bạn không đọc code. Prompt phải chốt sẵn những quyết định mà nếu không, agent sẽ tự đoán:

1. Đúng key của project và đúng phiên bản gói. DSN lấy từ project của bạn, không bao giờ lấy từ ví dụ.
2. Thứ tự file. Công cụ theo dõi lỗi khởi động trong file riêng, được import ở dòng đầu của mọi file entry.
3. Lỗi của route được báo ở đâu. Trong TanStack Start là qua defaultOnCatch, và hàm này cần có error component.
4. Thứ gì giữ nguyên. Middleware đang có giữ đúng thứ tự, header bảo mật giữ nguyên, Content-Security-Policy được bổ sung chứ không bị thay.
5. Không đụng logic nghiệp vụ. Agent chỉ thêm phần báo lỗi, không đổi gì khác.
6. Bằng chứng. Mỗi runtime một lần kiểm tra, cả trình duyệt lẫn server, và gỡ mọi code thử sau đó.

Điểm 4 đến 6 là thói quen của mọi prompt cẩn thận. Điểm 2 và 3 gắn với cách một app TanStack Start nạp code, và mình đã làm sai chúng.

Vì sao thứ tự quyết định lỗi nào được báo#

JavaScript chạy các import của một file trước code của chính file đó. MDN mô tả tác dụng của import “are produced before the rest of the module's code runs” (MDN). Nếu công cụ theo dõi lỗi khởi động trong thân src/router.tsx, thì mọi module trang mà router import đã chạy xong trước đó. Trên trình duyệt, src/start.ts và những gì nó import còn chạy sớm hơn nữa.

Mình làm hỏng một app TanStack Start theo bốn cách, cách nào cũng chỉ hỏng trên trình duyệt, rồi build bản production. Cách cài cũ khởi động trong src/router.tsx và đặt defaultOnCatch. Cách đã sửa import ./instrument đầu tiên trong src/start.ts và src/router.tsx, rồi thêm một error component.

Cách cài cũ giấu hai vấn đề riêng biệt:

• Lỗi khởi động xảy ra trước khi công cụ theo dõi lỗi tồn tại. Một module được root route hoặc src/start.ts import ném lỗi lúc đang nạp. Trang do server render vẫn nằm trên màn hình nhưng không bao giờ bấm được, và không có gì được báo.
• Lỗi trang rơi vào một màn hình dự phòng không báo gì. defaultOnCatch chỉ chạy bên trong error boundary của route, và route chỉ có boundary khi nó, hoặc router, có error component. Không có thì lỗi đi thẳng tới màn hình "Something went wrong!" ngoài cùng của TanStack Router, nơi chỉ ghi một cảnh báo và không gọi defaultOnCatch.

Chỉ thêm error component thì sửa được lỗi trang (3/3) nhưng không sửa được lỗi khởi động. Chỉ import đầu tiên trong src/router.tsx thì bắt được lỗi ở root route nhưng không bắt được lỗi trong src/start.ts. Phải đủ cả ba thay đổi. Mình đã cập nhật hướng dẫn cài đặt của Belvador, prompt trong app và hai test chống tái phát ngay trong ngày.

Những dòng nên thêm vào mọi prompt cài đặt#

Dù bạn dùng công cụ theo dõi lỗi nào, các quy tắc này hợp với app TanStack Start trên Lovable. Dán chúng dưới phần hướng dẫn cài đặt của công cụ đó:

Quy tắc cho lần cài này:- Đặt lệnh init của công cụ theo dõi lỗi trong file riêng, src/instrument.ts, bên trong  if (typeof window !== "undefined") { ... }. Không đặt tên instrument.client.ts.- Đặt import "./instrument" ở dòng đầu tiên của src/start.ts và src/router.tsx,  trên mọi import khác.- Lỗi của route phải tới được công cụ theo dõi lỗi: nếu root route trong src/routes/__root.tsx  chưa có errorComponent, thêm một cái hoặc truyền defaultErrorComponent cho createRouter.- Giữ nguyên middleware, header bảo mật và Content-Security-Policy đang có.  Chỉ bổ sung; không bao giờ thay thế.- Không sửa logic nghiệp vụ.- Xong thì liệt kê mọi file đã sửa và chạy các bước kiểm tra.

Tên file có ý nghĩa. TanStack Start chặn file *.client.ts được import từ src/router.tsx, vì file đó cũng chạy trên server; lần thử đầu của mình hỏng đúng vì lỗi này. Trong Belvador, trang project có sẵn prompt đầy đủ ở mục Paste into your AI agent, và nút Copy prompt tự điền DSN của bạn. Trang AI agents hiện cùng prompt đó, sinh ra từ chính code cài đặt, nên hai nơi không bao giờ lệch nhau.

Dặn Lovable giữ thứ tự#

Dòng import đầu tiên có thể bị dời đi sau này. Một lần sửa sau có thể thêm import phía trên nó hoặc sắp xếp lại file. Knowledge của Lovable là nơi đặt những quy tắc cần giữ qua mọi yêu cầu: “Define persistent instructions for Lovable using workspace knowledge and project knowledge” (tài liệu Lovable). Một dòng là đủ:

Luôn giữ import "./instrument" là dòng đầu tiên của src/start.ts và src/router.tsx.

Kiểm tra nó chạy, kể cả lúc khởi động#

"Đã thêm" khác với "đã báo được". Prompt của Belvador kết thúc bằng một lần kiểm tra kết nối cho mỗi runtime. verifyIntegration() trên trình duyệt và trong một route server tạm thời trả về verified, problem hoặc unconfirmed, và một lệnh đọc lại cho thấy kiểm tra nào đã tới server của bạn (hướng dẫn kiểm tra kết nối). Các lần kiểm tra này không bao giờ thành issue hay cảnh báo.

Sau đó thử đúng trường hợp đã làm hỏng cách cài cũ, ngay trong preview:

1. Thêm throw new Error("startup test") lên đầu một file nhỏ mà src/routes/__root.tsx import.
2. Mở preview. Trang sẽ đứng im hoặc hiện lỗi, và công cụ theo dõi lỗi phải hiện "startup test".
3. Xoá dòng đó.

Nếu ở bước 2 công cụ theo dõi lỗi không hiện gì, thứ tự import đang sai. Trong thí nghiệm, server dev và bản build production cho cùng kết quả, nên preview là chỗ hợp lý để thử việc này.

Khi Lovable làm sai giữa chừng, hướng dẫn của chính nó khuyên chuyển sang Plan mode “after one or two failed attempts” (hướng dẫn debug của Lovable), tức sau một hai lần sửa không được. Bài Claude Code và lỗi production đã thử vì sao đưa đúng lỗi tốt hơn mô tả lỗi khi giao bug cho agent.

Lovable đã có sẵn những gì#

Lovable có Project monitoring riêng, đang beta trên các gói trả phí. Nó xem lại code và lỗi gần đây của người dùng theo lịch, rồi gửi email cho chủ project khi có phát hiện quan trọng (tài liệu Project monitoring). Nếu có thì cứ bật.

Một công cụ theo dõi lỗi riêng bổ sung thứ mà lần rà soát theo lịch không có: từng lỗi ngay khi nó xảy ra, gom thành issue, kèm stack và release, và cảnh báo tới nơi bạn sẽ thấy. Với Belvador, đó là cảnh báo tới Slack, Telegram hoặc email của chính bạn, và dữ liệu lỗi nằm trên server trong tài khoản Hetzner của bạn. Bài debug trang trắng nói về kiểu hỏng mà cả hai đều không báo được, là bundle chính không bao giờ tải, còn bài giám sát app vibe coding thêm phần kiểm tra từ bên ngoài cho nó.

Giới hạn của thí nghiệm#

Một app TanStack Start giả lập, bốn kiểu lỗi, chỉ Chromium, server chạy trên Node chứ không phải Cloudflare Workers. Các lỗi đều nằm trên trình duyệt, đúng chỗ mà thứ tự import có ý nghĩa. Mình chưa thử gói TanStack Start của các công cụ theo dõi lỗi khác; các quy tắc trên đến từ cách ES module và TanStack Router hoạt động, không từ một sản phẩm cụ thể nào. Hướng dẫn TanStack Start và trang TanStack Start có cách cài đầy đủ của Belvador.