Frontend system design cho sản phẩm production (Phần 2)

Chiến lược phân rã và phân định vị trí State (State Locality)

Sai lầm lớn nhất trong thiết kế hệ thống Frontend là "toàn cầu hóa" trạng thái (Globalizing State) quá sớm. Việc lạm dụng các thư viện như Zustand, Redux hay React Context tạo ra các liên kết ẩn (implicit dependencies), biến ứng dụng thành một mạng lưới chằng chịt rất khó bảo trì và khiến AI Agent dễ phân tích sai lệch.

Một hệ thống Frontend bền vững phân định rõ ràng 4 tầng vị trí của State dựa trên vòng đời và phạm vi ảnh hưởng của chúng:

Bảng phân loại và quản lý trạng thái

Kiến trúc cô lập và xử lý lỗi (Resilient UI)

Một hệ thống Production không được phép sụp đổ hoàn toàn (White Screen of Death) chỉ vì một lỗi nhỏ ở Component hiển thị thời tiết hoặc Component Banner. Thiết kế hệ thống Frontend phải có tính chịu lỗi cao (Fault-tolerant) bằng cách sử dụng Error Boundaries và Suspense Boundaries một cách chiến lược.

Không đặt Error Boundary bừa bãi ở mọi Component, mà hãy đặt ở các ranh giới chức năng (Functional Boundaries):

• Ranh giới Layout chính (app/error.tsx): Bắt các lỗi nghiêm trọng như sập hệ thống định tuyến, lỗi Auth toàn cục. Hiển thị trang bảo trì hoặc nút reload toàn trang.
• Ranh giới Feature (features/billing/error.tsx): Nếu tính năng Thanh toán lỗi, người dùng vẫn phải đọc được tài liệu hoặc sử dụng tính năng Chat hỗ trợ. Cô lập lỗi trong phạm vi tính năng đó.
• Ranh giới Widget/Component (components/shared/WidgetErrorBoundary): Dùng để bọc các Component bên thứ ba (như Chart, Bản đồ, Cổng thanh toán nhúng). Nếu lỗi, thay thế bằng một Empty State UI hoặc Placeholder gọn gàng.

// Ví dụ về một Widget Error Boundary thực dụng bảo vệ UI
import React, { Component, ErrorInfo, ReactNode } from 'react'

interface Props {
  fallback: ReactNode
  children: ReactNode
}
interface State {
  hasError: boolean
}

export class WidgetErrorBoundary extends Component<Props, State> {
  public state: State = { hasError: false }

  public static getDerivedStateFromError(_: Error): State {
    return { hasError: true }
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('Widget Error Caught:', error, errorInfo)
    // Gửi lỗi về hệ thống tracking tập trung (Sentry, LogRocket...) tại đây
  }

  public render() {
    if (this.state.hasError) return this.props.fallback
    return this.children
  }
}

Automated Verification Loop: Chuyển giao an toàn cho cả Người và AI

Thiết kế hệ thống không chỉ là viết mã nguồn sạch, mà còn là thiết kế một hệ thống phòng ngự ngăn chặn mã nguồn bẩn lọt vào nhánh chính (main branch). Dù là Kỹ sư hay AI Agent thực thi, mọi thay đổi (Pull Request) đều phải vượt qua bộ lọc tự động 3 tầng:

1. Tầng Phân tích Tĩnh (Static Analysis)

Là bộ lọc rẻ nhất và nhanh nhất. Không bao giờ cho phép bỏ qua (bypass) lỗi TypeScript bằng any vô tội vạ.

• pnpm lint: Đảm bảo quy chuẩn code, không thừa import, không vi phạm quy tắc Hooks.
• pnpm typecheck: Biên dịch toàn bộ file .ts/.tsx để đảm bảo không gãy Type Definition toàn hệ thống.

2. Tầng Kiểm thử Tích hợp (Integration Test)

Tập trung kiểm thử logic nghiệp vụ phức tạp ở tầng features/. Bạn không cần test xem nút bấm có render ra màu xanh không, nhưng bạn bắt buộc phải test xem: "Khi click vào nút Áp mã giảm giá, hàm tính tổng tiền có trả về đúng kết quả sau trừ khấu hao không?".

3. Tầng Kiểm thử Đuôi-đến-Đuôi (E2E Test)

Chạy các kịch bản quan trọng nhất (Critical Paths) của doanh nghiệp bằng Playwright hoặc Cypress.

• Đăng ký / Đăng nhập.
• Luồng thanh toán (Checkout flow).
• Độ chính xác của các thẻ Meta SEO (OpenGraph, Twitter Tags) trên Server Rendered Pages.

Kết luận cho một Hệ thống Frontend bền vững

Kiến trúc Frontend không nằm ở những khái niệm cao siêu, nó nằm ở tính kỷ luật và sự nhất quán. Khi bạn xây dựng được một hệ thống có quyền sở hữu (Ownership) rõ ràng, dòng chảy dữ liệu (Data Flow) ngắn và tường minh, kết hợp cùng một mạng lưới kiểm chứng tự động chặt chẽ, bạn không chỉ giúp các kỹ sư trong đội ngũ làm việc hiệu quả, mà còn biến Codebase trở thành một môi trường lý tưởng để các AI Agent cộng tác một cách chính xác, an toàn, và không sinh nợ kỹ thuật.