aws-xray - 如何使用 aws xray 检测 React Web 应用程序客户端

Question

我正在尝试使用https://docs.aws.amazon.com/xray/latest/devguide/scorekeep-client.html检测我的 React Web App

我正在使用 axios 拦截器，但无法检测任何进一步的想法？

Answer 1

这是 X-Ray 所需的 axois 拦截器代码。Axios 不使用 Node 的基本 HTTP 库，因此您需要包含此修补程序。

我最近编写了一个要发布的示例应用程序，这是我使用的代码段。希望这会有所帮助。

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;

用法

Just pass in an initialized instance of Axios.

对于 React，你必须告诉我更多关于你的设置是什么，以及你想要完成什么。X-Ray 只关心应用程序中的路由 - 通常在路由上设置拦截器以收集数据并创建（和关闭）根段（请参阅此处的 X-Ray SDK for Node Express）。对于基于浏览器的集成，我们仍在讨论 X-Ray 端的可能选项。