Dùng để: Viết hướng dẫn và mã nguồn tích hợp PostHog vào ứng dụng Next.js App Router theo chuẩn production, đúng ranh giới máy chủ và máy khách.
Nội dung prompt
VAI TRÒ Bạn là kiến trúc sư Next.js và kỹ sư phân tích dữ liệu cao cấp, quen với Next.js App Router và React hiện đại. NHIỆM VỤ Viết hướng dẫn và mã nguồn tích hợp PostHog vào ứng dụng mô tả trong ĐẦU VÀO, gồm phân tích sự kiện, ghi lại phiên, cờ tính năng và theo dõi lỗi. ĐẦU VÀO - Phiên bản Next.js: [VÍ DỤ: 15 APP ROUTER] - Xác thực: [VÍ DỤ: SUPABASE AUTH] - Thanh toán: [VÍ DỤ: POLAR] - Trạng thái phân tích hiện tại: [VÍ DỤ: CHƯA CÓ] - Môi trường: [VÍ DỤ: PRODUCTION] QUY TẮC 1. PostHog chỉ chạy trong Client Component. Không gọi trong Server Component hay route handler. 2. Khởi tạo PostHog trong một tệp providers đánh dấu use client, bọc toàn ứng dụng bằng PostHogProvider. 3. Dùng biến môi trường cho key và host, tắt tự động ghi pageview và tự xử lý để tránh trùng lượt xem trong App Router. 4. Danh tính người dùng chỉ đổi theo trạng thái xác thực: đăng nhập thì gọi identify, đăng xuất thì gọi reset. 5. Mọi sự kiện phải đi qua một lớp trung gian duy nhất, có enum tên sự kiện và hàm gửi sự kiện an toàn kiểu dữ liệu, có chặn khi chạy phía máy chủ. 6. Theo dõi doanh thu đúng: gắn mã khách hàng và gửi sự kiện đăng ký kèm giá trị cùng đơn vị tiền tệ. 7. Theo dõi điều hướng trang bằng path và tham số truy vấn, bọc trong Suspense để tránh lỗi render phía máy khách. 8. Nhắc rõ phần ghi lại phiên cần che nội dung ô nhập. KHUÔN ĐẦU RA 1. Sơ đồ luồng dữ liệu ngắn. 2. Danh sách tệp cần tạo. 3. Khối mã nguồn cho từng tệp. 4. Danh sách sự kiện và thuộc tính. 5. Bảng kiểm trước khi phát hành.
Thay nội dung trong dấu [ ] trước khi sử dụng.
Mẹo tinh chỉnh
Lỗi phổ biến nhất khi tích hợp PostHog là gọi nó ngoài môi trường trình duyệt, nên hãy nhắc lại ranh giới này nếu mã sinh ra vi phạm. Gom mọi sự kiện vào một lớp trung gian giúp bạn đổi tên hoặc thêm thuộc tính về sau dễ hơn. Đồng bộ danh tính theo trạng thái đăng nhập để số liệu không bị đứt đoạn giữa các phiên. Với theo dõi doanh thu, kiểm tra kỹ giá trị và đơn vị tiền tệ trước khi tin vào biểu đồ. Cuối cùng, che dữ liệu nhập trong ghi lại phiên để tránh lộ thông tin người dùng.
Prompt khác cùng nhóm
Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt