Đọc User-Agent trong ticket support | Parse UA bug report đúng chỗ, không sniff feature
Parse User-Agent để đọc ticket và tái hiện bug — không để quyết định feature trên production. Trong support: copy nguyên chuỗi UA + tóm tắt môi trường. Trong code: ưu tiên feature detection và CSS responsive; sniff UA chỉ khi có bug cụ thể và ngày xóa workaround. Hiển thị User-Agent Kawa mở trang là copy được chuỗi hiện tại — phù hợp khách gửi môi trường qua chat.
Team outsourcing hoặc freelance Việt Nam hay nhận ticket kiểu: “Web lỗi trên Chrome”, “App không hiện nút trên điện thoại”, kèm ảnh màn hình cắt cụt — không có OS, phiên bản browser, desktop hay mobile. Engineer mở máy mình (Chrome mới trên Windows), không tái hiện được, hỏi lại 3 vòng trên Zalo rồi mất nửa ngày.
Chuỗi User-Agent (UA) vẫn là tín hiệu nhanh nhất để biết khách đang ở đâu. Nhưng năm 2026, sniff UA để bật feature là bẫy: UA Reduction, token giả lịch sử, Chrome trên iOS dùng WebKit. Bài này tập trung đọc và ghi UA trong ticket / bug report, và rạch rõ ranh giới với feature detection.
Bài viết này giúp bạn
- Hiểu UA dùng đúng chỗ (forensics / support) và sai chỗ (feature gate)
- Đọc nhanh một chuỗi UA mẫu: browser, engine, OS, mobile hint
- Checklist ticket support: UA + bước tái hiện + expected/actual
- Tránh 5 bẫy: iOS WebKit, spoof DevTools, UA Reduction, proxy rewrite, desktop mode trên tablet
- Biết khi nào cần Client Hints, khi nào chuỗi thô vẫn đủ
- Copy UA local bằng công cụ User-Agent không cần đăng ký
User-Agent là gì (30 giây)
Mỗi request HTTP, trình duyệt gửi header (và JS có navigator.userAgent) dạng chuỗi dài. Ví dụ Chrome trên Windows:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36Đọc nhanh:
| Đoạn | Ý nghĩa thực tế | Bẫy thường gặp |
|---|---|---|
Mozilla/5.0 | Token lịch sử tương thích | Không có nghĩa là Firefox |
Windows NT 10.0 | Gợi ý OS Windows 10/11 | Có thể bị giảm chi tiết / spoof |
AppleWebKit/537.36 | Engine hint (Blink cũng mang) | Không đồng nghĩa Safari |
Chrome/124… | Brand marketing + version thô | Version có thể bị làm mờ (UA Reduction) |
Safari/537.36 | Token tương thích | Chrome cũng mang chữ Safari |
Đủ để chọn máy tái hiện — không đủ để chứng minh “có hỗ trợ API X”.
Đúng chỗ vs sai chỗ: support vs feature detect
| Ngữ cảnh | Mục tiêu | Cách làm |
|---|---|---|
| Ticket / bug report | Biết môi trường để tái hiện | Copy chuỗi đầy đủ + tóm tắt OS/browser + bước số |
| Analytics thô | Thống kê brand / platform | Client Hints khi có; fallback parse UA (chấp nhận mất mát) |
| Bật feature UI | Có API / CSS không? | 'X' in window, @supports, polyfill — không sniff Chrome |
| Layout mobile | Viewport / pointer | Media Query, pointer: coarse — không if (Mobile) |
| Workaround bug engine | Sửa tạm 1 version | Sniff hẹp + flag + ngày xóa; không để mãi trong codebase |
Quy tắc nhớ: ticket cần chuỗi; product cần capability. Trộn hai việc này là nguồn “chỉ lỗi trên máy khách” kéo dài hàng tuần.
// Đúng hướng — hỏi capability
if ("serviceWorker" in navigator) {
// đăng ký SW
}
// Sai hướng — gate feature bằng marketing name
if (/SamsungBrowser\/1[0-5]/.test(navigator.userAgent)) {
// sẽ gãy khi version đổi hoặc UA bị giảm
}Checklist: ghi UA vào bug report
Khi khách (hoặc QA) báo lỗi, thu đủ 5 mục sau — UA chỉ là một trong đó:
- Chuỗi User-Agent đầy đủ (copy/paste, không tự gõ lại)
- Tóm tắt 1 dòng: ví dụ
Chrome 124 · Windows 10 · desktop - Bước tái hiện đánh số (1 → 2 → 3 → lỗi)
- Expected vs actual (một câu mỗi bên)
- Viewport / thiết bị: PC hay phone; nếu mobile — model nếu biết
Cách lấy UA nhanh (không cần DevTools)
- Trên đúng trình duyệt đang lỗi, mở What is my User-Agent? (Kawa)
- Chuỗi hiện ngay — nhấn Sao chép
- Dán vào ticket Jira / Linear / form / Zalo (che PII khác nếu có)
Công cụ chỉ hiển thị navigator.userAgent của trình duyệt đang mở và chạy trên máy bạn — phù hợp khách tự gửi môi trường mà không cài extension.
Nếu bạn là engineer đọc ticket đã có UA: dán chuỗi vào note nội bộ, tách OS/browser bằng mắt theo bảng trên — đừng viết script production chỉ để “parse cho vui”.
Mẫu đoạn dán vào ticket
## Môi trường
UA: Mozilla/5.0 (iPhone; CPU iPhone OS 17_4 like Mac OS X)
AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/124.0.0.0
Mobile/15E148 Safari/604.1
Tóm tắt: Chrome trên iOS (WebKit) · iPhone · portrait
## Tái hiện
1. Mở /checkout trên Wi‑Fi
2. Chọn thanh toán thẻ
3. Bấm "Xác nhận"
## Expected
Hiện form thẻ
## Actual
Nút không phản hồi; console không lỗi rõGhi CriOS + iPhone ngay từ đầu tránh team lãng phí giờ test trên Chrome desktop Windows.
5 bẫy khi đọc UA trong support
1. Chrome / Edge / Firefox trên iOS = WebKit
Trên iOS, browser bên thứ ba dùng WebKit. Ticket ghi “Chrome” nhưng bug thuộc Safari engine. Sniff chữ Chrome rồi kết luận “Blink bug” là sai hướng điều tra.
2. Spoof trong DevTools
DevTools → Network conditions có thể đổi UA. QA quên tắt → ticket ghi iPhone trong khi đang test desktop. Luôn hỏi: “Bạn có bật giả lập mobile / đổi UA không?“
3. UA Reduction
Chrome cố tình làm mờ chi tiết version/OS vì privacy. Hai báo cáo cùng “Chrome 120” có thể khác patch / platform. Coi UA là gợi ý, không phải fingerprint chính xác.
4. Proxy / gateway doanh nghiệp
Một số mạng công ty rewrite UA “cho tương thích”. Chỉ user VPN nội bộ lỗi → nghi gateway trước khi blame vendor browser.
5. Desktop mode trên tablet
Tablet bật “site desktop” đôi khi đổi UA mà engine/viewport không đổi theo. Layout vẫn mobile; sniff nghĩ đã có feature desktop.
Case study
Case 1: Nút checkout “chết” trên điện thoại khách
Ticket: “Chrome mobile lỗi, PC ổn.” Không kèm UA.
Sau khi xin UA: chuỗi có CriOS + iPhone → Chrome trên iOS (WebKit).
Điều tra: CSS position: fixed + thanh địa chỉ iOS; không phải bug Blink. Fix Media Query / env(safe-area-inset-*).
Bài học: Một chuỗi UA tiết kiệm nửa ngày test sai engine.
Case 2: Freelancer nhận “chỉ lỗi máy kế toán”
Ticket: Edge trên Windows máy kế toán; laptop dev Chrome ổn.
UA từ khách: vẫn Edge hiện đại; thật ra extension adblock inject script. UA đúng giúp loại trừ “browser quá cũ” nhanh — rồi chuyển sang kiểm tra extension / cache.
Bài học: UA không giải hết; nhưng rút ngắn nhánh sai.
Case 3: Product muốn if (Android) load ảnh nhỏ
Ý tưởng: sniff Android trong UA để đổi CDN image.
Vấn đề: tablet Android “desktop mode”, UA spoof, và responsive đã đủ.
Cách đúng: srcset / sizes / container queries — không nhánh UA trong React.
Client Hints: khi nào cần thêm?
Sec-CH-UA-* và navigator.userAgentData cho brand/platform có cấu trúc hơn chuỗi hỗn độn — hữu ích analytics và một số server routing. Chưa thay thế hoàn toàn chuỗi thô trong ticket (Safari, privacy mode, opt-in thiếu).
if (navigator.userAgentData) {
const high = await navigator.userAgentData.getHighEntropyValues(["model"]);
console.log(navigator.userAgentData.brands, high.model);
}Thu thập high-entropy hints = bề mặt fingerprint — chỉ xin field cần thiết, có lý do pháp lý/privacy rõ.
Quy trình team: playbook 5 phút
- Template bug report bắt buộc field UA (hoặc link mở công cụ UA trong FAQ support)
- Engineer đọc ticket: tách OS / browser / mobile trong 30 giây
- Chọn máy tái hiện cùng họ engine (iOS → WebKit thật, không chỉ Chrome desktop)
- Nếu cần workaround sniff: mở ticket kỹ thuật kèm ngày xóa
- Không merge PR nào lấy
navigator.userAgentlàm điều kiện feature chính mà không có comment + owner
Tóm tắt
| Việc | Nên | Không nên |
|---|---|---|
| Support / bug | Copy UA đầy đủ + bước tái hiện | Chỉ viết “Chrome” / “điện thoại” |
| UI / API | Feature detect, @supports | if (/Chrome/) làm gate |
| Analytics | Client Hints + fallback | Tin tuyệt đối version trong UA reduced |
| Workaround | Sniff hẹp + expiry | Nhánh IE/Android sống mãi không owner |
User-Agent vẫn hữu ích — với tư cách nhật ký môi trường trong ticket, không phải kiến trúc product. Mở hiển thị User-Agent, copy, dán vào báo cáo: một thao tác nhỏ, giảm rất nhiều vòng hỏi lại trên chat.