

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 检测 Web 应用程序客户端
检测 Web 客户端

**注意**  
X-Ray SDK/Daemon 维护通知 — 2026 年 2 月 25 日， Amazon X-Ray SDKs/Daemon 将进入维护模式，在该模式下，X-Ray SDK 和 Daemon 的发布 Amazon 将仅限于解决安全问题。有关支持时间表的更多信息，请参阅 [X-Ray SDK 和 Daemon Support 时间表](xray-sdk-daemon-timeline.md)。我们建议迁移到 OpenTelemetry。有关迁移到的更多信息 OpenTelemetry，请参阅[从 X-Ray 仪器迁移到 OpenTelemetry 仪器](https://docs.amazonaws.cn/xray/latest/devguide/xray-sdk-migration.html)。

在 [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito) 分支中，Scorekeep 使用 Amazon Cognito 使用户能够创建账户并使用该账户登录，以便从 Amazon Cognito 用户池中检索各自的用户信息。当用户登录时，Scorekeep 会使用 Amazon Cognito 身份池来获取用于的 Amazon 临时证书。 适用于 JavaScript 的 Amazon SDK

身份池配置为允许已登录用户将跟踪数据写入到 Amazon X-Ray。Web 应用程序使用这些凭证来记录已登录用户的 ID、浏览器路径以及从客户端角度对 Scorekeep API 的调用。

大多数工作在名为 `xray` 的服务类中完成。此服务类提供了方法来生成必需的标识符、创建进行中的分段，对分段进行最终处理以及将分段文档发送给 X-Ray API。

**Example [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/xray.js](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/xray.js) - 记录和上传分段**  

```
...
  service.beginSegment = function() {
    var segment = {};
    var traceId = '1-' + service.getHexTime() + '-' + service.getHexId(24);

    var id = service.getHexId(16);
    var startTime = service.getEpochTime();

    segment.trace_id = traceId;
    segment.id = id;
    segment.start_time = startTime;
    segment.name = 'Scorekeep-client';
    segment.in_progress = true;
    segment.user =  sessionStorage['userid'];
    segment.http = {
      request: {
        url: window.location.href
      }
    };

    var documents = [];
    documents[0] = JSON.stringify(segment);
    service.putDocuments(documents);
    return segment;
  }

  service.endSegment = function(segment) {
    var endTime = service.getEpochTime();
    segment.end_time = endTime;
    segment.in_progress = false;
    var documents = [];
    documents[0] = JSON.stringify(segment);
    service.putDocuments(documents);
  }

  service.putDocuments = function(documents) {
    var xray = new AWS.XRay();
    var params = {
      TraceSegmentDocuments: documents
    };
    xray.putTraceSegments(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        console.log(data);
      }
    })
  }
```

这些方法在 Web 应用程序用来调用 Scorekeep API 的资源服务的标头和 `transformResponse` 函数中调用。要将客户端分段与 API 生成的分段包括在同一跟踪中，Web 应用程序必须在 X-Ray SDK 可读取的[跟踪标头](xray-concepts.md#xray-concepts-tracingheader)（`X-Amzn-Trace-Id`）中包含跟踪 ID 和分段 ID。当检测的 Java 应用程序收到包含此标头的请求时，X-Ray SDK for Java 使用相同的跟踪 ID，并使来自 Web 应用程序客户端的分段成为其分段的父分段。

**Example [https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/services.js](https://github.com/awslabs/eb-java-scorekeep/tree/xray-cognito/public/app/services.js) - 记录 Angular 资源调用分段和编写跟踪标头**  

```
var module = angular.module('scorekeep');
module.factory('SessionService', function($resource, api, XRay) {
  return $resource(api + 'session/:id', { id: '@_id' }, {
    segment: {},
    get: {
      method: 'GET',
      headers: {
        'X-Amzn-Trace-Id': function(config) {
          segment = XRay.beginSegment();
          return XRay.getTraceHeader(segment);
        }
      },
      transformResponse: function(data) {
        XRay.endSegment(segment);
        return angular.fromJson(data);
      },
    },
...
```

生成的跟踪地图包含 Web 应用程序客户端的节点。

![\[\]](http://docs.amazonaws.cn/xray/latest/devguide/images/scorekeep-servicemap-client.png)


包含来自 Web 应用程序的分段的跟踪显示用户在浏览器中可见的 URL（以 `/#/` 开头的路径）。如果没有客户端检测，您只会获取 Web 应用程序调用的 API 资源的 URL（以 `/api/` 开头的路径）。

![\[\]](http://docs.amazonaws.cn/xray/latest/devguide/images/scorekeep-traces-client.png)
