Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Poor Discoverability of npm/pnpm Selector in Vercel Analytics Setup

Đang mở
  • Có gì không ổn?
#201 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
typescript
Lĩnh vực
design, documentation

Hướng nghiên cứu

Start with the setup guide section titled “Add @vercel/analytics to your project” and inspect the command selector shown there. Trace the selector’s UI entry point and determine how its package-manager options are presented. Done means users can clearly recognize and switch between npm, yarn, and pnpm without relying on an unlabeled icon.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

I ran into an issue while setting up analytics on my website using Vercel.

While following the setup guide, I got to the section “Add @vercel/analytics to your project”. The default command shown was using pnpm, but my project setup uses npm. I tried looking for an option to switch the command, but I couldn’t find it immediately.

At first, it wasn’t clear that there was a way to change the command type. I spent about 20 minutes trying to figure it out and even left the page to search for alternatives. Eventually, I came back and discovered that the small icon in that section was actually meant to switch between different package managers (npm, yarn, pnpm, etc.). When found, it took me less than 5 minutes to set up the feature.

Image
Problem

The main issue is the poor discoverability of the command selector.

  • The icon doesn’t clearly communicate that it is clickable or a dropdown.
  • There is no visible label like “Select command” to guide the user.
  • For a task that should take a few minutes, this caused unnecessary confusion and frustration.
  • Users who are not very familiar with documentation patterns or UI conventions may easily miss it completely.

This can lead to a poor user experience, especially for beginners who may assume the documentation is fixed to pnpm only.

Impact
  • Wasted time trying to find the correct npm command.
  • Temporary frustration over a simple setup step.
  • Potential drop-off if a user gives up and tries another tool or guide.
Suggestion

The UI should make this interaction more obvious.

A simple improvement would be:

  • Replace or supplement the icon with a clear label like “Select command.”
  • Or use a visible dropdown with text, for example:
  • “npm”
  • “yarn”
  • “pnpm”

Since a default command is already shown, users should immediately understand that this section is interactive and meant for switching package managers, not just a static instruction.

Example Reference

Here is a screenshot example of a dropdown that clearly communicates the action to users:

Image
Ngôn ngữ chính
TypeScript
Star
518
Fork
54
Merge trung bình
6 giờ 21 phút
Pull request đã merge (30 ngày)
3

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của vercel/analytics

Tất cả issue của vercel/analytics

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.