Nevision for React
Drop the recorder script into your index.html — no npm package, no bundler config. Works with Create React App, Vite, Webpack, Parcel, esbuild — anything that ships React to the browser.
Install
<!-- Add inside <head>, before any other analytics scripts --> <script src="https://api.nevision.app/recorder.js?siteId=YOUR_SITE_ID" async></script>
Initialize
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My App</title>
<script
src="https://api.nevision.app/recorder.js?siteId=YOUR_SITE_ID"
data-environment="production"
data-release="v2.4.1"
async></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Common pitfalls
Put the script in <head>, not at the bottom of <body>
Placing the tag in <head> with async ensures the recorder is fetched in parallel with your bundle and ready to capture errors that fire during initial render.
Mask sensitive form fields explicitly
Email, password, and credit card inputs are masked by default. For custom inputs containing PII (e.g. phone numbers, SSNs), add the data-nevision-mask attribute to the input element.
Source maps in production
Configure your bundler to emit production source maps (Vite: build.sourcemap=true). Upload them to Nevision via the CLI in your CI pipeline so error stack traces are symbolicated.
FAQ
Does it work with Next.js?+
Yes — see the Next.js integration page for App Router and Pages Router specifics.
Does it work with React Native?+
Not yet. React Native support is on the roadmap for late 2026. The current recorder is web-only.
Will it interfere with React DevTools?+
No — the recorder hooks at the DOM level, not the React fiber level. DevTools, Redux DevTools, and React Query DevTools all work normally.
How do I tag sessions with my deployed version?+
Add data-release="v1.2.3" to the script tag. Many teams template the value at build time so each deploy ships its commit SHA or version automatically.