角度応用におけるOpenTelemmetryの実装

OpenTelemrationは、パフォーマンスの問題とバグの角度のアプリケーションをトレースするために使用することができます.OpenTelemrationは、テレメトリデータの生成と収集を標準化することを目的とするクラウドネイティブコンピューティング財団(CNCF)の下のオープンソースプロジェクトです.テレメトリデータは、ログ、メトリック、およびトレースを含みます.
角は、HTMLとTypesScriptを使用するフロントエンドJavaScriptフレームワークです.これは、フロントエンドアプリケーションの多くの組織によって使用される人気のフレームワークです.ユーザーのために、フロントエンドはユーザーの最初のインタラクションポイントです、そして、あなたの角度アプリが完全なユーザー経験を提供することを確実とすることは、必要です.
Repository of Angular library to deploy OpenTelemetry in Angular application
OpenTelemRoom角ライブラリを使用して、あなたの角度のアプリをあなたのアングルアプリから下流のサービスにトレースを生成する楽器をすることができます.
OpentElementLibraryライブラリを実装する方法を示す前に、OpenTelmetryの簡単な概観を行いましょう.

OpenTelemrationは何ですか？

OpenTelemetryは、テレメトリデータ(ログ、メトリック、およびトレース)を作成して、管理するために器具をアプリケーションに使うのに用いられるツール、API、およびSDKのオープンソースのベンダー不可知論者です.それは、クラウドネイティブのソフトウェアアプリケーションの組み込み機能を遠隔測定データ(ログ、メトリック、およびトレース)を作成することを目指しています.
テレメトリデータは、ストレージおよび可視化のための可観測性ツールに送られる.
次に、ストレージと可視化のための観測可能性ツールに送られるテレメトリデータを生成するために
OpenTelemrationは、観測可能性のフレームワークを設定するための基盤です.また、あなたの選択のバックエンド分析ツールを選択する自由を提供します.

オプトメントメトリーとSignoz

この記事では、我々のバックエンド解析ツールとして を使用します.SignozはOpenTemmeRemoteで収集したテレメトリデータを保存し、可視化するために使用することができる完全なオープンソースのAPMツールです.これはOpentElementalにネイティブに構築され、OTLPデータ形式をサポートしています.
Signozは、エンドユーザーのためのクエリと可視化機能を提供し、アプリケーションのメトリクスとトレースのためのボックスのグラフの付属しています.
では、OpenTementAtangleアングルライブラリを実装し、収集したデータをSignozで可視化する方法について説明しましょう.

シグニッツ OpenTelemrationによる角度アプリケーションの実行

ステップ1 : SIGNOZをインストールする
Fristでは、OpenTelemrationがデータを送信できるようにSIGNOZをインストールする必要があります.
SignozはMacOSまたはLinuxコンピュータにインストールすることができます.
インストールスクリプトはDockerエンジンをLinuxで自動的にインストールします.しかしMacOSでは、インストールスクリプトを実行する前に手動で をインストールする必要があります.

git clone -b main https://github.com/SigNoz/signoz.git
cd signoz/deploy/
./install.sh

Docker SwarmとHelm Chartを使用してSignozをインストールする方法については、ドキュメントを参照できます.
Docker Engine
SIGNOZをインストールしたら、242479152
Signozダッシュボード-アプリケーションでバンドルされているサンプルアプリケーションからサービスを示します
ステップ2:サンプル角度アプリを取得
我々は手で例を示すために2つのサンプルGithub

http://localhost:3301
それは、我々が計器するサンプルBoilerplateコードを含みます.あなたがチュートリアルにしたがっているならば、あなたはwithout instrumentation支店に従うべきです.

これは、我々が呼び出すことが基本的なバックエンドAPIが含まれます.バックエンドAPIはまた、エンドツーエンドのトレースを持つOpenTelemrationで計装されています.

ステップ3:Otel受信機のCORSを有効にする
Otel受信機の中でCorsを可能にしてください.Signozフォルダの下で、otel-collector-config.yamlファイルを開きます.ファイルはdeploy/docker/clickhouse-setup/otel-collector-config.yamlにあります
ファイルはSample Angular Appで表示できます.ファイルの中に次のコードを追加します.

http:
+        cors:
+          allowed_origins:
+            - https://netflix.com  # URL of your Frontend application

フロントエンドアプリケーションのURLを更新する必要があります.このチュートリアルでは、http://localhost:4200でフロントエンドアプリケーションを実行します.

<img alt="">

CORSを可能にするSample Nodejs App
変更を行うと、Dockerコンテナを再起動する必要があります.
ステップ4:OpenTelemrationと楽器角度アプリ
OpentElementXで角度のアプリを計器するには、OpenTementRendering依存関係をインストールする必要があります.

npm i @jufab/opentelemetry-angular-interceptor && npm i @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/sdk-trace-base @opentelemetry/core @opentelemetry/semantic-conventions @opentelemetry/resources @opentelemetry/exporter-trace-otlp-http @opentelemetry/exporter-zipkin @opentelemetry/propagator-b3 @opentelemetry/propagator-jaeger @opentelemetry/context-zone-peer-dep @opentelemetry/instrumentation @opentelemetry/instrumentation-document-load @opentelemetry/instrumentation-fetch @opentelemetry/instrumentation-xml-http-request @opentelemetry/propagator-aws-xray --save-dev

ステップ5:更新プログラム

import {
  OpenTelemetryInterceptorModule,
  OtelColExporterModule,
  CompositePropagatorModule,
} from '@jufab/opentelemetry-angular-interceptor';

@NgModule({
  ...
  imports: [
    ...
    OpenTelemetryInterceptorModule.forRoot({
      commonConfig: {
        console: true, // Display trace on console (only in DEV env)
        production: false, // Send Trace with BatchSpanProcessor (true) or SimpleSpanProcessor (false)
        serviceName: 'Angular Sample App', // Service name send in trace
        probabilitySampler: '1',
      },
      otelcolConfig: {
        url: 'http://127.0.0.1:4318/v1/traces', // URL of opentelemetry collector
      },
    }),
    //Insert OtelCol exporter module
    OtelColExporterModule,
    //Insert propagator module
    CompositePropagatorModule,
  ],
  ...
})

app.module.tsの下でOpenTelemrationコレクターのURLを更新してください.ローカルでsignozを実行しているので、URLはotelcolConfigです.
サービスの名前、およびhttp://127.0.0.1:4318/v1/tracesの下で他の設定を変更できます.
ステップ6:角度アプリとバックエンドAPIを起動します
角度アプリケーションの場合:
アングルアプリケーションのルートフォルダに移動し、次のコマンドを実行します.

yarn start

バックエンドAPI
依存関係をインストールする

yarn install

SIGNOZがローカルにインストールされている場合、バックエンドAPIを使用します.

yarn run start:local

signozがローカルにインストールされていなければ、signozがインストールされているマシンのIPアドレスを設定する必要があります.以下のコマンドを使用して行うことができます.

OTEL_EXPORTER_OTLP_ENDPOINT="<IP of SigNoz>:4317" OTEL_RESOURCE_ATTRIBUTES=service.name=NAME_OF_SERVICE yarn run start:custom```

おめでとう!あなたは正常にOpenTelemrationを使用して角度アプリケーションを実行している.収集したデータを見る時間です.
ステップ7 :データを生成する
Signozを使用して角度アプリケーションを監視するには、まずいくつかのデータを生成する必要があります.
あなたのフロントエンドアプリケーションにアクセスするSigNoz GitHub repoをご覧ください.UIを使用してバックエンドAPIへの呼び出しを行います.あなたのブラウザのネットワークタブを確認して、あなたが行ったリクエストを確認できます.
アングルフロントエンドウェブ
ステップ8 :アプリケーションを監視します
Signozを使用すると、サンプルの角度のアプリケーションからOpenTelemrationによって収集されたデータを監視することができます.あなたの角度のアプリケーションのためのエンドツーエンドのトレースを見ることができます.
あなたの角のアプリケーションから下流のサービスへのエンドツーエンドの跡を見てください
また、角度のアプリケーションで発生するエラーを監視することができます.SIGNZ UIにもcommonConfigのような属性が表示されます.
http://localhost:4200/フロントエンド角アプリケーションのエラーを監視する

結論

OpenTelemRoom角ライブラリを使用すると、エンドツーエンドのトレースのためのフロントエンドアプリケーションを計ることができます.その後、あなたの角度のアプリのスムーズなパフォーマンスを確保するためにSignozのようなオープンソースのAPMツールを使用することができます.
OpenTelemrationはクラウドネイティブアプリの可観測性を設定するための将来です.それは巨大なコミュニティに支えられて、テクノロジーとフレームワークの多種多様をカバーします.OpenTelemrationを使用して、エンジニアリングチームは心の平和とポリグロットや分散アプリケーションを計ることができます.
SIGNZはSaaSのような経験が付属しているオープンソースの可観測性ツールです.あなたはGigthubレポを訪問してSignozを試してみることができます👇

あなたがビデオからより多くを理解する誰かであるならば、あなたは我々のビデオチュートリアルをOpentElemental角ライブラリを実装して、Signozでアプリケーションをモニターする方法について見ることができます.
あなたがSignozを試している間、どんな問題にでも直面するならば、あなたは👇

更なる読書