How to Instrument a React Web App Client using aws xray - aws-xray

Question

I'm trying to instrument my React Web App using https://docs.aws.amazon.com/xray/latest/devguide/scorekeep-client.html
I am using axios interceptor,But unable to instrument any further ideas?

Answer 1

Here's the axois interceptor code you'll need for X-Ray. Axios does not use the base HTTP library from Node, so you'll need to include this patcher.
I recently wrote a sample app to be published, here is the snippet I used.
Hopefully this helps.
const xray = require('aws-xray-sdk-core');
const segmentUtils = xray.SegmentUtils;
let captureAxios = function(axios) {
//add a request interceptor on POST
axios.interceptors.request.use(function (config) {
var parent = xray.getSegment();
var subsegment = parent.addNewSubsegment(config.baseURL + config.url.substr(1));
subsegment.namespace = 'remote';
let root = parent.segment ? parent.segment : parent;
let header = 'Root=' + root.trace_id + ';Parent=' + subsegment.id + ';Sampled=' + (!root.notTraced ? '1' : '0');
config.headers.get={ 'x-amzn-trace-id': header };
config.headers.post={ 'x-amzn-trace-id': header };
xray.setSegment(subsegment);
return config;
}, function (error) {
var subsegment = xray.getSegment().addNewSubsegment("Intercept request error");
subsegment.close(error);
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
var subsegment = xray.getSegment();
const res = { statusCode: response.status, headers: response.headers };
subsegment.addRemoteRequestData(response.request, res, true);
subsegment.close();
return response;
}, function (error) {
var subsegment = xray.getSegment();
subsegment.close(error);
return Promise.reject(error);
});
};
module.exports = captureAxios;
Usage
Just pass in an initialized instance of Axios.
For React, you'll have to tell me a bit more about what your setup is, and what you're trying to accomplish. X-Ray only cares about the routes in your application - typically interceptors are setup on the routes to collect data and create (and close) the root segment (see the X-Ray SDK for Node Express here). For browser-based integration, we're still discussing possible options from the X-Ray end.