Nhật Ký Và Giám Sát — Admin Dashboard Traffic Tools V2

1. Tổng quan

Admin Dashboard là SPA chạy hoàn toàn trong trình duyệt. Logging và monitoring diễn ra ở hai cấp độ:

Logging phía client (browser): Ghi nhận lỗi API, lỗi xác thực, hành vi điều hướng. Output vào console của DevTools và hiển thị trực tiếp trên giao diện qua hệ thống thông báo Naive UI.

Giám sát gián tiếp qua dữ liệu API: Dashboard không tự chạy tiến trình nào, nhưng nó hiển thị dữ liệu do Backend Engine gửi về. Các màn hình thống kê, biểu đồ và bảng dữ liệu chính là công cụ giám sát gián tiếp toàn bộ hệ thống.

2. Logging lỗi API

2.1. Kiến trúc xử lý lỗi tập trung

Điểm trung tâm của toàn bộ xử lý lỗi là Axios response interceptor trong src/configs/axios.ts:

HTTP 401 được xử lý tự động tại interceptor. Mọi lỗi khác được reject để component tự xử lý.

2.2. Chuẩn hóa thông điệp lỗi

Hàm getCatchMsg trong src/composables/utils.ts chuyển đổi bất kỳ loại lỗi nào thành chuỗi văn bản:

showMessageError bọc getCatchMsg và hiển thị kết quả lên giao diện:

Dùng h() với class whitespace-pre để bảo toàn ký tự xuống dòng \n trong thông điệp lỗi validation nhiều trường.

2.3. Phân loại lỗi HTTP

Mã HTTP	Ý nghĩa	Cách xử lý
400	Dữ liệu gửi lên không hợp lệ.	`showMessageError()` hiển thị danh sách lỗi validation.
401	Token không hợp lệ hoặc hết hạn.	`authStore.logout()` → redirect về `/login`.
403	Tài khoản không có quyền.	`showMessageError()` hiển thị lỗi quyền hạn.
404	Endpoint không tồn tại.	`showMessageError()` hiển thị lỗi.
408 / Timeout	Request không hoàn thành trong thời gian cho phép.	Axios tự reject sau `timeout`.
500	Lỗi nội bộ của Backend Engine.	`showMessageError()` hiển thị lỗi server.
Network Error	Mất kết nối hoặc server không phản hồi.	`showMessageError()` với `error.message = "Network Error"`.

3. Logging xác thực

3.1. Đăng nhập thành công

Khi authStore.login() thành công:

Token lưu vào authStore.authToken.

authStore.is_2fa cập nhật theo dataRes.is_2fa.

sessionStorage.is_2fa cập nhật.

Sau khi bypass hoặc hoàn tất 2FA:

localStorage.setItem('auth_token', ...) — lưu token bền vững.

sessionStorage.setItem('move_to_dashboard', 'true').

window.$message.success(authStore.message).

3.2. Logging trong Router Guard

router.beforeEach trong src/router/index.ts ghi log vào console.error cho ba trường hợp lỗi:

3.3. Luồng phục hồi phiên

Tìm 'auth_token' trong localStorage
          |
   Tìm thấy?
  /          \
Có            Không → Redirect về /login
 |
Parse JSON → Gán vào authStore.authToken
 |
Gọi GET /api/user/profile
          |
   Thành công?
  /           \
Có             Không
 |               |
Profile lưu vào  console.error(...)
authStore        xóa localStorage
                 redirect về /login

4. Giám sát giao diện

4.1. Loading bar toàn cục

Sự kiện	Hành động	Nơi thực thi
Bắt đầu chuyển trang	`.start()` — thanh xanh chạy từ trái sang phải	`router.beforeEach`
Chuyển trang thành công	`.finish()` — thanh chạy đến cuối và biến mất	`router.afterEach`

4.2. Hệ thống thông báo

Toàn bộ phản hồi tác vụ hiển thị qua window.$message của Naive UI, góc trên bên phải màn hình, tự ẩn sau 3 giây.

Nguồn gây ra thông báo Success:

Đăng nhập thành công: $message.success(authStore.message) trong useLoginAuth.ts.

Xác thực 2FA thành công: $message.success(authStore.message) trong verifyCode.

Lưu cấu hình thành công: $message.success(...) trong từng form component.

Xóa bản ghi thành công: $message.success(...) sau khi API DELETE trả về 200.

Nguồn gây ra thông báo Error:

Mọi lỗi API: showMessageError(error) từ src/composables/utils.ts.

Lỗi đặc thù của từng nghiệp vụ: component tự gọi $message.error(...).

4.3. Dialog xác nhận trước khi xóa

Các thao tác không thể hoàn tác dùng useDialog() của Naive UI:

5. Giám sát hệ thống qua Dashboard

Admin Dashboard không chỉ là giao diện điều khiển — nó là công cụ giám sát chính cho toàn bộ hạ tầng Traffic Tools.

5.1. Màn hình thống kê hệ thống (`/dashboard1`)

Tab Click Quảng Cáo (/dashboard1/click-ads):

Bảng chi tiết từng lượt click: tên miền, từ khóa, vị trí, thời gian thực thi.

Bộ lọc theo khoảng ngày để so sánh sản lượng giữa các giai đoạn.

Tab Negative SEO (/dashboard1/negative-seo):

Theo dõi traffic Kill đã gửi đến domain đối thủ.

Tab Traffic Tự Nhiên (/dashboard1/traffic-natural):

Organic traffic với biểu đồ thứ hạng từ khóa theo thời gian.

5.2. Màn hình Server Performance (`/auto-search/server-performance`)

Đây là màn hình giám sát hiệu suất Worker quan trọng nhất.

Dữ liệu từ: src/services/api/serverPerformance.ts → GET /api/server-performance

Chỉ số giám sát:

Chỉ số	Ý nghĩa	Dấu hiệu bất thường
Số phiên đang chạy	Máy chủ đang thực thi bao nhiêu lượt tìm kiếm đồng thời.	Một server nhận quá nhiều task so với các server khác — dấu hiệu tải không đều.
Tỷ lệ thành công	Phần trăm task hoàn thành không lỗi.	Dưới 70% liên tục là dấu hiệu proxy pool đang bị chặn hàng loạt.
Tỷ lệ thất bại	Phần trăm task bị lỗi kỹ thuật.	Tăng đột biến thường do Chrome crash hoặc CAPTCHA không giải được.
Thời gian xử lý	Thời gian từ khi nhận task đến khi hoàn thành.	Tăng đột biến có thể do proxy chậm hoặc trang đích load lâu.

5.3. Màn hình quản lý server (`/system-management/server-management`)

Danh sách tất cả Worker với trạng thái kết nối.

Chỉ số theo dõi: Tên/IP, trạng thái Online/Offline, số task đang xử lý, uptime.

Hành động từ Admin: Kích hoạt/vô hiệu hóa server, xóa server khỏi danh sách.

5.4. Màn hình quản lý proxy (`/system-management/proxy-management`)

Theo dõi tình trạng sức khỏe của toàn bộ pool địa chỉ IP.

Chỉ số: Tổng số proxy theo trạng thái (hoạt động/không hoạt động/đang kiểm tra), tốc độ phản hồi, quốc gia/thành phố, nhà cung cấp.

6. Logging trong quá trình phát triển

6.1. Các điểm console.error trong mã nguồn

File	Điều kiện kích hoạt	Nội dung log
`src/router/index.ts:48`	Parse JSON token từ localStorage thất bại	`'Error checking token:' + error`
`src/router/index.ts:78`	`getMe()` thất bại khi phục hồi phiên	`'Error restoring session:' + error`
`src/router/index.ts:88`	Lỗi xác thực khi navigate	`'Authentication error:' + error`
`src/views/auth/composables/useLoginAuth.ts`	try/catch bọc `handleLogin`	`'Login error:' + error`

6.2. Thực hành logging tốt

Dùng console.error cho lỗi thực sự cần chú ý (API lỗi, token lỗi, navigation lỗi).

Xóa toàn bộ console.log trước khi merge vào nhánh chính.

Không log dữ liệu nhạy cảm như token, password hay thông tin cá nhân.

Thông điệp log phải đủ mô tả để hiểu ngữ cảnh mà không cần đọc code.

7. Hướng dẫn debug

7.1. Debug vấn đề xác thực

Người dùng bị ép về trang login sau khi đăng nhập:

DevTools → Application → Local Storage: kiểm tra auth_token có tồn tại không.

Console: tìm thông điệp Error restoring session hoặc Authentication error.

Network: lọc theo /api/user/profile và xem response status.

Nếu 401: token hết hạn — cần logout và đăng nhập lại.

Nếu Network Error: Backend API không phản hồi — kiểm tra VITE_API_SERVER có đúng không.

Vòng lặp redirect giữa /login và /auth-factor:

Kiểm tra sessionStorage.getItem('move_to_dashboard') — phải là 'true'.

Nếu không: xem authStore.profile.two_factor có phải true không.

7.2. Debug vấn đề hiển thị dữ liệu trống

Network: kiểm tra request đến API tương ứng có status 200 không.

Xem response body: server có trả về data không hay trả về mảng rỗng [].

Kiểm tra filter/sort áp dụng trên bảng có đang lọc hết dữ liệu không.

Console: kiểm tra có lỗi JavaScript runtime không.

Logs and Monitoring

Nhật Ký Và Giám Sát — Admin Dashboard Traffic Tools V2

1. Tổng quan

2. Logging lỗi API

2.1. Kiến trúc xử lý lỗi tập trung

2.2. Chuẩn hóa thông điệp lỗi

2.3. Phân loại lỗi HTTP

3. Logging xác thực

3.1. Đăng nhập thành công

3.2. Logging trong Router Guard

3.3. Luồng phục hồi phiên

4. Giám sát giao diện

4.1. Loading bar toàn cục

4.2. Hệ thống thông báo

4.3. Dialog xác nhận trước khi xóa

5. Giám sát hệ thống qua Dashboard

5.1. Màn hình thống kê hệ thống (`/dashboard1`)

5.2. Màn hình Server Performance (`/auto-search/server-performance`)

5.3. Màn hình quản lý server (`/system-management/server-management`)

5.4. Màn hình quản lý proxy (`/system-management/proxy-management`)

6. Logging trong quá trình phát triển

6.1. Các điểm console.error trong mã nguồn

6.2. Thực hành logging tốt

7. Hướng dẫn debug

7.1. Debug vấn đề xác thực

7.2. Debug vấn đề hiển thị dữ liệu trống

7.3. Debug vấn đề build

Logs and Monitoring

Nhật Ký Và Giám Sát — Admin Dashboard Traffic Tools V2#

1. Tổng quan#

2. Logging lỗi API#

2.1. Kiến trúc xử lý lỗi tập trung#

2.2. Chuẩn hóa thông điệp lỗi#

2.3. Phân loại lỗi HTTP#

3. Logging xác thực#

3.1. Đăng nhập thành công#

3.2. Logging trong Router Guard#

3.3. Luồng phục hồi phiên#

4. Giám sát giao diện#

4.1. Loading bar toàn cục#

4.2. Hệ thống thông báo#

4.3. Dialog xác nhận trước khi xóa#

5. Giám sát hệ thống qua Dashboard#

5.1. Màn hình thống kê hệ thống (/dashboard1)#

5.2. Màn hình Server Performance (/auto-search/server-performance)#

5.3. Màn hình quản lý server (/system-management/server-management)#

5.4. Màn hình quản lý proxy (/system-management/proxy-management)#

6. Logging trong quá trình phát triển#

6.1. Các điểm console.error trong mã nguồn#

6.2. Thực hành logging tốt#

7. Hướng dẫn debug#

7.1. Debug vấn đề xác thực#

7.2. Debug vấn đề hiển thị dữ liệu trống#

7.3. Debug vấn đề build#

Nhật Ký Và Giám Sát — Admin Dashboard Traffic Tools V2

1. Tổng quan

2. Logging lỗi API

2.1. Kiến trúc xử lý lỗi tập trung

2.2. Chuẩn hóa thông điệp lỗi

2.3. Phân loại lỗi HTTP

3. Logging xác thực

3.1. Đăng nhập thành công

3.2. Logging trong Router Guard

3.3. Luồng phục hồi phiên

4. Giám sát giao diện

4.1. Loading bar toàn cục

4.2. Hệ thống thông báo

4.3. Dialog xác nhận trước khi xóa

5. Giám sát hệ thống qua Dashboard

5.1. Màn hình thống kê hệ thống (`/dashboard1`)

5.2. Màn hình Server Performance (`/auto-search/server-performance`)

5.3. Màn hình quản lý server (`/system-management/server-management`)

5.4. Màn hình quản lý proxy (`/system-management/proxy-management`)

6. Logging trong quá trình phát triển

6.1. Các điểm console.error trong mã nguồn

6.2. Thực hành logging tốt

7. Hướng dẫn debug

7.1. Debug vấn đề xác thực

7.2. Debug vấn đề hiển thị dữ liệu trống

7.3. Debug vấn đề build