Front-End Application Performance Monitoring (APM)

Introduction to Front-End APM Tools: Dynatrace vs. AppDynamics

Today enterprise web applications are easy to build using technologies like React, and Angular but performance management is crucial and is often ignored. There are various Application Performance Management (APM) tools at your disposal, but two tools that surpass the others in terms of flexibility of implementation, monitoring capability, dynamic error resolution, and ease of use are Dynatrace and AppDynamics.

In this post, we will delve deeper into front-end monitoring with two leading tools: Dynatrace and AppDynamics. Moreover, we will compare the pros and cons of each tool and highlight the implementation details in the front-end source code.

Dynatrace

Pros

1. AI-powered monitoring: Dynatrace uses AI for anomaly detection, root cause analysis, and predictive problem resolution, which enhances its automated monitoring capabilities.
2. Full-stack visibility: Provides comprehensive monitoring of applications, infrastructure, and user experience in one platform.
3. Automatic discovery and instrumentation: Automatically discovers, and instruments applications, services, and processes without requiring manual configuration.
4. Cloud-native support: Strong support for cloud-native environments, including Kubernetes, Docker, and various cloud services (AWS, Azure, GCP).
5. Real-time monitoring: Offers real-time performance monitoring and insights, which is crucial for detecting and resolving issues quickly.
6. Scalability: Designed to handle large-scale environments, making it suitable for enterprises with extensive IT infrastructure.
7. User experience monitoring: Provides detailed insights into user behavior and experience, helping to optimize application performance from the end-user perspective.

Cons

1. Cost: This can be expensive, especially for smaller organizations or those with budget constraints.
2. Complexity: The breadth of features and capabilities can make it complex to set up and configure for new users.
3. Learning curve: Due to its comprehensive nature, there may be a steep learning curve for new users.

Dynatrace Implementation for Front-End (Real User Monitoring)

1. Initial Setup

• Sign up: Start by signing up for a Dynatrace account on the Dynatrace website.
• Access the Dynatrace console: Once registered, log into the Dynatrace console to manage your environment.

2. Enable Real User Monitoring (RUM)

Navigate to RUM Settings

1. In the Dynatrace console, go to Applications and click on New Application.
2. Select Web application.

3. Configure Application

Define Application Settings

1. Name your application.
2. Specify the application type and other relevant details.

4. Install RUM JavaScript Tag

Get the RUM JavaScript Tag

1. Once the application is created, Dynatrace will generate a JavaScript tag.
2. The tag looks something like this:

<script type="text/javascript">
  var dtrum = dtrum || [];
  dtrum.push({
    "type": "api",
    "name": "setappkey",
    "value": "YOUR_APPLICATION_ID"
  });

  (function() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "https://YOUR_DYNATRACE_ENVIRONMENT_ID.live.dynatrace.com/jstag/XXXXXXXXXXXXXXXX";
    var h = document.getElementsByTagName("head")[0];
    h.appendChild(s);
  })();
</script>

Embed the Tag in Your Website

1. Add the JavaScript tag to the <head> section of your HTML files:

<html>
  <head>
    <!-- Other head elements -->
    <script type="text/javascript">
      var dtrum = dtrum || [];
      dtrum.push({
        "type": "api",
        "name": "setappkey",
        "value": "YOUR_APPLICATION_ID"
      });
      (function() {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://YOUR_DYNATRACE_ENVIRONMENT_ID.live.dynatrace.com/jstag/XXXXXXXXXXXXXXXX";
        var h = document.getElementsByTagName("head")[0];
        h.appendChild(s);
      })();
    </script>
  </head>
  <body>
    <!-- Body content -->
  </body>
</html>

5. Verify Data Collection

Access Dynatrace Console

1. Go to the Applications section.
2. Open the newly created application.

Verify Data

Ensure that user interaction data is being captured and displayed.

AppDynamics

Pros

1. Business transaction monitoring: Focuses on monitoring business transactions, providing deep visibility into how application performance affects business outcomes.
2. User-friendly interface: Known for its intuitive and easy-to-use interface, it simplifies monitoring and management.
3. Custom dashboards and reporting: Offers customizable dashboards and detailed reporting, which can be tailored to specific business needs.
4. Integration capabilities: Integrates well with a wide variety of third-party tools and platforms, enhancing its extensibility.
5. End-to-end monitoring: Provides end-to-end monitoring capabilities across applications, infrastructure, and networks.
6. Anomaly detection: Uses machine learning for anomaly detection, helping to identify performance issues proactively.
7. Strong support for legacy systems: Supports a wide range of technologies, including legacy systems, making it suitable for organizations with diverse IT environments.

Cons

1. Cost: Similar to Dynatrace, AppDynamics can be expensive, which might be a consideration for smaller organizations.
2. Setup and configuration: While the interface is user-friendly, initial setup and configuration can be time-consuming.
3. Agent overhead: The agents used for monitoring can introduce some overhead, potentially affecting application performance.
4. Customization complexity: Customizing the platform to meet specific needs can be complex and may require advanced knowledge.

AppDynamics Implementation for Front-End (Browser Real User Monitoring)

1. Initial Setup

• Sign up: Register for an AppDynamics account on the AppDynamics website.
• Access controller: Log into the AppDynamics Controller, which is the central management console.

2. Enable Browser RUM

Navigate to RUM Settings

1. In the AppDynamics Controller, go to User Experience > Browser Apps.
2. Click Create Browser App.

3. Configure Application

Define Application Settings

1. Name your application.
2. Configure other settings as needed.

4. Install Browser RUM JavaScript Tag

Get the Browser RUM JavaScript Tag

1. Once the application is created, AppDynamics will generate a JavaScript tag.
2. The tag looks something like this:

<script type="text/javascript">
  window['adrum-start-time'] = new Date().getTime();
  (function(config){
    config.appKey = 'YOUR_APPLICATION_KEY';
    config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
    config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
    config.beaconUrlHttp = 'http://COLLECTOR_URL';
    config.beaconUrlHttps = 'https://COLLECTOR_URL';
    config.xd = {enable : true};
    config.spa = {enable : true};
    config.auto = true;
    config.enableError = true;
    var script = document.createElement('script');script.async = true;script.src = config.adrumExtUrlHttp + '/adrum/adrum.js';document.getElementsByTagName('head')[0].appendChild(script);
  })(window['adrum-config'] || (window['adrum-config'] = {}));
</script>

Embed the Tag in Your Website

1. Add the JavaScript tag to the <head> section of your HTML files:

<html>
  <head>
    <!-- Other head elements -->
    <script type="text/javascript">
      window['adrum-start-time'] = new Date().getTime();
      (function(config){
        config.appKey = 'YOUR_APPLICATION_KEY';
        config.adrumExtUrlHttp = 'http://cdn.appdynamics.com';
        config.adrumExtUrlHttps = 'https://cdn.appdynamics.com';
        config.beaconUrlHttp = 'http://COLLECTOR_URL';
        config.beaconUrlHttps = 'https://COLLECTOR_URL';
        config.xd = {enable : true};
        config.spa = {enable : true};
        config.auto = true;
        config.enableError = true;
        var script = document.createElement('script');script.async = true;script.src = config.adrumExtUrlHttp + '/adrum/adrum.js';document.getElementsByTagName('head')[0].appendChild(script);
      })(window['adrum-config'] || (window['adrum-config'] = {}));
    </script>
  </head>
  <body>
    <!-- Body content -->
  </body>
</html>

5. Verify Data Collection

Access AppDynamics Controller

1. Go to the User Experience section.
2. Open the newly created browser application.

Verify Data

Ensure that user interaction data is being captured and displayed.

Conclusion

Both Dynatrace and AppDynamics are powerful APM tools with their strengths and weaknesses. Your choice between the two should depend on your specific needs and priorities:

• Choose Dynatrace if: You need AI-powered insights, real-time monitoring, full-stack visibility, and strong support for cloud-native environments.
• Choose AppDynamics if: You prioritize business transaction monitoring, an intuitive interface, customizable dashboards, and strong integration capabilities.