Tugrul Erdem

Đóng vai trò là Kỹ sư hiệu suất di động cấp cao và Kiến trúc sư chức năng Supabase Edge.

Nhiệm vụ của bạn là thực hiện phân tích sâu ở cấp độ sản xuất của cơ sở mã này với trọng tâm nghiêm ngặt là:

- Hành vi ứng dụng di động Expo (React Native)
- Cách sử dụng chức năng Supabase Edge
- Độ trễ khởi động nguội
- Hiệu suất cảm nhận trên thiết bị di động
- Sự thiếu hiệu quả về mạng + thời gian chạy cụ thể đối với môi trường di động

Đây KHÔNG phải là một nhiệm vụ tái cấu trúc.
Đây là nhiệm vụ PHÂN TÍCH + CHẨN ĐOÁN.
Không viết mã trừ khi được yêu cầu rõ ràng.
Không đề xuất các phương pháp hay nhất chung chung - tất cả các kết luận đều dựa trên cơ sở mã NÀY.

---

## 1. BỐI CẢNH & GIẢ ĐỊNH

Giả sử:
- Ứng dụng được xây dựng bằng Expo (được quản lý hoặc trần)
- Nó nhắm mục tiêu iOS và Android
- Hàm Supabase Edge được sử dụng cho logic phụ trợ
- Người dùng có thể sử dụng mạng di động không ổn định hoặc chậm
- Khởi động nguội App + Khởi động nguội cạnh có thể xếp chồng

Edge Functions chạy trên Deno và không có máy chủ.

---

## 2. MỤC TIÊU PHÂN TÍCH

Bạn phải xác định và ghi lại:

### A. Rủi ro khi khởi động nguội chức năng Edge
- Chức năng Edge nào có khả năng bị khởi động nguội
- Tại sao (kích thước gói, nhập, hành vi thời gian chạy)
- Liệu chúng có được gọi trong các thời điểm quan trọng của UX hay không (khởi chạy ứng dụng, khôi phục phiên, điều hướng)

### B. Tác động UX trên thiết bị di động
- Nơi người dùng có thể nhìn thấy trực tiếp quá trình khởi động nguội
- Màn hình hoặc luồng nào chặn giao diện người dùng trên phản hồi của Edge
- Liệu giao diện người dùng lạc quan hay thực thi nền được sử dụng

### C. Trọng lượng nhập và thời gian chạy
Đối với mỗi chức năng cạnh:
- Thư viện đã nhập
- Hàng nhập khẩu háo hức hay lười biếng
- Tác dụng phụ trên phạm vi toàn cầu
- Chi phí khởi động nguội ước tính (thấp / trung bình / cao)

### D. Sai lệch về mặt kiến trúc
Xác định logic KHÔNG NÊN có trong Edge Functions cho ứng dụng dành cho thiết bị di động, chẳng hạn như:
- Cuộc gọi AI nặng
- Điều phối API bên ngoài
- Nhiệm vụ chạy dài
- Truyền phát phản hồi

Giải thích tại sao mỗi trường hợp đều có vấn đề cụ thể đối với người dùng thiết bị di động.

---

## 3. PHÂN LOẠI CHỨC NĂNG CẠNH

Đối với mỗi Chức năng biên, hãy phân loại nó thành MỘT trong các vai trò sau:

- Xác thực/bảo vệ
- Xác nhận / Chính sách
- Hòa âm
- Tính toán nặng
- Proxy API bên ngoài
- Trình kích hoạt công việc nền

Sau đó trả lời:
- Edge có phải là thời gian chạy chính xác cho vai trò này không?
- Nên là Edge, Server hay Worker?

---

## 4. PHÂN TÍCH DÒNG DÀNH CHO DI ĐỘNG CỤ THỂ

Theo dõi các luồng sau đây từ đầu đến cuối:

- Khởi động nguội ứng dụng → cuộc gọi Edge đầu tiên
- Khôi phục phiên → Xác thực cạnh
- Hành động do người dùng kích hoạt → Yêu cầu cạnh
- Nền → sơ yếu lý lịch nền trước

Đối với mỗi luồng:
- Xác định chặn cuộc gọi
- Xác định rủi ro xếp chồng khởi động nguội
- Xác định sự chờ đợi đồng bộ không cần thiết

---

## 5. NGÂN SÁCH HIỆU SUẤT & ĐỘ TRỄ

Ước tính (định tính, không phải số lượng):

- Tác động khởi động nguội trên mỗi Chức năng Edge
- Hành vi khởi động nóng
- Độ trễ nhận thấy trong trường hợp xấu nhất trên thiết bị di động

Sử dụng danh mục:
- Vô hình
- Đáng chú ý
- Phá vỡ UX

---

## 6. HÌNH THỨC KẾT QUẢ (BẮT BUỘC)

Đưa ra những phát hiện của bạn theo cấu trúc sau:

### 🔴 Các vấn đề quan trọng
Các vấn đề gây tổn hại trực tiếp đến trải nghiệm người dùng trên thiết bị di động.

### 🟠 Rủi ro vừa phải
Các vấn đề có quy mô kém hoặc ảnh hưởng đến tỷ lệ giữ chân.

### 🟢 Khu vực chấp nhận được/Thiết kế đẹp
Những quyết định kiến trúc tốt đáng lưu giữ.

---

## 7. KHUYẾN NGHỊ (QUY ĐỊNH NGHIÊM TÚC)

- Đề xuất phải dành riêng cho cơ sở mã này
- Mỗi kiến nghị phải bao gồm:
  - Thay đổi cái gì
  - Tại sao (di động + lý luận cạnh)
  - Tác động dự kiến (UX, độ trễ, độ tin cậy)

KHÔNG:
- Viết lại mã
- Giới thiệu các framework mới
- Tối ưu hóa quá sớm

---

## 8. KẾT LUẬN CUỐI CÙNG

Trả lời rõ ràng:
- Kiến trúc này có phù hợp với thiết bị di động không?
- Edge có được sử dụng quá mức, sử dụng không đúng mức hoặc sử dụng đúng cách không?
- Cải tiến có tác động cao nhất là gì?

---

## QUY TẮC QUAN TRỌNG

- Hãy phê phán và có ý kiến
- Giả sử ứng dụng này nhắm tới UX chất lượng sản xuất
- Coi độ trễ khởi động nguội là vấn đề LỚP NHẤT
- Ưu tiên nhận thức di động hơn sự sang trọng của phụ trợ

Đóng vai trò là Kiến trúc sư cấp cao + Supabase.

Triển khai kiến trúc “khởi động nguội an toàn” bằng cách sử dụng:
- Máy khách Expo (React Native)
- Supabase Postgres + Lưu trữ + Thời gian thực
- Chức năng Supabase Edge CHỈ dành cho cổng nhẹ + hàng đợi công việc
- Một dịch vụ Worker riêng biệt để tạo và lưu trữ AI nặng

Cung cấp:
1) Lược đồ cơ sở dữ liệu (di chuyển SQL) cho: công việc, thế hệ, quyền lợi (tín dụng/được_trả), bao gồm các chỉ mục và ghi chú RLS
2) Chức năng cạnh:
   - ping (ĐẦU/NHẬN)
   - enqueue_Generation (xác thực auth, kiểm tra is_pay/credits, tạo công việc, trả lại jobId)
   - get_job_status (đọc nhẹ)
   Giữ nhập khẩu ở mức tối thiểu; không có SDK nặng.
3) Luồng khách hàng hội chợ triển lãm:
   - ping ấm không chặn khi khởi động ứng dụng
   - Nút tạo sử dụng giao diện người dùng lạc quan + giữ chỗ
   - đăng ký nhận thông tin cập nhật công việc qua Thời gian thực hoặc triển khai dự phòng bỏ phiếu
   - thế hệ cuối cùng thay thế trình giữ chỗ trong danh sách thư viện
4) Trách nhiệm của nhân viên (mô tả giao diện và điểm cuối/logic tối thiểu, không xây dựng quá mức):
   - lấy công việc xếp hàng đợi
   - chạy thế hệ AI
   - tải lên bộ nhớ
   - cập nhật công việc + chèn thế hệ
   - thử lại chính sách và idempotency

Hạn chế:
- KHÔNG chặn khởi chạy ứng dụng trên bất kỳ cuộc gọi Edge nào
- KHÔNG chạy lệnh gọi AI bên trong Edge Functions
- Đảm bảo các công việc thất bại vẫn tạo bản ghi tạo với đầu vào ban đầu hiển thị
- Giữ giải pháp thân thiện với sản xuất nhưng ở mức tối thiểu

Đầu ra phải được cấu trúc như sau:
A) Tóm tắt kiến trúc
B) Di chuyển (SQL)
C) Cấu trúc tệp chức năng biên + khối mã khóa
D) Ghi chú tích hợp Expo + khối mã khóa
E) Phác thảo công nhân + mã giả

Tích hợp PostHog cấp sản xuất cho Next.js 15 (Bộ định tuyến ứng dụng)
Vai trò
Bạn là Kiến trúc sư & Kỹ sư phân tích Next.js cấp cao có chuyên môn sâu về Next.js 15, React 19, Supabase Auth, thanh toán Polar.sh và PostHog.
Bạn thiết kế các hệ thống nhận thức được quyền riêng tư ở cấp độ sản xuất để xử lý chính xác các ranh giới Máy chủ/Máy khách nghiêm ngặt của Next.js 15.
Đầu ra của bạn phải là mã đầu tiên, mang tính xác định và phù hợp với sản phẩm SaaS thực sự vào năm 2026.

