1. Home
  2. Language Guides
  3. .NET
  4. Real User Monitoring
  5. ASP.NET Framework MVC

ASP.NET Framework MVC

ASP.NET Framework MVC Real User Monitoring with Raygun is available using the Raygun4JS provider.

Installation

Step 1 - Add the Raygun4JS script

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 download the production script (minified), the development script (full source) or install Raygun via NPM.

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 - Enable Real User Monitoring

Depending on how you have added Raygun4JS in your application, setting up Crash Reporting will be different. Below are examples for the two most common use cases. These snippets will set up Raygun4JS to automatically send application usage statistics to Raygun.

Add the following lines underneath the previous code in Step 1.

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

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

To access user data from the View layer you may find the ViewBag object useful. You can find out more information on passing data to the View layer here

To use ViewBag to pass user data from the server to the client, you can follow these steps:

In the controller action method, set the desired user data to the ViewBag properties. For example:

public ActionResult Index()
{
    ViewBag.UserName = "John Doe";
    ViewBag.UserEmail = "john.doe@example.com";
    // ... other user data
    return View();
}

In the corresponding view, access the ViewBag properties to display or use the user data. For example, you can include the user name and email in your HTML markup:

<!DOCTYPE html>
  <html>
  <head>
      <title>User Profile</title>
  </head>
  <body>
      <h1>Welcome, @ViewBag.UserName!</h1>
      <p>Email: @ViewBag.UserEmail</p>
      <!-- Other HTML content -->
  </body>
</html>

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

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.

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.

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

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

On this page: