Hướng dẫn error tracking sentry website: Sentry Next.js setup, source map và cảnh báo thực chiến
· Tác giả: Trường — Founder Webchốt
Hướng dẫn error tracking sentry website mình viết cho đội đang chạy landing hoặc storefront trên Next.js mà vẫn phải hỏi khách “anh chị thử F12 xem có đỏ không” mỗi khi có báo lỗi mơ hồ. Sentry không thay thế log server, nhưng nó bắt được exception phía trình duyệt, tái lập ngữ cảnh route, phiên bản build và stack trace sau khi khử minify nhờ source map — thứ mà grep log nginx khó mà suy ra. Khi bạn gắn release Git, tag deploy và môi trường staging riêng, cảnh báo Slack hay email mới thực sự có hướng xử lý thay vì một dòng “500 undefined”. Phần dưới đi theo trục thực chiến: sentry next.js setup đúng chỗ cho App Router, quy tắc upload map trong CI, rồi neo lại phạm vi kinh doanh qua catalog dịch vụ Webchốt nếu bạn muốn bàn giao có checklist incident và không để DSN lộ kiểu vô tình.
Bảng điều khiển giúp team dev nhìn thấy lỗi theo release thay vì theo cảm tính ticket | Nguồn: webchot.com
Sentry Next.js setup: App Router, SDK kép và chỗ đặt DSN an toàn
Sentry Next.js setup trên App Router thường có ba lớp: client, server và edge nếu bạn dùng middleware nặng. File sentry.client.config khởi tạo cho bundle trình duyệt, còn sentry.server.config phục vụ Server Components và route handler; instrumentation.ts giúp gắn hook đúng vòng đời Node. DSN vẫn xuất hiện ở phần public, nên nhiều team chọn tunnel: người dùng gửi event tới /api/.../sentry trên domain bạn, server forward sang ingest Sentry — giảm tình trạng trình duyệt hoặc extension chặn third-party. Khi cấu hình, hãy bật tracesSampleRate có chủ đích: marketing page có thể 0.1 còn checkout 0.3–0.5 tuỳ traffic, tránh bill trace phình vì mỗi lần scroll.
Phần server cần captureException có ngữ cảnh: với data fetch, bọc try/catch và đính kèm thẻ transaction hoặc tags như payment_provider để sau này lọc nhanh. Đừng gửi nguyên body request chứa PII; dùng beforeSend để xóa field nhạy cảm. Khi bạn so kế hoạch tối ưu hiệu năng với ngân sách, mở thêm bảng giá Webchốt để ghép chi phí build, hosting và gói quan sát lỗi vào một bức tranh cho ban lãnh đạo.
Source map, release Git và tách project staging so với production
Source map là mảnh ghép khiến hướng dẫn error tracking sentry website không dừng ở dòng main.js:1:48291 vô nghĩa. Trong CI, plugin Sentry Webpack hoặc Next.js nạp auth token, gắn release bằng hash commit hoặc tag semver, và upload artifacts cùng dist folder. Quy ước đặt tên release nên trùng với biến bạn inject lúc build để dashboard biết lỗi thuộc bản nào. Tách project app-staging khỏi app-prod giúp thử nghiệm alert rule mà không làm nhiễu thống kê thật; đồng thời giảm rủi ro vô tình forward PII từ môi trường copy dữ liệu.
- Điểm 1: Commit hash ngắn trên Vercel hoặc tag Git phù hợp team làm việc theo sprint; quan trọng là nhất quán giữa CI và runtime.
- Điểm 2: Bật “resolve source” trong build Next.js production, tránh map lệch vì tree-shaking khác dev.
- Điểm 3: Giữ file map khỏi CDN public; chỉ Sentry có quyền đọc qua token.
- Điểm 4: Đồng bộ timezone cảnh báo với giờ làm việc team Việt Nam để on-call không bị đánh thức bởi batch job đêm.
Bảng đối chiếu chiến lược theo dõi lỗi trên website
Trước khi ký thêm gói SaaS, hãy chốt tiêu chí: độ chi tiết stack, chi phí theo sự kiện và gánh nặng vận hành. Bảng dưới giúp PM và kỹ sư cùng ngôn ngữ khi chọn mức sampling và cảnh báo.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Độ tin cậy stack trace | Chỉ log text trên server | Sentry + map đã upload | Sentry khi site có nhiều JS client và code splitting |
| Chi phí vận hành | Tự host OpenTelemetry nặng | Cloud Sentry theo quota | Cloud cho team nhỏ; review quota hàng tháng |
| Thời gian phản ứng | Email ticket từ khách | Alert theo ngưỡng lỗi mới | Alert + issue assignment trong Slack |
| Phạm vi dữ liệu | Chỉ server API | Client + server + (tuỳ chọn) profiling | Full stack cho Next.js; bật profiling có giới hạn |
Sau khi chốt bảng, hãy viết checklist release: ai xoay auth token map, cách xử lý khi Sentry ingest trễ, và kịch bản tắt tạm trace khi traffic sale đỉnh. Nếu bạn cần layout marketing đồng nhất khi thêm banner “đang bảo trì”, bộ sưu tập template Next.js Webchốt giúp hero và CTA không lệch brand khi bạn gắn thêm status page.
Quy trình triển khai Sentry cho website Next.js trong năm bước
- Bước 1: Tạo project trên Sentry, lấy DSN và auth token upload; gắn team theo vai trò để tránh mọi người cùng mở quyền owner.
- Bước 2: Chạy wizard Sentry cho Next.js, sinh file cấu hình client/server và dòng
withSentryConfigtrongnext.confignếu phù hợp phiên bản bạn đang dùng. - Bước 3: Cấu hình CI: inject biến bí mật, chạy build production, upload source map gắn release rồi mới deploy.
- Bước 4: Thiết lập alert: ngưỡng lỗi mới, regression release, hoặc tỷ lệ lỗi trên URL quan trọng như thanh toán.
- Bước 5: Viết playbook ngắn: ai quyết định hotfix, cách gắn issue với ticket nội bộ và khi nào bật maintenance page.
Cuối chuỗi bước là tài liệu vận hành song ngữ tiếng Việt cho CSKH: họ biết hướng dẫn khách gửi issue id thay vì mô tả mơ hồ. Đừng bỏ qua thử nghiệm trên mạng chặn tracker vì tunnel sai cấu hình có thể làm bạn tưởng hệ thống “im lặng” đẹp đẽ. Phạm vi triển khai và SLA có thể đối chiếu tại trang dịch vụ Webchốt khi bạn muốn gói bàn giao gồm cả giám sát lỗi và log review định kỳ.
Chi phí quota, gói team và cách đọc hóa đơn kèm dịch vụ Webchốt
Sentry tính phần lớn theo số event và seat; trace và profiling có đường cong giá riêng. MVP nên bật sampling thấp trên page ít quan trọng và chỉ nâng khi bạn đã lọc noise: ảnh third-party lỗi, script quảng cáo, hay lỗi mạng mà không sửa được từ phía bạn. Khi báo giá nội bộ, ghép đường cong sự kiện với mục pricing minh bạch của Webchốt để lãnh đạo thấy một con số tổng cho dev, design và vận hành thay vì ba báo cáo rời. Nếu khách cần playbook chỉnh alert sau bàn giao, hãy tách thành gói dịch vụ riêng để scope không phình vô hạn.
Với doanh nghiệp vừa và nhỏ, ưu tiên “bắt lỗi hiển thị rõ, đo được” hơn là mọi transaction đều 100% trace. Một issue được gom nhóm đúng giúp dev xử lý nhanh hơn ba issue trùng nội dung làm loãng cảnh báo. SLA sau go-live nên nói rõ thời gian phản hồi khi alert đỏ thay vì cam kết số lỗi bằng không — điều đó không thực tế trên web mở.
Bốn sai lầm phổ biến khi làm theo hướng dẫn nhưng bỏ qua bảo mật và chất lượng tín hiệu
Nhiều dự án lắp Sentry xong vẫn mù vì thiếu map, thiếu release hoặc gửi quá nhiều dữ liệu nhạy cảm. Dưới đây là lỗi cụ thể khi audit lại sau tuần đầu production.
- Sai lầm 1: Để auth token upload map trong repo công khai hoặc log CI — lộ quyền ghi metadata vào project của bạn.
- Sai lầm 2: Không đặt tên release trùng build nên dashboard hiển thị stack lệch vài dòng, dev mất nửa ngày đoán.
- Sai lầm 3: Bật trace 1.0 cho mọi request làm quota kêu sau đợt marketing; sau đó team tắt bừa cả error.
- Sai lầm 4: Không gán owner issue nên cùng một lỗi bị mở nhiều lần trên Slack mà không ai đóng vòng.
FAQ — hướng dẫn error tracking sentry website
Hướng dẫn error tracking sentry website khác gì so với chỉ đọc log server?
Log server tốt cho API và database nhưng thiếu ngữ cảnh trình duyệt, phiên bản JS và hàng đợi client hydration. Sentry gom exception phía user, gắn thẻ release và mở stack sau minify nếu map đúng. Bạn thấy được tần suất, ảnh hưởng bao nhiêu session và có thể lọc theo URL. Kết hợp với ticket CSKH, team đỡ phải đoán “có thể do cache” mà có issue id để truy vết. Với Next.js, lỗi server component và client được liên kết trong cùng project nếu bạn cấu hình SDK đủ hai phía.
Sentry Next.js setup cần những file và biến môi trường tối thiểu nào?
Bạn cần DSN, token upload cho build, và thường là biến tổ chức hoặc project slug cho plugin. Trên App Router, tách sentry.client.config và sentry.server.config, cộng instrumentation.ts nếu phiên bản hỗ trợ. Dùng beforeSend để bỏ field nhạy cảm. Trong CI, đặt token ở secret manager, không hard-code. Nếu dùng monorepo, xác nhận đường dẫn output map trùng cấu hình Sentry để upload không fail im lặng.
Làm sao tránh lộ DSN hoặc spam event khi website public?
DSN public là thiết kế, nhưng bạn vẫn nên giảm lạm dụng: tunnel qua API nội bộ, bật rate limit trên Sentry, và lọc IP nội bộ khỏi production issue. Với form, scrub PII trước khi gửi. Tách project dev để thử nghiệm script không đụng thống kê thật. Kiểm tra alert định kỳ để không bị 500 email giả từ healthcheck kém cấu hình.
Chi phí Sentry tăng khi nào sau khi lên production?
Tăng khi trace hoặc replay bật quá rộng, hoặc lỗi bên thứ ba tạo hàng nghìn event trùng mà bạn chưa gom nhóm. Hãy hạ sample trên landing, tắt replay nếu chưa cần, và dùng fingerprint tùy biến. Đối chiếu bill với dự toán đã ký. Khi cần bối cảnh kinh doanh, xem lại mô tả phạm vi trong mục dịch vụ và ma trận giá để tránh lệch kỳ vọng sau tháng đầu vận hành.
Khi nào nên nhờ Webchốt cấu hình Sentry thay vì tự làm?
Khi bạn cần wiring CI, phân quyền team và playbook incident rõ ràng ngay sprint bàn giao. Webchốt làm việc với Next.js, TypeScript và pipeline deploy thực tế; phần quan sát lỗi nằm trong các gói được mô tả minh bạch. Gọi 0905 151 701 hoặc gửi hi@webchot.com kèm yêu cầu cảnh báo. Nếu cần thêm công cụ miễn phí song song, xem hub công cụ Webchốt để hiểu cách team đo lường và trình bày số liệu cho stakeholder. Bạn cũng có thể mở trang liên hệ để gửi tóm tắt repo và môi trường deploy.
Liên Hệ Webchốt
Hướng dẫn error tracking sentry website chỉ thực sự “chốt” khi cả kỹ thuật lẫn vận hành cùng nhìn một bảng đo: số issue mới theo release, thời gian tri trung bị và tỷ lệ lỗi trên luồng thanh toán. Khi bạn có map ổn định, release đồng bộ Git và alert không spam, việc bảo trì website trở nên đo lường được thay vì phỏng đoán qua tin nhắn Zalo lẻ tẻ. Webchốt hỗ trợ roadmap theo sprint, bàn giao source code và cam kết bảo hành 12 tháng cùng chính sách hoàn 100% trong 7 ngày nếu không đạt thỏa thuận đầu vào. Hãy dùng hotline hoặc email bên dưới để gửi yêu cầu rà soát cấu hình Sentry trong 48 giờ làm việc khi phạm vi đã được tóm tắt.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí · trang liên hệ Webchốt.
Reference: Sentry Next.js · Next.js docs · web.dev Core Web Vitals.
