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.

Once Raygun is installed, it will automatically start monitoring your application for errors with Crash Reporting, and complete user sessions with Real User Monitoring.

Step 1 - Add script

Add this snippet to your markup, before the closing </head> tag:

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

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

Step 2 - Enable Crash Reporting

Complete step 1 and add the following lines to your JavaScript site code, just before the closing </body> tag with your API key included.

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

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

Optional - Enable both Crash Reporting and Real User Monitoring

Complete step 1 and add the following lines to your JavaScript site code, just before the closing </body> tag with your API key included. Then call both Crash Reporting and Real User Monitoring products.

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

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