1. Home
  2. Language Guides
  3. JavaScript
  4. Real User Monitoring
  5. Installation

Installation

JavaScript Real User 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.

Frameworks

If you use a JavaScript framework, visit the following links for step by step instructions on how you can integrate Raygun.

Package Manager
CDN

npm install raygun4js

yarn add raygun4js

bun add raygun4js

Import the Raygun4JS provider into your application inside of App.js (or equivalent for your framework) and activate real user monitoring.

import rg4js from 'raygun4js';

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

Add the following snippet to the beginning of the <head> tag within your markup, before any other <script> tags.

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

Paste this snippet below the one you added in step 1.

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

Optional - Enable Crash Reporting

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

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

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

On this page: