1. Home
  2. Language Guides
  3. JavaScript
  4. Real User Monitoring
  5. Svelte and SvelteKit

Svelte and SvelteKit

Svelte + SvelteKit is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

This guide covers setting up client-side Real User Monitoring for an existing SvelteKit (or Svelte) application using the Raygun4JS provider.

note: We highly recommend utilizing the CDN installation method for Raygun4JS. Alternative methods like NPM might necessitate additional manual setup, particularly when working with SvelteKit. Additionally, please be aware that SvelteKit offers certain automatic server-side rendering features that could potentially limit Raygun4JS's ability to capture all errors.

Package Manager
CDN

npm install raygun4js

yarn add raygun4js

bun add raygun4js

Import the Raygun4JS provider into your application inside of App.js (or equivalent for your framework) and activate real user monitoring.

import rg4js from 'raygun4js';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enableRealUserMonitoring', true);

Add the following snippet to the beginning of the <head> tag within your markup, before any other <script> tags.

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

Paste this snippet below the one you added in step 1.

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enableRealUserMonitoring', true); // Enables Real User Monitoring
</script>

The provider is open source and available at the Raygun4js repository.

On this page: