Skip to main content
Choose your preferred installation method. Both methods work with all major frameworks. For more control and TypeScript support, use the NPM package.

​
Installation

npm install @sonarly/tracker

​
Initialize

Add the tracker to your app entry point: 
import Tracker from '@sonarly/tracker';

const tracker = new Tracker({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: 'https://sonarly.dev/ingest'
});

tracker.start();

​
Supported Frameworks (NPM)

FrameworkEntry point file
React (Vite)src/main.tsx or src/index.tsx
React (CRA)src/index.tsx
Next.jspages/_app.tsx or app/layout.tsx
Vue (Vite)src/main.ts
Vue CLIsrc/main.ts
Nuxt 3Plugin in plugins/ directory
Sveltesrc/main.ts
SvelteKit+layout.svelte or hooks.client.ts
Angularsrc/main.ts
Remixapp/entry.client.tsx

​
HTML Script Tag

The simplest way to add Sonarly - just paste this script in your HTML file.

​
Installation

Add this script before the closing </head> tag in your main HTML file (index.html, app.html, or layout file): 
<script>
  (function(A, opts){
    window.Sonarly = { opts: opts, queue: [] };
    var s = document.createElement('script');
    s.src = A;
    s.async = true;
    document.head.appendChild(s);
  })("https://sonarly.dev/static/tracker.js", {
    projectKey: "YOUR_PROJECT_KEY",
    ingestPoint: "https://sonarly.dev/ingest"
  });
</script>

​
Supported Frameworks (HTML)

Works with any framework that has an HTML entry point:
FrameworkWhere to add the script
React (Vite)index.html
React (CRA)public/index.html
Next.jspages/_document.js or app/layout.tsx
Vue (Vite)index.html
Vue CLIpublic/index.html
Nuxt 3app.vue or nuxt.config.ts (via head)
Svelteapp.html
SvelteKitsrc/app.html
Angularsrc/index.html
Remixapp/root.tsx
Vanilla JSYour HTML file

​
Configuration Options

OptionTypeDescription
projectKeystringYour project key from the dashboard
ingestPointstringIngestion endpoint (https://sonarly.dev/ingest)
__debug__numberDebug level (0-5, use 5 for verbose logging)

​
Verify Installation

Check your browser console for Sonarly initialization messages. Sessions should appear in your dashboard within seconds. At the end of the onboarding, Sonarly provides a detector that verifies each part of the tracker (frontend, sourcemaps, backend traces) is working correctly.

Configure sourcemaps

Enable readable stack traces with sourcemap upload