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 Crash Reporting for an existing SvelteKit (or Svelte) application using the Raygun4JS provider.

Add the following snippet to the beginning of the <head> tag within your root .html file. (E.g., index.html or app.html) Please include this snippet before any other <script> tag references are made to ensure that Raygun has the best chance to capture all error events on the page.

<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>

The above snippet will fetch the Raygun4JS script from our CDN asynchronously, so it doesn't block the page load. It will also catch errors that are thrown while the page is loading, and send them when the script is ready. You can now track and fix any errors once you deploy your app.

Add the following lines underneath the previous code in Step 1 with your API key included.

<script type="text/javascript">
  rg4js('apiKey', 'PASTE-YOUR-RAYGUN-API-KEY_HERE');
  rg4js('enableCrashReporting', true);
</script>

Your Raygun API key (available under "Application Settings" in your Raygun Account).

This will configure the provider to automatically send all unhandled JavaScript errors to Raygun.


If you would like to use Real User Monitoring update the second script to look like this:

<script type="text/javascript">
  rg4js('apiKey', 'PASTE-YOUR-RAYGUN-API-KEY_HERE');
  rg4js('enableCrashReporting', true);
  rg4js('enablePulse', true);
</script>

Real User Monitoring unlocks real-user insights into front-end performance to quickly identify and resolve issues impacting your end user experience.

Get in touch if you would like a demo or a free trial of Real User Monitoring.