JavaScript error and performance monitoring with Raygun is available using the Raygun4JS provider.

Raygun4JS is a library that you can easily add to your website or web application, which will then monitor your application and display all JavaScript errors and frontend performance issues affecting your users within your Raygun account. Installation is painless.

The provider is a single script which includes the sole dependency, allowing you to drop it straight in. It is also available as a script snippet which loads the library from Raygun's CDN.

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">
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({

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), the development script (full source) or install Raygun via NPM.

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

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

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

If you would like to defer the loading of the Raygun snippet, you can do so by adding the defer attribute to the script tag.

This will ensure the script is loaded after the page has finished loading, but before the DOMContentLoaded event is fired.

We strongly recommend that you place the script tag for the provider snippet first and mark all of your other scripts with defer (but not async). This will guarantee that the Raygun4JS provider is executed before any of the others.

Without doing this you will find that it's possible for errors to occur before Raygun has loaded, which means you'll loose visiblity on these issues.

Setup user tracking by providing the following information to the Raygun4JS provider after the previous code snippet.

rg4js('setUser', {
  identifier: 'users_email_address_or_unique_id',
  isAnonymous: false,
  email: '',
  firstName: 'Firstname',
  fullName: 'Firstname Lastname'

The string properties on a User have a maximum length of 255 characters. Users who have fields that exceed this amount will not be processed.

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

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

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