1. Home
  2. Language Guides
  3. JavaScript
  4. Crash Reporting
  5. Installation

Installation

JavaScript Crash Reporting 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.

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

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 enable Crash Reporting.

import rg4js from 'raygun4js';

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enableCrashReporting', 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('enableCrashReporting', true);
</script>

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('enableRealUserMonitoring', true); 
</script>

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

On this page: