🐛 Khi một lỗi xuất hiện trên ứng dụng web, câu hỏi của tester thường là: Đây là lỗi thuộc về front-end hay back-end?
Thực tế, tester không nên vội kết luận một lỗi là thuộc về front-end (FE) hay back-end (BE). Mục tiêu của tester là cung cấp đầy đủ thông tin và bằng chứng để giúp đội phát triển nhanh chóng xác định nguyên nhân lỗi và sửa nó (hay gọi là fix lỗi).
Ngoài ra, cần lưu ý rằng khái niệm front-end và back-end chỉ tồn tại khi hệ thống được thiết kế theo kiến trúc tách biệt giữa client và server. Không phải hệ thống phần mềm hay mọi ứng dụng web nào cũng đều được xây dựng theo mô hình client và server này.
Bài viết này so sánh một số thông tin liên quan giúp bạn có cái nhìn tổng quan hơn về lỗi FE và lỗi BE. Và cách sử dụng DevTools trên trình duyệt Chrome để xác định một lỗi front-end hay back-end.
So sánh lỗi front-end và back-end
Nếu hệ thống được xây dựng theo kiến trúc FE/BE, có thể hiểu đơn giản:
| Front-end | Back-end |
| Xử lý giao diện và tương tác với người dùng | Xử lý nghiệp vụ, dữ liệu và API |
| HTML, CSS, JavaScript, React, Angular, Vue… | Java, .NET, Node.js, Python, PHP… |
| Hiển thị dữ liệu | Tính toán và lưu trữ dữ liệu |
Ví dụ: Các vấn đề liên quan đến front-end.
- Button không bấm được
- Giao diện hiển thị sai
- Sai màu sắc hoặc layout
Và các vấn đề ở back-end:
- API trả sai dữ liệu.
- Tính toán sai.
- Lưu dữ liệu sai.
- Xử lý nghiệp vụ không đúng.
Tuy nhiên, biểu hiện bên ngoài không đủ để kết luận nguyên nhân. Ví dụ màn hình hiển thị sai số dư có thể do front-end hiển thị sai, nhưng cũng có thể do back-end trả về dữ liệu sai. Vì thế, tester cần phải điều tra kỹ hơn để giúp xác định lỗi thuộc về FE hay BE.
Sử dụng Chrome DevTools để khoanh vùng nguyên nhân
DevTools trong các trình duyệt (ví dụ Chrome) là công cụ rất hữu ích để kiểm tra luồng giao tiếp giữa front-end và back-end.
Bước 1. Mở DevTools
- Nhấn F12 hoặc Ctrl + Shift + I (hay Cmd + Option + I trên macbook)
- Chọn tab Network
- Bật Preserve log nếu cần theo dõi nhiều request
- Bật Disable cache khi kiểm thử
Sau đó thực hiện lại các bước để tái hiện bug.
Bước 2. Kiểm tra request
Trong tab Network, chọn nhóm Fetch/XHR và tìm request tương ứng với thao tác vừa thực hiện.
Nếu không có request nào được gửi, trong khi theo thiết kế hành động này phải gọi API, thì nhiều khả năng vấn đề nằm ở front-end.
Ví dụ:
- Button không hoạt động
- JavaScript không được thực thi
- Validation phía client chặn không đúng
Bước 3. Kiểm tra dữ liệu request
Mở request và kiểm tra:
- URL
- HTTP Method
- Header
- Query Parameter
- Request Payload
Nếu Front-end gửi dữ liệu không đúng định dạng hoặc thiếu thông tin bắt buộc, rất có thể nguyên nhân nằm ở Front-end.
Ví dụ:
Expected
{
“age”: 20
}
Actual
{
“age”: null
}
Bước 4. Kiểm tra response
Mở tab Response hoặc Preview để xem dữ liệu Back-end trả về.
Ví dụ:
{
“name”: “John”,
“age”: 30
}
Nếu API trả đúng dữ liệu nhưng giao diện lại hiển thị: Age = 0
👉 Khả năng cao Front-end đã xử lý hoặc hiển thị sai.
Bước 5. Kiểm tra Status Code
Một số status code thường gặp:
- 200 OK
- 201 Created
- 400 Bad Request
- 401 Unauthorized
- 404 Not Found
- 500 Internal Server Error
Thông thường:
- 200 + dữ liệu đúng → nếu UI sai thì nghi ngờ front-end.
- 500 → thường là lỗi back-end.
- 400 → chưa thể kết luận. Cần kiểm tra xem front-end có gửi request đúng hay không.
Nhiều trường hợp lỗi 400 xuất phát từ việc front-end gửi sai dữ liệu.
Bước 6. Kiểm tra Console
Mở tab Console.
Nếu xuất hiện các lỗi như:
- TypeError
- ReferenceError
- Cannot read property…
- Cannot read properties of undefined
thì gần như chắc chắn front-end đang gặp lỗi JavaScript.
Bước 7. So sánh API với giao diện
Đây là bước quan trọng nhất.
Ví dụ 1
API trả về:
{
“balance”: 1000000
}
Nhưng giao diện hiển thị: 100, thì khả năng cao front-end đang xử lý hoặc format dữ liệu sai.
Ví dụ 2
API trả về:
{
“balance”: 100
}
Trong khi theo nghiệp vụ phải là 1.000.
Khả năng cao vấn đề nằm ở back-end hoặc tầng xử lý nghiệp vụ.
Tóm tắt cách khoanh vùng lỗi
| Quan sát trên Chrome DevTools | Khả năng |
| Không gửi request | front-end |
| Request gửi sai dữ liệu | front-end |
| Console có lỗi JavaScript | front-end |
| API trả dữ liệu đúng nhưng UI hiển thị sai | front-end |
| API trả dữ liệu sai | back-end |
| API trả lỗi 500 | Thường là back-end |
| API trả 400 | Cần kiểm tra request trước khi kết luận |
Đừng vội kết luận “đây là bug FE” hay “đây là bug BE”
Chrome DevTools giúp tester khoanh vùng nguyên nhân, nhưng không thể xác định tuyệt đối bug thuộc về front-end hay back-end.
Trong nhiều trường hợp cần kết hợp thêm:
- Log của server
- API Contract hoặc Swagger
- Database
- Trao đổi với front-end developer và back-end developer
Một bug report tốt nên tập trung vào bằng chứng thay vì phán đoán.
Ví dụ: “API/customer trả về dữ liệu đúng (response đính kèm), tuy nhiên giao diện hiển thị sai giá trị của trường balance. Nghi ngờ vấn đề nằm ở phía front-end.”
Cách mô tả này khách quan hơn, giúp đội phát triển xác định nguyên nhân nhanh hơn và giảm thời gian trao đổi qua lại.
Kết luận
Việc phân biệt front-end bug và back-end bug không nhằm “đổ lỗi” cho một nhóm phát triển, mà nhằm rút ngắn thời gian điều tra nguyên nhân và tìm đúng người (developer) cần giúp khi cần xử lý gấp.
Đối với tester, kỹ năng sử dụng Chrome DevTools để đọc request, response, status code và console log là một kỹ năng quan trọng. Chỉ với vài phút kiểm tra trên DevTools, bạn có thể cung cấp thêm thông tin và bằng chứng giá trị, giúp lập trình viên nhanh chóng xác định vị trí phát sinh lỗi và rút ngắn đáng kể thời gian xử lý bug.
