Installation

Step 1 - Add the Raygun4JS script

As WebAPI does not include any native frontend capabilites, adding Raygun4JS requires an extra few steps

In your projects root create a wwwroot directory. Inside this create a raygun-init.js and add the following code:

 !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");

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

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 download the production script (minified) or the development script (full source) and add it in place of raygun-init.js

Note: If you encounter a situation where no events are appearing within Raygun, you may need to hard code the protocol so that the CDN matches your hosting environment. This could look like one of the following -

• https://cdn.raygun.io/raygun4js/raygun.min.js
• http://cdn.raygun.io/raygun4js/raygun.min.js

This will be in replacement of //cdn.raygun.io/raygun4js/raygun.min.js.

Step 2 - Inject the JavaScript code

In order to get the JavaScript file we added to be used we need to tell ASP.NET WebAPI to insert it into the OpenAPI frontend code.

Inside your Program.cs file, find and modify the app.UseSwaggerUI(); to look like the following:

app.UseSwaggerUI(options =>
  {
    options.InjectJavascript("/raygun-init.js");
  }
);

Additional configuration

To use any aditional configuration options, make sure you add them into the raygun-init.js script underneath the initialization of the script

User Tracking

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.

Handling a user logging out

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
});

Single Page Applications

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.

Custom timings

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.

Advanced Setup

For advanced setup instructions please refer to the Advanced Features documentation page.

Optional - Enable Crash Reporting

Enable Crash Reporting to also track errors and exceptions occurring in your website. You can find information about Crash Reporting for ASP.NET Framework WebAPI Here