Installation

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">
  !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. With Crash Reporting enabled, it will also catch errors thrown while the page is loading.

Alternatively, you can find instructions on how to install Raygun via NPM here.


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('enablePulse', true); // Enables Real User Monitoring
</script>

Enable Crash Reporting to also track errors and exceptions occurring in your website.

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

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: 'users_email_address@domain.com',
  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.

When a user has logged out of your application, you can remove their data from all subsequent events like so:

rg4js('endSession');

rg4js('setUser', {
  isAnonymous: true
});

Raygun's Real User Monitoring supports single page applications (SPAs) through the trackEvent function:

rg4js('trackEvent', {
  type: 'pageView',
  path: '/' + window.location.pathname
});

When a route or view change is triggered in your SPA, the trackEvent method should be called with type being pageView and path set to a string representing the new view or route. Timing information from this point onwards will be associated to a new "virtual page", which is then viewable in Raygun.

Frameworks

Visit the following links for step by step instructions of how you can integrate Raygun with your JavaScript framework.


You can track custom performance measurements across your website or application using custom timings. For example, you might track the time it takes for a specific video to play or the search bar to load. Custom timings gives you the flexibility to track the timing of events that matter to your users or business.

For more information see our documentation on custom timings.

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