-
Notifications
You must be signed in to change notification settings - Fork 46
Open
Description
Bug Report
Description
When using <Analytics route={route} /> from @vercel/analytics/react (v2.0.1) in a plain React + React Router app, no pageviews are ever sent — silently, with no warning or error.
Root Cause
In the React component (source):
// Setting route enables disableAutoTrack
useEffect(() => {
inject({
...props.route !== void 0 && { disableAutoTrack: true },
...props,
});
}, []);
// But pageview() only fires when BOTH route and path are truthy
useEffect(() => {
if (props.route && props.path) {
pageview({ route: props.route, path: props.path });
}
}, [props.route, props.path]);When route is provided:
disableAutoTrackis set totrue→ the script won't track pageviews on its own- The component is supposed to call
pageview()manually on route changes - But
pageview()only fires when bothrouteANDpathare truthy - If
pathis omitted → the condition isfalse→ zero pageviews are sent, ever
There is no console.warn, no error, no fallback. The component renders null and does nothing.
How to Reproduce
import { Analytics } from '@vercel/analytics/react';
import { useLocation, matchPath } from 'react-router-dom';
function AnalyticsWithRoutes() {
const { pathname } = useLocation();
const route = ROUTES.find(p => matchPath(p, pathname)) ?? pathname;
// ❌ This sends ZERO pageviews — no error, no warning
return <Analytics route={route} />;
// ✅ This works — but only discoverable by reading source code
// return <Analytics route={route} path={pathname} />;
}Expected Behavior
At minimum, one of:
-
Documentation: The
routeandpathprops should be documented on the package configuration page, with a clear note thatpathis required whenrouteis used. -
Runtime warning: When
routeis provided withoutpath, log a warning:[Vercel Web Analytics] `route` prop requires `path` prop for pageviews to be tracked. -
Graceful fallback: When
routeis set butpathis omitted, fall back towindow.location.pathnameinstead of silently doing nothing.
Context
- This primarily affects non-Next.js/Remix apps (React Router, TanStack Router, etc.) where developers must wire up route tracking manually.
- The Next.js and Remix wrappers pass both
routeandpathautomatically, which is likely why this gap hasn't been caught — the manual usage path is undocumented. - The
routeandpathprops appear in TypeScript autocomplete but are absent from the official docs, so developers can discover and useroutewithout ever knowingpathis required. - We spent significant debugging time on this because the failure mode is completely silent — no network requests, no console output, nothing in DevTools.
Environment
@vercel/analytics: 2.0.1- Framework: React 19 + React Router 7 + Vite
- Deployment: Vercel (production)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels