ブラウザエージェント

前提条件

エージェントのインストールに必要な前提条件の確認については、エージェントのインストールの前提条件の確認を参照してください。
SixthSense コレクターの URL/IP （カスタマーサポートから提供されるお客様のテナントURL）
SixthSense ポータルから取得したアクセストークン。トークンの取得については、アクセストークンの取得を参照してください。
カスタマーサポートから提供された PACKAGE_TOKEN

エージェントのダウンロード

プロジェクト依存関係に SixthSense エージェントをダウンロードしてください。 "@sixthsense/sixthsense-javascript-agent": "^3.7.3" （アプリケーションの package.json ファイルにこの依存関係を追加する）。

例：

"dependencies": {
  "async": "^1.5.2",
  "body-parser": "^1.15.1",
  "cookie-parser": "^1.4.3",
  "express": "^4.13.4",
  "express-session": "^1.13.0",
  "finalhandler": "^0.4.1",
  "request": "^2.72.0",
  "serve-static": "^1.10.2",
  "prom-client": "^6.3.0",
  "morgan": "^1.7.0",
  "connect-redis": "^3.2.0",
  "@sixthsense/sixthsense-javascript-agent": "^3.7.3”
}

エージェントの設定

エージェントの設定は、アプリケーションのエントリーポイントに追加されます。

ClientMonitor.register	ClientMonitor.setPerformance	About
service:	service:	アプリケーションの名前（どちらにも同じ名前を使用する必要があります）
collector:	collector:	（テナント URL 。オンボーディングチームから提供されます）
authorization:	authorization:	SixthSense ポータルから取得するアクセストークン

mains.ts ファイルを以下のように更新してください。

import ClientMonitor from "@sixthsense/sixthsense-javascript-agent";
 
ClientMonitor.register({
  service: "BM Client App", // Name the app
  collector: ' https://http-collector-observability.sixthsense.rakuten.com,
  pagePath:"index.html",
  serviceVersion: "1.2.1",
  enableSPA: true,
  useFmp: true,
  autoTracePerf: true,
  detailMode: true,
  enableDirectFetchPatching: false,
  environment: "production",
  authorization: "$SIXTHSENSE_TOKEN",
});
 
ClientMonitor.setPerformance({
  service: "BM Client App", 
  collector: 'https://http-collector-observability.sixthsense.rakuten.com',
  serviceVersion: "1.2.1",
  perfInterval: 1000,
  useFmp: true,
  authorization: "$SIXTHSENSE_TOKEN" 
 });

OneCloud プラットフォームの場合、以下のコマンドを使用してください：

import ClientMonitor from "@sixthsense/sixthsense-javascript-agent";

ClientMonitor.register({
 service: "BM Client App", // Name the app
  collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap ',

  // For connectivity to backend using onecloud private network: https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap
  
  // For connectivity to backend using intra public network: https://observability-backend-core.sixthsense.rakuten.com/oap

 pagePath:"index.html",
 serviceVersion: "1.2.1",
 enableSPA: true,
 useFmp: true,
 autoTracePerf: true,
 detailMode: true,
 enableDirectFetchPatching: false,
 environment: "production",
 authorization: "$SIXTHSENSE_TOKEN",
});

ClientMonitor.setPerformance({
 service: "BM Client App", 
 collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',
 serviceVersion: "1.2.1",
 perfInterval: 1000,
 useFmp: true,
 authorization: "$SIXTHSENSE_TOKEN" 
});

app.component.ts を更新してください。

constructor(private router: Router, private http: HttpClient) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        ClientMonitor.setPerformance({
    collector: 'https://http-collector-observability.sixthsense.rakuten.com',
          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        });
      }
    });
      }

OneCloud プラットフォームの場合、次のコマンドを使用してください：

constructor(private router: Router, private http: HttpClient) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        ClientMonitor.setPerformance({
    collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',

    // For connectivity to backend using onecloud private network: https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap
   
   // For connectivity to backend using intra public network: https://observability-backend-core.sixthsense.rakuten.com/oap

          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        });
      }
    });
      }

app.module.ts を更新してください。

グローバルエラーハンドラーを使用している場合にのみ追加してください。

export class AppGlobalErrorhandler implements ErrorHandler {
  handleError(error: any) {
    ClientMonitor.reportFrameErrors(
      {
    collector: 'https://http-collector-observability.sixthsense.rakuten.com',
          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        },
      error
    );
  }
}

OneCloud プラットフォームの場合、次のコマンドを使用してください：

export class AppGlobalErrorhandler implements ErrorHandler {
  handleError(error: any) {
    ClientMonitor.reportFrameErrors(
      {
    collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/',

    // For connectivity to backend using onecloud private network: https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap
   
   // For connectivity to backend using intra public network: https://observability-backend-core.sixthsense.rakuten.com/oap

          service: "BM Client App", // Name the app
          serviceVersion: “1.2.1”,
          pagePath: location.href,
          useFmp: true,
    authorization: "$SIXTHSENSE_TOKEN"
        },
      error
    );
  }
}

note

楽天は、コードベースにアクセストークンをハードコーディングすることを推奨していません。動的に設定するには、以下の方法を使用できます。

トークンを .env ファイルに SS_AUTH_TOKEN として追加し、 Webpack がバンドルを生成する際に環境変数からそれを取得するようにします。
コードベースで、実際のトークンをコードにハードコーディングする代わりに、 process.env.SS_AUTH_TOKEN を使用します。
.env に追加するのは、バンドルを構築している間であり、UI バンドルを構築した後ではないことを確認してください。
アクセストークンを取得します。アクセストークンの取得については、アクセストークンの取得を参照してください。
アクセストークンを token_from_ui に追加してください。

アプリケーションの実行

npm install コマンドを実行する前に、以下のコマンドを実行してください。

npm config set @sixthsense:registry https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/ && \
npm config set -- '//artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/:_authToken' "${PACKAGE_TOKEN}"

PACKAGE_TOKEN はカスタマーサポートから提供されます。
npm install コマンドを実行して、すべての依存関係をダウンロードします (npm i @sixthsense/sixthsense-javascript-agent) 。
start コマンドを実行して、アプリケーションを実行します。

Docker でのインストール

Docker へのエージェント統合については、エージェント構成の手順に従ってください。

Docker ファイルに依存関係のダウンロード設定を追加する

SixthSense エージェントは、楽天のセルフホスト型プライベートパッケージマネージャでホストされています。パッケージをダウンロードするには、認証のための追加手順が必要です。
npm install コマンドの前に、次のコードスニペットを Docker ファイルに追加します。

npm config set @sixthsense:registry https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/ && \
npm config set -- '//artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/:_authToken' "${PACKAGE_TOKEN}"

この設定により、SixthSense パッケージレジストリを識別するようになります。また、 package.json ファイルで同じ名前を定義した URL から依存関係をダウンロードするように指示します。
SixthSense パッケージマネージャーの URL - https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/
_authToken' "PACKAGE_TOKEN"– パッケージがプライベートパッケージマネージャーにホストされているため、ユーザーを識別するための認証が必要です。この認証トークンは、オンボーディング時に定義されます。
簡略化のため、認証トークンは Docker ファイルに配置されています。ただし、Docker ファイルに追加してバージョン管理リポジトリにプッシュしたくない場合は、環境変数を設定したり、Jenkins CI/CD からシークレットを渡したりするなど、認証管理に基づいてこの認証トークンを渡すことができます。
Docker ビルドでアプリケーションをビルドし、Docker イメージ/コンテナを実行します。エージェントがアプリケーションに統合され、SixSense ダッシュボードでメトリクスが表示されるようになります。

PACKAGE_TOKEN をビルド引数として渡します。

docker build --build-arg PACKAGE_TOKEN=${PACKAGE_TOKEN_VALUE} -t service:tag .

例： Docker 構成

FROM node:10-alpine
ENV NODE_ENV "production"
ENV PORT 8079
EXPOSE 8079
RUN addgroup mygroup && adduser -D -G mygroup myuser && mkdir -p /usr/src/app && chown -R myuser /usr/src/app
 
# アプリディレクトリの準備
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
COPY yarn.lock /usr/src/app/
RUN chown myuser /usr/src/app/yarn.lock
 
USER myuser
RUN mkdir sixthsense-logs
ARG PAT
RUN npm config set "@sixthsense:registry" https://artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/ && \
    npm config set -- '//artifacts-observability.sixthsense.rakuten.com/api/v4/projects/9/packages/npm/:_authToken' "${PAT}"
# RUN yarn add @sixthsense/sixthsense-javascript-agent
RUN yarn install
 
COPY . /usr/src/app
 
# アプリの起動
CMD ["/usr/local/bin/npm", "start"]

jQuery と HTML のバンドルを使用するには、以下の手順に従います。

bundle.js を resources/static フォルダにダウンロードします。
HTML ページのスクリプトタグにバンドルを追加します。

SixthSense のコードを追加します。

ClientMonitor.register({
  service: "Sprint 6",
  collector: 'https://http-collector-observability.sixthsense.rakuten.com ',
  pagePath: "index.html"
  serviceVersion: "1.2.1",
  enableSPA: true,
  useFmp: true,
  autoTracePerf: true,
  detailMode: true,
  environment: "testing",
  authorization: "$SIXTHSENSE_TOKEN"
});
ClientMonitor.setPerformance({
  service: "BM Client App",
  collector: 'https://http-collector-observability.sixthsense.rakuten.com',
  serviceVersion: "1.2.1",
  perfInterval: 1000,
  useFmp: true,
  authorization: "$SIXTHSENSE_TOKEN"
});

OneCloud Platform の場合は、次のコマンドを使用します:

ClientMonitor.register({
  service: "Sprint 6",
  collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',
  pagePath: "index.html"
  serviceVersion: "1.2.1",
  enableSPA: true,
  useFmp: true,
  autoTracePerf: true,
  detailMode: true,
  environment: "testing",
  authorization: "$SIXTHSENSE_TOKEN"
});
ClientMonitor.setPerformance({
  service: "BM Client App",
  collector: 'https://sixthsense-backend.jpe2-caas1-prod1.caas.jpe2b.r-local.net/oap/ ',
  serviceVersion: "1.2.1",
  perfInterval: 1000,
  useFmp: true,
  authorization: "$SIXTHSENSE_TOKEN"
});

#前提条件

#エージェントのダウンロード

#エージェントの設定