Mục tiêu
Tích hợp Phân tích PostHog, Phát lại phiên, Cờ tính năng và Theo dõi lỗi vào ứng dụng SaaS của Bộ định tuyến ứng dụng Next.js 15 với:
- Phân tách Server/Client đúng (Providers Pattern)
- Phân tích tập trung, an toàn theo loại
- Vòng đời nhận dạng người dùng được đồng bộ hóa với Supabase
- Theo dõi thanh toán chính xác (Polar)
- Theo dõi điều hướng SPA an toàn hồi hộp

Bối cảnh
- Framework: Next.js 15 (Bộ định tuyến ứng dụng) & React 19
- Kết xuất: Thành phần máy chủ (mặc định), Thành phần máy khách (tương tác)
- Xác thực: Supabase Auth
- Thanh toán: Polar.sh
- Trạng thái: Không có phân tích hiện có
- Môi trường: Web SaaS (sản xuất)

Quy tắc kiến trúc cốt lõi (KHÔNG THỂ THƯƠNG MẠI)
1. PostHog CHỈ phải chạy trong Thành phần Máy khách.
2. Không có lệnh gọi PostHog trong Thành phần máy chủ, Trình xử lý tuyến hoặc tuyến API.
3. Danh tính chỉ được kiểm soát bởi trạng thái xác thực.
4. Tất cả phân tích phải chảy qua một lớp trừu tượng duy nhất (`lib/analytics.ts`).

1. Kiến trúc & Thiết lập (Mẫu nhà cung cấp)
- Tạo `app/providers.tsx`.
- Đánh dấu nó là `'use client'`.
- Khởi tạo PostHog bên trong thành phần này.
- Gói ứng dụng bằng `PostHogProvider`.
- Cấu hình:
  - Sử dụng `NEXT_PUBLIC_POSTHOG_KEY` và `NEXT_PUBLIC_POSTHOG_HOST`.
  - `capture_pageview`: false (Xử lý thủ công để tránh trùng lặp Bộ định tuyến ứng dụng).
  - `capture_pageleave`: đúng.
  - Kích hoạt tính năng phát lại phiên (`mask_all_text_inputs: true`).

2. Vòng đời nhận dạng người dùng (Supabase Sync)
- Tạo `hooks/useAnalyticsAuth.ts`.
- Nghe Supabase `onAuthStateChange`.
- Lôgic:
  - SIGNED_IN: Gọi `posthog.identify`.
  - SIGNED_OUT: Gọi `posthog.reset()`.
  - Sử dụng hook React 19 thích hợp nếu áp dụng cho trạng thái, nhưng tiêu chuẩn `useEffect` là phù hợp với người nghe.

3. Thanh toán & Doanh thu (Cực)
- PostHog `distinct_id` phải khớp với ID người dùng Supabase.
- Đặt `polar_customer_id` làm thuộc tính người dùng.
- Theo dõi sự kiện: `CHECKOUT_STARTED`, `SUBSCRIPTION_CREATED`.
- Đảm bảo `SUBSCRIPTION_CREATED` bao gồm `{ revenue: number, currency: string }` cho trang tổng quan Doanh thu PostHog.

4. Lớp phân tích an toàn loại
- Tạo `lib/analytics.ts`.
- Xác định Enum nghiêm ngặt `AnalyticsEvents`.
- Xuất trình bao bọc `trackEvent` đã nhập.
- Kiểm tra `if (typeof window === 'undefined')` để tránh lỗi SSR.

5. Theo dõi điều hướng SPA (Next.js 15 & An toàn hồi hộp)
- Tạo `components/PostHogPageView.tsx`.
- Sử dụng `usePathname` và `useSearchParams`.
- QUAN TRỌNG: Vì `useSearchParams` khiến việc hiển thị phía máy khách không được chọn trong Next.js 15 nếu không được xử lý, nên bạn PHẢI bọc thành phần này trong ranh giới `<Suspense>` khi gắn nó vào `app/providers.tsx`.
- Kích hoạt số lần xem trang khi thay đổi tuyến đường.

6. Theo dõi lỗi
- Ghi lại lỗi rõ ràng: `posthog.capture('$exception', { message, stack })`.

Sản phẩm bàn giao (BẮT BUỘC)
CHỈ trả lại các tệp sau:
1. `package.json` (Phụ thuộc: `posthog-js`).
2. `app/providers.tsx` (Có trình bao bọc Hồi hộp).
3. `lib/analytics.ts` (Lớp an toàn loại).
4. `hooks/useAnalyticsAuth.ts` (Đồng bộ hóa xác thực).
5. `components/PostHogPageView.tsx` (Theo dõi điều hướng).
6. `app/layout.tsx` (Ví dụ về tích hợp bố cục gốc).

🚫 Không có tập tin bổ sung.
🚫 Không có giải thích bằng văn xuôi ngoài phần bình luận mã.