Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Poor Discoverability of npm/pnpm Selector in Vercel Analytics Setup

Open
  • Is something wrong?
#201 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
design, documentation

Research direction

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.

Written by the indexing model from the issue text.

Description

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
Dominant language
TypeScript
Stars
518
Forks
54
Avg merge
6h 21m
Merged PRs (30d)
3

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vercel/analytics

All issues in vercel/analytics

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.