ajax-instrumentation

React Plugin

Getting started

To use this React plugin run npm install ajax-instrumentation to include it as a node module within your ReactJS project. When rendering your React app with root.render() include import Instrument from ./instrument.js at the head of the file where you are rendering your app. Within root.render() add <Instrument /> to add the Instrumentation. Inlcude import ajax-instrumentation/popup.css to this file aswell to allow for the popup to be displayed correctly.

Functionality

The functionality of this implementation allows for the easy Instrumentation of Ajax within a web application by proxying the XMLHttpRequest.open function. This is called functional hooking and allowed you to insert your own custom code into a function at runtime. Each time an Ajax request is made it collects and stores relevant metadata in a document variable which can be accessed by calling the DOM id of the element that has been instrumented. This metadata includes the method type, url of the request, the DOM id manipulated. When the headers from the request is received it will then search through the headers for the header name specified in the global variable provHeaderName. If this header is found it will then make a fetch call to the endpoint specified in the value of that header to retrieve the provenance data generated by the request storing it as a document variable. This is then displayed back to the end user with the previous metadata as a popup within the web application, where the data has been formatted using popup.css to be presentable to the end user.