Manual XHR framework instrumentation

Support for IE 8 and lower

The JavaScript agent leverages property listeners to find out the exact moment a framework completely initializes. This technique lets the agent instrument several functions provided by the framework needed for capturing and correlating webrequests and user actions. However, property listeners are not available in older versions of Internet Explorer. In older versions, the earliest automatic initialization event is the end of the onload event, when frameworks have most likely finished initialization. This is sufficient for many cases, but sometimes framework components are used during the onload event. To capture these function calls, you must manually trigger the JavaScript agent framework instrumentation. For most frameworks, it's sufficient to inject a small JavaScript snippet right after the framework's script tag. For AngularJS and Prototype, additional effort is required.

<head>
	<meta></meta>
    <script type="text/javascript" src="dtagent99_xj3_1234.js"></script>
    <script type="text/javascript" src="framework.js"></script>
    <script type="text/javascript">window.dT_&&dT_.initFramework&&dT_.initFramework();</script>
	<script>/* other scripts \*/</script>
</head>

Ajax detection modules requiring snippets

Note

Snippets are required simply for supporting older browsers like IE 8 and lower unless otherwise specified (such as non JSPM or Webpack Angular 2, which requires a snippet to support it in ANY browser).

AngularJS 1.x

AngularJS is supported out-of-the-box and instrumented automatically. No code changes are required.

Angular 2.x - 4.x

  • Requires Dynatrace OneAgent version 1.127 or above

If you‘re using JSPM (systemjs) or Webpack, Angular is supported out-of-the-box and instrumented automatically. No code changes are required.

If you‘re bundling your application using a different method, you must insert the code snippet below into your application component to pass the http and the Headers objects.

Angular code snippet

if(typeof dT_!='undefined' && dT_.initAngularNg){dT_.initAngularNg(http,Headers);}

It's recommened that you insert the code snippet into the constructor of the application component.

app.component.ts

import {Http,Headers} from '@angular/http';
import {Component} from '@angular/core';

// Declaration only needed in TypeScript. Remove this line if you are using JavaScript
declare var dT_; 

@Component({
    selector: 'my-app',
    template: '<h2>My Angular 2 App</h2>'
})
export class AppComponent{
    // HttpModule should be an import in the NgModule which bootstraps this component!
    constructor(http: Http) {
	// dynaTrace angular2 instrumentation
	if(typeof dT_!='undefined' && dT_.initAngularNg){dT_.initAngularNg(http,Headers);}
    }
}

If your application module doesn‘t import the HttpModule, you must adapt the module file as well.

app.module.ts

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [...],
  imports: [
	HttpModule,
	...
  ],
  providers: [...],
  bootstrap: [..]
})

Note

Note that this example is based on the Angular 2.0.0 official release and therefore may not show the correct way to initialize older versions of Angular. You may need to ensure that the http and Headers are valid objects that contain relevant methods (for example, http should have get, post, etc) for using them, as their contents may differ between application versions or depending on how the applications were initialized. This can be tested by issuing an XHR from the constructor (for example, to verify that the http and Headers objects work in that location before passing them to the initAngularNg method).

Dojo

For Dojo, inject the snippet after dojo.js script-tag.

window.dT_&&dT_.initDojo&&dT_.initDojo();

ExtJS

For ExtJS, inject the snippet after ext-all.js script-tag.

window.dT_&&dT_.dtInitExtJS&&dT_.dtInitExtJS();

jQuery

For jQiery, inject the snippet after jquery.js script-tag.

window.dT_&&dT_.initJQuery&&dT_.initJQuery();

MooTools

For MooTools, inject the snippet after mootools.core.js script-tag.

window.dT_&&dT_.initMooTools&&dT_.initMooTools();

Prototype

For Prototype, inject the snippet before Ajax.Updater call in the prototype.js file. See the screenshot for the location in the prototype file.

window.dT_&&dT_.initPrototype&&dT_.initPrototype();