Development mode is incorrect in vite dev

[hyunbinseo]

Summary

In a browser accessing a Vite dev server, the value of isDevelopment() is false.

Therefore /_vercel/insights/script.js is requested, resulting in a 404 Not Found.

Reason

In a browser accessing a Vite dev server, the process is undefined.

https://github.com/vercel/analytics/blob/74c2474ebbb75c50a0009b067e25c56d5255c6a5/packages/web/src/utils.ts#L5-L10

Therefore isDevelopment() returns false.

Reproduction

Open the browser console to see what is logged in the client inside StackBlitz.

• SvelteKit (Vite)
• Next.js

Values

In a browser accessing a Vite dev server:

	SvelteKit	Next.js
isBrowser()	true	true
isDevelopment()	false *	true
typeof process	undefined *	object
typeof process.env.NODE_ENV	string	string
process.env.NODE_ENV	development	development

[hyunbinseo]

Ability to provide a custom isBrowser and isDevelopment value would be a cross-framework solution.

For example, SvelteKit provides both of them:

import { browser, dev } from '$app/environment';

[chriswdmr]

Hey @hyunbinseo! Thank you for this detailed issue report!

We just published 0.1.6-beta.0 – you can install it via @vercel/analytics@beta.

Version 0.1.6-beta.0 includes a new property called mode. It allows you to bypass the existing logic in case we can't figure it out automatically.

Possible values for mode:

• auto: default value if not defined – uses the existing logic to determine the right environment
• development: forces the local development mode – no data will be submitted
• production: forces the production mode which sends data

Any chance you could give it a try?

[hyunbinseo]

Thank you for the quick fix. It works as expected.

import { browser, dev } from '$app/environment';
import { inject } from '@vercel/analytics';

inject({ __mode: dev ? 'development' : 'production' });

In a browser accessing a Vite dev server, the following message is logged.

[Vercel Analytics] Debug mode is enabled by default in development. No requests will be sent to the server.

---

I hope there is an option to override is-browser and is-development.

For example, SvelteKit provides both browser and dev boolean values.

import { browser, dev } from '$app/environment';
import { inject } from '@vercel/analytics';

inject({ browser, dev }); // example

If values are not explicitly provided, the library can decide on its own.

[chriswdmr]

Awesome! Side note: we're going to ship it as mode instead of __mode.

You can disable those log messages by providing the debug property with false if your mode is development.

Please see our documentation around the debug property

[hyunbinseo]

@chriswdmr v0.1.6 looks great.

Should this issue be closed? mode still seems to be a workaround.

If all Vite projects still require the mode property to be explicitly set,

1. It should be clearly stated in the documentation's 'Other Frameworks' section
2. or, the isDevelopment check should be improved to support Vite out of the box.

[chriswdmr]

Perfect, thanks for confirmation.

Closing as it's resolved with v0.1.6

Documentation is already updated