本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 檢測 Web 應用程式用戶端
<a name="scorekeep-client"></a>

**注意**  
X-Ray 開發套件/協助程式維護通知 – 在 2026 年 2 月 25 日， AWS X-Ray SDKs/協助程式將進入維護模式，其中 AWS 將限制 X-Ray 開發套件和協助程式版本，以僅解決安全問題。如需支援時間表的詳細資訊，請參閱 [X-Ray SDK 和協助程式支援時間表](xray-sdk-daemon-timeline.md)。建議您遷移至 OpenTelemetry。如需遷移至 OpenTelemetry 的詳細資訊，請參閱[從 X-Ray 檢測遷移至 OpenTelemetry 檢測](https://docs.aws.amazon.com/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 身分集區來取得臨時 AWS 登入資料，以便與 搭配使用 適用於 JavaScript 的 AWS SDK。

Identity Pool 是設定為可讓登入的使用者將追蹤資料寫入 AWS 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);
      }
    })
  }
```

您可在資源服務的標頭和 `transformResponse` 函數中呼叫這些方法，而 Web 應用程式會使用這些資源服務來呼叫 Scorekeep API。若要在與 API 產生的區段相同的追蹤中包含用戶端區段，Web 應用程式必須在 X-Ray SDK 可以讀取的[追蹤標頭](xray-concepts.md#xray-concepts-tracingheader) (`X-Amzn-Trace-Id`) 中包含追蹤 ID 和區段 ID。當經檢測的 Java 應用程式收到具有此標頭的請求時，適用於 Java 的 X-Ray 開發套件會使用相同的追蹤 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) – 記錄角度資源呼叫和寫入追蹤標頭的區段**  

```
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.aws.amazon.com/zh_tw/xray/latest/devguide/images/scorekeep-servicemap-client.png)


如果追蹤包括 Web 應用程式的區段，即會顯示使用者在瀏覽器中看到的 URL (路徑開頭為 `/#/`)。未使用用戶端檢測時，您只會取得 Web 應用程式呼叫之 API 資源的 URL (路徑開頭為 `/api/`)。

![\[\]](http://docs.aws.amazon.com/zh_tw/xray/latest/devguide/images/scorekeep-traces-client.png)