diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..dd8e67b2d6 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-instrumentApplication.md @@ -0,0 +1,92 @@ + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + 'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}', + }, + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` +  + +### Step 4: Dockerize your application +Update your Dockerfile as: + +```dockerfile +... +# Run the app with the required OpenTelemetry configuration. app.js is your application main file. +CMD ["ng", "serve"] +... +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-runApplication.md new file mode 100644 index 0000000000..20bb7912f0 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-runApplication.md @@ -0,0 +1,23 @@ +Once you update your Dockerfile, you can build and run it using the commands below. + +  + +### Step 1: Build your dockerfile + +Build your docker image + +```bash +docker build -t . +``` + +- `` is the name of your Docker Image + +  + +### Step 2: Run your docker image + +```bash +docker run +``` + +  diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-installOtelCollector.md new file mode 100644 index 0000000000..c658ff6fad --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-installOtelCollector.md @@ -0,0 +1,28 @@ +## Setup OpenTelemetry Binary as an agent + +  + +As a first step, you should install the OTel collector Binary according to the instructions provided on [this link](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/). + +  + +While creating the `config.yaml` during the installation fo the OTel Collector Binary, you need to enable CORS under the receivers section so that you don't get CORS error while sending your Traces to SigNoz Cloud. See the code snippet below to understand how you can enable CORS in your config file: + +```yaml + + http: ++ cors: ++ allowed_origins: ++ - # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc. + +``` + +`` - URL where your frontend application is running. For Example, `http://localhost:4200` or `https://netflix.com` etc. + +**NOTE:** Make sure to restart your collector after making the config changes + + +Once you are done setting up the OTel collector binary and enabling CORS, you can follow the next steps. + +  + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-instrumentApplication.md new file mode 100644 index 0000000000..6b2da27c0c --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-instrumentApplication.md @@ -0,0 +1,93 @@ +After setting up the Otel collector agent, follow the steps below to instrument your Angular Application + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); + +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` + +  + +### Step 4: Dockerize your application + +Update your Dockerfile as: + +```dockerfile +... +# Run the app with the required OpenTelemetry configuration. app.js is your application main file. +CMD ["ng", "serve"] +... +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-runApplication.md new file mode 100644 index 0000000000..20bb7912f0 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-runApplication.md @@ -0,0 +1,23 @@ +Once you update your Dockerfile, you can build and run it using the commands below. + +  + +### Step 1: Build your dockerfile + +Build your docker image + +```bash +docker build -t . +``` + +- `` is the name of your Docker Image + +  + +### Step 2: Run your docker image + +```bash +docker run +``` + +  diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-installOtelCollector.md new file mode 100644 index 0000000000..946b7fbdbf --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-installOtelCollector.md @@ -0,0 +1,24 @@ +## Install otel-collector in your Kubernetes infra +  + +Add the SigNoz Helm Chart repository +```bash +helm repo add signoz https://charts.signoz.io +``` +  + +If the chart is already present, update the chart to the latest using: +```bash +helm repo update +``` +  + +Install the Kubernetes Infrastructure chart provided by SigNoz +```bash +helm install my-release signoz/k8s-infra \ +--set otelCollectorEndpoint=ingest.{{REGION}}.signoz.cloud:443 \ +--set otelInsecure=false \ +--set signozApiKey={{SIGNOZ_INGESTION_KEY}} \ +--set global.clusterName= +``` +- Replace `` with the name of the Kubernetes cluster or a unique identifier of the cluster. diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-instrumentApplication.md new file mode 100644 index 0000000000..57981306f6 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-instrumentApplication.md @@ -0,0 +1,83 @@ +  + +After setting up the Otel collector agent, follow the steps below to instrument your Angular Application + + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-runApplication.md new file mode 100644 index 0000000000..67485f38f6 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-runApplication.md @@ -0,0 +1,11 @@ +  + +Once you are done intrumenting your Angular application, you can run it using the below command + +```bash +ng serve +``` + +  + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..afcce86e7c --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-instrumentApplication.md @@ -0,0 +1,80 @@ +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + 'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}', + }, + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-runApplication.md new file mode 100644 index 0000000000..ad99353b32 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-runApplication.md @@ -0,0 +1,9 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below command + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..041269103a --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-installOtelCollector.md @@ -0,0 +1,103 @@ +## Setup OpenTelemetry Binary as an agent +  + +### Step 1: Download otel-collector tar.gz +```bash +wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_linux_amd64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_linux_amd64.tar.gz -C otelcol-contrib +``` +  + +### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it +```bash +receivers: + otlp: + protocols: + grpc: + endpoint: 0.0.0.0:4317 + http: + endpoint: 0.0.0.0:4318 + cors: + allowed_origins: + - # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc. + hostmetrics: + collection_interval: 60s + scrapers: + cpu: {} + disk: {} + load: {} + filesystem: {} + memory: {} + network: {} + paging: {} + process: + mute_process_name_error: true + mute_process_exe_error: true + mute_process_io_error: true + processes: {} + prometheus: + config: + global: + scrape_interval: 60s + scrape_configs: + - job_name: otel-collector-binary + static_configs: + - targets: + # - localhost:8888 +processors: + batch: + send_batch_size: 1000 + timeout: 10s + # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md + resourcedetection: + detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure. + # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels. + timeout: 2s + system: + hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback +extensions: + health_check: {} + zpages: {} +exporters: + otlp: + endpoint: "ingest.{{REGION}}.signoz.cloud:443" + tls: + insecure: false + headers: + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}" + logging: + verbosity: normal +service: + telemetry: + metrics: + address: 0.0.0.0:8888 + extensions: [health_check, zpages] + pipelines: + metrics: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + metrics/internal: + receivers: [prometheus, hostmetrics] + processors: [resourcedetection, batch] + exporters: [otlp] + traces: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + logs: + receivers: [otlp] + processors: [batch] + exporters: [otlp] +``` + +  + +`` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc. + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..4422320521 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-instrumentApplication.md @@ -0,0 +1,79 @@ +After setting up the Otel collector agent, follow the steps below to instrument your Angular Application. + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-runApplication.md new file mode 100644 index 0000000000..cc1b8bbfe6 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-runApplication.md @@ -0,0 +1,31 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below commands +  + +### Step 1: Run OTel Collector + Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step + +```bash +./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid +``` +  + +#### (Optional Step): View last 50 lines of `otelcol` logs +```bash +tail -f -n 50 otelcol-output.log +``` + +#### (Optional Step): Stop `otelcol` +```bash +kill "$(< otel-pid)" +``` +  + +### Step 2: Run your application + +```bash +ng serve +``` + +  diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..afcce86e7c --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-instrumentApplication.md @@ -0,0 +1,80 @@ +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + 'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}', + }, + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-runApplication.md new file mode 100644 index 0000000000..ad99353b32 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-runApplication.md @@ -0,0 +1,9 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below command + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..effb094996 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-installOtelCollector.md @@ -0,0 +1,101 @@ +## Setup OpenTelemetry Binary as an agent +  + +### Step 1: Download otel-collector tar.gz +```bash +wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_linux_arm64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_linux_arm64.tar.gz -C otelcol-contrib +``` +  + +### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it +```bash +receivers: + otlp: + protocols: + grpc: + endpoint: 0.0.0.0:4317 + http: + endpoint: 0.0.0.0:4318 + cors: + allowed_origins: + - # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc. + hostmetrics: + collection_interval: 60s + scrapers: + cpu: {} + disk: {} + load: {} + filesystem: {} + memory: {} + network: {} + paging: {} + process: + mute_process_name_error: true + mute_process_exe_error: true + mute_process_io_error: true + processes: {} + prometheus: + config: + global: + scrape_interval: 60s + scrape_configs: + - job_name: otel-collector-binary + static_configs: + - targets: + # - localhost:8888 +processors: + batch: + send_batch_size: 1000 + timeout: 10s + # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md + resourcedetection: + detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure. + # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels. + timeout: 2s + system: + hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback +extensions: + health_check: {} + zpages: {} +exporters: + otlp: + endpoint: "ingest.{{REGION}}.signoz.cloud:443" + tls: + insecure: false + headers: + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}" + logging: + verbosity: normal +service: + telemetry: + metrics: + address: 0.0.0.0:8888 + extensions: [health_check, zpages] + pipelines: + metrics: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + metrics/internal: + receivers: [prometheus, hostmetrics] + processors: [resourcedetection, batch] + exporters: [otlp] + traces: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + logs: + receivers: [otlp] + processors: [batch] + exporters: [otlp] +``` + +  + +`` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc. \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..4422320521 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-instrumentApplication.md @@ -0,0 +1,79 @@ +After setting up the Otel collector agent, follow the steps below to instrument your Angular Application. + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-runApplication.md new file mode 100644 index 0000000000..ca09b64c70 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-runApplication.md @@ -0,0 +1,31 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below commands +  + +### Step 1: Run OTel Collector + Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step + +```bash +./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid +``` +  + +#### (Optional Step): View last 50 lines of `otelcol` logs +```bash +tail -f -n 50 otelcol-output.log +``` + +#### (Optional Step): Stop `otelcol` +```bash +kill "$(< otel-pid)" +``` +  + +### Step 2: Run your application + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..afcce86e7c --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-instrumentApplication.md @@ -0,0 +1,80 @@ +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + 'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}', + }, + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-runApplication.md new file mode 100644 index 0000000000..ad99353b32 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-runApplication.md @@ -0,0 +1,9 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below command + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..a0e95bd01f --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-installOtelCollector.md @@ -0,0 +1,101 @@ +### Setup OpenTelemetry Binary as an agent +  + +### Step 1: Download otel-collector tar.gz +```bash +wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_darwin_amd64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_darwin_amd64.tar.gz -C otelcol-contrib +``` +  + +### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it +```bash +receivers: + otlp: + protocols: + grpc: + endpoint: 0.0.0.0:4317 + http: + endpoint: 0.0.0.0:4318 + cors: + allowed_origins: + - # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc. + hostmetrics: + collection_interval: 60s + scrapers: + cpu: {} + disk: {} + load: {} + filesystem: {} + memory: {} + network: {} + paging: {} + process: + mute_process_name_error: true + mute_process_exe_error: true + mute_process_io_error: true + processes: {} + prometheus: + config: + global: + scrape_interval: 60s + scrape_configs: + - job_name: otel-collector-binary + static_configs: + - targets: + # - localhost:8888 +processors: + batch: + send_batch_size: 1000 + timeout: 10s + # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md + resourcedetection: + detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure. + # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels. + timeout: 2s + system: + hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback +extensions: + health_check: {} + zpages: {} +exporters: + otlp: + endpoint: "ingest.{{REGION}}.signoz.cloud:443" + tls: + insecure: false + headers: + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}" + logging: + verbosity: normal +service: + telemetry: + metrics: + address: 0.0.0.0:8888 + extensions: [health_check, zpages] + pipelines: + metrics: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + metrics/internal: + receivers: [prometheus, hostmetrics] + processors: [resourcedetection, batch] + exporters: [otlp] + traces: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + logs: + receivers: [otlp] + processors: [batch] + exporters: [otlp] +``` + +  + +`` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc. \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..4422320521 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-instrumentApplication.md @@ -0,0 +1,79 @@ +After setting up the Otel collector agent, follow the steps below to instrument your Angular Application. + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-runApplication.md new file mode 100644 index 0000000000..ca09b64c70 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-runApplication.md @@ -0,0 +1,31 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below commands +  + +### Step 1: Run OTel Collector + Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step + +```bash +./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid +``` +  + +#### (Optional Step): View last 50 lines of `otelcol` logs +```bash +tail -f -n 50 otelcol-output.log +``` + +#### (Optional Step): Stop `otelcol` +```bash +kill "$(< otel-pid)" +``` +  + +### Step 2: Run your application + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..afcce86e7c --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-instrumentApplication.md @@ -0,0 +1,80 @@ +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + 'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}', + }, + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-runApplication.md new file mode 100644 index 0000000000..ad99353b32 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-runApplication.md @@ -0,0 +1,9 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below command + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..53322a3e32 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-installOtelCollector.md @@ -0,0 +1,101 @@ +## Setup OpenTelemetry Binary as an agent +  + +### Step 1: Download otel-collector tar.gz +```bash +wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_darwin_arm64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_darwin_arm64.tar.gz -C otelcol-contrib +``` +  + +### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it +```bash +receivers: + otlp: + protocols: + grpc: + endpoint: 0.0.0.0:4317 + http: + endpoint: 0.0.0.0:4318 + cors: + allowed_origins: + - # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc. + hostmetrics: + collection_interval: 60s + scrapers: + cpu: {} + disk: {} + load: {} + filesystem: {} + memory: {} + network: {} + paging: {} + process: + mute_process_name_error: true + mute_process_exe_error: true + mute_process_io_error: true + processes: {} + prometheus: + config: + global: + scrape_interval: 60s + scrape_configs: + - job_name: otel-collector-binary + static_configs: + - targets: + # - localhost:8888 +processors: + batch: + send_batch_size: 1000 + timeout: 10s + # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md + resourcedetection: + detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure. + # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels. + timeout: 2s + system: + hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback +extensions: + health_check: {} + zpages: {} +exporters: + otlp: + endpoint: "ingest.{{REGION}}.signoz.cloud:443" + tls: + insecure: false + headers: + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}" + logging: + verbosity: normal +service: + telemetry: + metrics: + address: 0.0.0.0:8888 + extensions: [health_check, zpages] + pipelines: + metrics: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + metrics/internal: + receivers: [prometheus, hostmetrics] + processors: [resourcedetection, batch] + exporters: [otlp] + traces: + receivers: [otlp] + processors: [batch] + exporters: [otlp] + logs: + receivers: [otlp] + processors: [batch] + exporters: [otlp] +``` + +  + +`` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc. diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..4422320521 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-instrumentApplication.md @@ -0,0 +1,79 @@ +After setting up the Otel collector agent, follow the steps below to instrument your Angular Application. + +  + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/sdk-trace-web@^1.21.0 +npm install --save @opentelemetry/instrumentation@^0.48.0 +npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0 +npm install --save @opentelemetry/resources@^1.21.0 +npm install --save @opentelemetry/propagator-b3@^1.21.0 +npm install --save @opentelemetry/semantic-conventions@^1.21.0 +``` +  + +### Step 2: Create instrument.ts file + +```ts +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { + WebTracerProvider, + ConsoleSpanExporter, + SimpleSpanProcessor, + BatchSpanProcessor, +} from '@opentelemetry/sdk-trace-web'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { Resource } from '@opentelemetry/resources'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; + +const resource = Resource.default().merge( + new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}', + [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0', + }) +); + +const provider = new WebTracerProvider({ resource }); + +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); + +provider.addSpanProcessor( + new BatchSpanProcessor( + new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', + }) + ) +); + +provider.register({ + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + '@opentelemetry/instrumentation-document-load': {}, + '@opentelemetry/instrumentation-user-interaction': {}, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: /.+/, + }, + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: /.+/, + }, + }), + ], +}); +``` + +  + +### Step 3: Add the below import to your `main.ts` file. + +```ts +import './app/instrument'; +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-runApplication.md new file mode 100644 index 0000000000..ca09b64c70 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-runApplication.md @@ -0,0 +1,31 @@ +  + +Once you are done instrumenting your Angular application, you can run it using the below commands +  + +### Step 1: Run OTel Collector + Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step + +```bash +./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid +``` +  + +#### (Optional Step): View last 50 lines of `otelcol` logs +```bash +tail -f -n 50 otelcol-output.log +``` + +#### (Optional Step): Stop `otelcol` +```bash +kill "$(< otel-pid)" +``` +  + +### Step 2: Run your application + +```bash +ng serve +``` + +  \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts b/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts index f88f39518f..c0be1d4581 100644 --- a/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts +++ b/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts @@ -285,6 +285,45 @@ import APM_java_tomcat_macOsARM64_quickStart_runApplication from '../Modules/APM import APM_java_tomcat_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Java/md-docs/Tomcat/MacOsARM64/Recommended/tomcat-macosarm64-recommended-installOtelCollector.md'; import APM_java_tomcat_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Java/md-docs/Tomcat/MacOsARM64/Recommended/tomcat-macosarm64-recommended-instrumentApplication.md'; import APM_java_tomcat_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Java/md-docs/Tomcat/MacOsARM64/Recommended/tomcat-macosarm64-recommended-runApplication.md'; +// Angular +import APM_javascript_angular_docker_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-instrumentApplication.md'; +import APM_javascript_angular_docker_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-runApplication.md'; +// Angular-Docker-recommended +import APM_javascript_angular_docker_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-installOtelCollector.md'; +import APM_javascript_angular_docker_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-instrumentApplication.md'; +import APM_javascript_angular_docker_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-runApplication.md'; +// Angular-Kubernetes +import APM_javascript_angular_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-installOtelCollector.md'; +import APM_javascript_angular_kubernetes_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-instrumentApplication.md'; +import APM_javascript_angular_kubernetes_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-runApplication.md'; +// Angular-LinuxAMD64-quickstart +import APM_javascript_angular_linuxAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-instrumentApplication.md'; +import APM_javascript_angular_linuxAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-runApplication.md'; +// Angular-LinuxAMD64-recommended +import APM_javascript_angular_linuxAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-installOtelCollector.md'; +import APM_javascript_angular_linuxAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-instrumentApplication.md'; +import APM_javascript_angular_linuxAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-runApplication.md'; +// Angular-LinuxARM64-quickstart +import APM_javascript_angular_linuxARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-instrumentApplication.md'; +import APM_javascript_angular_linuxARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-runApplication.md'; +// Angular-LinuxARM64-recommended +import APM_javascript_angular_linuxARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-installOtelCollector.md'; +import APM_javascript_angular_linuxARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-instrumentApplication.md'; +import APM_javascript_angular_linuxARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-runApplication.md'; +// Angular-MacOsAMD64-quickstart +import APM_javascript_angular_macOsAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-instrumentApplication.md'; +import APM_javascript_angular_macOsAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-runApplication.md'; +// Angular-MacOsAMD64-recommended +import APM_javascript_angular_macOsAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-installOtelCollector.md'; +import APM_javascript_angular_macOsAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-instrumentApplication.md'; +import APM_javascript_angular_macOsAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-runApplication.md'; +// Angular-MacOsARM64-quickstart +import APM_javascript_angular_macOsARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-instrumentApplication.md'; +import APM_javascript_angular_macOsARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-runApplication.md'; +// Angular-MacOsARM64-recommended +import APM_javascript_angular_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-installOtelCollector.md'; +import APM_javascript_angular_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-instrumentApplication.md'; +import APM_javascript_angular_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-runApplication.md'; // ---------------------------------------------------------------------------- /// ////// Python Done /// ///// JavaScript Start @@ -490,6 +529,7 @@ import APM_javascript_reactjs_macOsARM64_quickStart_runApplication from '../Modu import APM_javascript_reactjs_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md'; import APM_javascript_reactjs_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md'; import APM_javascript_reactjs_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md'; +// ---------------------------------------------------------------------------- // PHP Docker import APM_php_docker_quickStart_instrumentApplication from '../Modules/APM/Php/md-docs/Docker/QuickStart/php-docker-quickStart-instrumentApplication.md'; import APM_php_docker_quickStart_runApplication from '../Modules/APM/Php/md-docs/Docker/QuickStart/php-docker-quickStart-runApplication.md'; @@ -1445,6 +1485,51 @@ export const ApmDocFilePaths = { APM_javascript_reactjs_macOsARM64_recommendedSteps_instrumentApplication, APM_javascript_reactjs_macOsARM64_recommendedSteps_runApplication, + /// ------- + + // Angular-Kubernetes + APM_javascript_angular_kubernetes_recommendedSteps_setupOtelCollector, + APM_javascript_angular_kubernetes_recommendedSteps_instrumentApplication, + APM_javascript_angular_kubernetes_recommendedSteps_runApplication, + + // Angular-LinuxAMD64-recommended + APM_javascript_angular_linuxAMD64_recommendedSteps_setupOtelCollector, + APM_javascript_angular_linuxAMD64_recommendedSteps_instrumentApplication, + APM_javascript_angular_linuxAMD64_recommendedSteps_runApplication, + + // Angular-LinuxAMD64-quickstart + APM_javascript_angular_linuxAMD64_quickStart_instrumentApplication, + APM_javascript_angular_linuxAMD64_quickStart_runApplication, + + // Angular-LinuxARM64-recommended + APM_javascript_angular_linuxARM64_recommendedSteps_setupOtelCollector, + APM_javascript_angular_linuxARM64_recommendedSteps_instrumentApplication, + APM_javascript_angular_linuxARM64_recommendedSteps_runApplication, + + // Angular-LinuxARM64-quickstart + APM_javascript_angular_linuxARM64_quickStart_instrumentApplication, + APM_javascript_angular_linuxARM64_quickStart_runApplication, + + // Angular-MacOsAMD64-recommended + APM_javascript_angular_macOsAMD64_recommendedSteps_setupOtelCollector, + APM_javascript_angular_macOsAMD64_recommendedSteps_instrumentApplication, + APM_javascript_angular_macOsAMD64_recommendedSteps_runApplication, + + // Angular-MacOsAMD64-quickstart + APM_javascript_angular_macOsAMD64_quickStart_instrumentApplication, + APM_javascript_angular_macOsAMD64_quickStart_runApplication, + + // Angular-MacOsARM64-recommended + APM_javascript_angular_macOsARM64_recommendedSteps_setupOtelCollector, + APM_javascript_angular_macOsARM64_recommendedSteps_instrumentApplication, + APM_javascript_angular_macOsARM64_recommendedSteps_runApplication, + + // Angular-MacOsARM64-quickstart + APM_javascript_angular_macOsARM64_quickStart_instrumentApplication, + APM_javascript_angular_macOsARM64_quickStart_runApplication, + + ///-------------------- + /// // JavaScript Others APM_javascript_others_kubernetes_recommendedSteps_setupOtelCollector, @@ -1824,6 +1909,13 @@ export const ApmDocFilePaths = { APM_javascript_reactjs_docker_recommendedSteps_instrumentApplication, APM_javascript_reactjs_docker_recommendedSteps_runApplication, + APM_javascript_angular_docker_quickStart_instrumentApplication, + APM_javascript_angular_docker_quickStart_runApplication, + + APM_javascript_angular_docker_recommendedSteps_setupOtelCollector, + APM_javascript_angular_docker_recommendedSteps_instrumentApplication, + APM_javascript_angular_docker_recommendedSteps_runApplication, + APM_javascript_others_docker_quickStart_instrumentApplication, APM_javascript_others_docker_quickStart_runApplication, diff --git a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts index 517cc38171..7e5ba3b319 100644 --- a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts +++ b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts @@ -47,6 +47,10 @@ export const frameworksMap = { value: 'reactjs', label: 'React JS', }, + { + value: 'angular', + label: 'Angular', + }, { value: 'others', label: 'Other Web Instrumentation',