Theo dõi lỗi cho TanStack Start, trên trình duyệt và trên server

Trả lời nhanh#

• Một gói, @belvador/tanstack-start, gắn vào router, server entry và middleware.

• Gói báo lỗi trình duyệt, lỗi bị route error boundary bắt, và lỗi của server function, server route trên Workers.

• Chạy được với app làm bằng Lovable, vốn là app TanStack Start trên Cloudflare Workers.

• Redirect, notFound(), mã trạng thái dưới 500 và request bị huỷ không được báo.

Ba chỗ gắn, một gói#

Mỗi phần báo được thứ mà các phần kia bỏ lỡ, nên hướng dẫn gắn cả ba (hướng dẫn TanStack Start).

Cài đặt#

npm install @belvador/tanstack-start@0.6.1

Router#

import { init } from "@belvador/tanstack-start/client";// Imported first by src/start.ts and src/router.tsx. Runs only in the browser.if (typeof window !== "undefined") {  init({    dsn: "https://<public-key>@ingest.belvador.dev/<project-id>",    release: import.meta.env.VITE_APP_VERSION, // your build or commit id    environment: import.meta.env.MODE,  });}

import "./instrument"; // first line, before the route treeimport { withBelvadorRouter } from "@belvador/tanstack-start/client";// In getRouter(): wrap the options you already pass to createRouter.// createRouter(withBelvadorRouter({ routeTree, ...yourOptions }))// It reports route errors, calls your own defaultOnCatch after that, and adds// TanStack's error component only if you set no defaultErrorComponent.

Server entry#

import handler from "@tanstack/react-start/server-entry";import { withBelvador } from "@belvador/tanstack-start/server";// Requires Cloudflare Workers with nodejs_compat enabled.// If src/server.ts already exists, wrap its default export instead of `handler`.// vite.config.ts needs tanstackStart: { server: { entry: "server" } } (Lovable apps have it).export default withBelvador(  (env: { BELVADOR_DSN?: string; BELVADOR_RELEASE?: string }) => ({    dsn: env.BELVADOR_DSN ?? "https://<public-key>@ingest.belvador.dev/<project-id>",    release: env.BELVADOR_RELEASE,  }),  handler,);

Bước middleware và dòng Content Security Policy có trong hướng dẫn. Giữ nguyên những gì app đang làm: thêm vào src/server.ts hoặc src/start.ts hiện có, đừng thay thế chúng.

Yêu cầu#

• @tanstack/react-router và @tanstack/react-start 1.168 trở lên, React 18 hoặc 19.

• Cloudflare Workers có cờ nodejs_compat. App Lovable đã có sẵn.

Không chỉ có lỗi#

• Cron job trong cùng app báo check-in được bằng withMonitor() (theo dõi cron).

• Trace và log đi qua OTLP exporter chuẩn của OpenTelemetry (OpenTelemetry cho TanStack Start).

• Prompt cho AI agent trong hướng dẫn giúp cài gói này trong Lovable hoặc coding agent khác.

Giới hạn#

• Redirect, notFound(), lỗi có mã dưới 500 (gồm cả 499) và request người dùng tự huỷ không được báo — đó không phải bug.

• Lỗi ném trong route loader khi trang render trên server thường được báo từ trình duyệt, không kèm stack của server. Server function gọi từ loader vẫn giữ stack của server.

• Không có replay và tracing trên trình duyệt.

• Code server chạy ngoài middleware của Belvador được báo thành sự cố kết nối của project, để bạn tìm ra nó (sự cố kết nối).

Câu hỏi thường gặp#

Host trên Node.js thay vì Workers có chạy không?#

Nửa server được xây và kiểm thử cho Cloudflare Workers. Trên runtime khác, dùng phần trình duyệt và cách cài cho Node.js ở server.