1. Home
  2. Language Guides
  3. JavaScript
  4. Crash Reporting
  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 Crash Reporting for an existing SvelteKit (or Svelte) application using the Raygun4JS provider. Server-side Crash Reporting is currently not supported by the Raygun4JS provider. However, if you are using SvelteKit and you are using the Node.js SvelteKit adapter for running server-side code (this is enabled by default) then you can use the Raygun Node.js npm package.

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.

Step 1 - Add the Raygun4JS script

There are two installation methods for Raygun4JS. Through a package manager like NPM and Yarn, or through our CDN.

Install Raygun via NPM.

NPM

npm install raygun4js

Yarn

yarn add raygun4js

Bun

bun add raygun4js

Add the following snippet to the beginning of the <head> tag within your markup. 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.

Alternatively, you can download the production script (minified) or the development script (full source). Note: If you encounter a situation where no events are appearing within Raygun, you may need to hard code the protocol so that the CDN matches your hosting environment. This could look like one of the following -

  • https://cdn.raygun.io/raygun4js/raygun.min.js
  • http://cdn.raygun.io/raygun4js/raygun.min.js

This will be in replacement of //cdn.raygun.io/raygun4js/raygun.min.js.

Step 2 - Enable Crash Reporting

Depending on how you have added Raygun4js in your application, setting up crash reporting will be different. Below are examples for the two most common use cases. These snippets will set up Raygun4js to automatically send all unhandled JavaScript errors to Raygun.

Add the following lines underneath the previous code in Step 1.

<script type="text/javascript">
  rg4js('apiKey', 'paste_your_api_key_here');
  rg4js('enableCrashReporting', true);
</script>

Import the Raygun4JS provider into your application inside of App.js (or equivalent for your framework) and enable Crash Reporting.

import rg4js from 'raygun4js';

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

Step 3 - Test your installation

Raygun should now be setup! Send a test exception using the snippet below to test your installation. Once we detect your first error event, your Raygun app will automatically update.

throw new Error("This is a test exception");

For advanced setup instructions please refer to the Advanced Features documentation page.

For troubleshooting tips please refer to the Troubleshooting documentation page.

Optional - Enable Real User Monitoring

Enable Real User Monitoring to also track your website's performance.

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

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

On this page: