From f2521b4c499f5b1eb14ddb2b64e6802da0ad31c0 Mon Sep 17 00:00:00 2001 From: CheetoDa <31571545+Calm-Rock@users.noreply.github.com> Date: Tue, 26 Dec 2023 10:43:55 +0530 Subject: [PATCH] feat: onboarding flow updates and new flow addition (#4222) * feat: onboarding flow updates and new flow addition * feat: added reactjs files * feat: added content for reactjs and others * chore: implemented feedback --------- Co-authored-by: Vishal Sharma Co-authored-by: Yunus M --- .../others-kubernetes-installOtelCollector.md | 24 +++ ...others-kubernetes-instrumentApplication.md | 68 ++++++++ .../others-kubernetes-runApplication.md | 18 +++ ...xamd64-quickStart-instrumentApplication.md | 71 ++++++++ ...rs-linuxamd64-quickStart-runApplication.md | 18 +++ ...xamd64-recommended-installOtelCollector.md | 96 +++++++++++ ...amd64-recommended-instrumentApplication.md | 68 ++++++++ ...s-linuxamd64-recommended-runApplication.md | 43 +++++ ...xarm64-quickStart-instrumentApplication.md | 71 ++++++++ ...rs-linuxarm64-quickStart-runApplication.md | 18 +++ ...xarm64-recommended-installOtelCollector.md | 96 +++++++++++ ...arm64-recommended-instrumentApplication.md | 68 ++++++++ ...s-linuxarm64-recommended-runApplication.md | 43 +++++ ...samd64-quickStart-instrumentApplication.md | 71 ++++++++ ...rs-macosamd64-quickStart-runApplication.md | 18 +++ ...samd64-recommended-installOtelCollector.md | 96 +++++++++++ ...amd64-recommended-instrumentApplication.md | 68 ++++++++ ...s-macosamd64-recommended-runApplication.md | 43 +++++ ...sarm64-quickStart-instrumentApplication.md | 71 ++++++++ ...rs-macosarm64-quickStart-runApplication.md | 18 +++ ...sarm64-recommended-installOtelCollector.md | 96 +++++++++++ ...arm64-recommended-instrumentApplication.md | 68 ++++++++ ...s-macosarm64-recommended-runApplication.md | 43 +++++ ...reactjs-kubernetes-installOtelCollector.md | 24 +++ ...eactjs-kubernetes-instrumentApplication.md | 68 ++++++++ .../reactjs-kubernetes-runApplication.md | 18 +++ ...xamd64-quickStart-instrumentApplication.md | 71 ++++++++ ...js-linuxamd64-quickStart-runApplication.md | 18 +++ ...xamd64-recommended-installOtelCollector.md | 96 +++++++++++ ...amd64-recommended-instrumentApplication.md | 68 ++++++++ ...s-linuxamd64-recommended-runApplication.md | 43 +++++ ...xarm64-quickStart-instrumentApplication.md | 71 ++++++++ ...js-linuxarm64-quickStart-runApplication.md | 18 +++ ...xarm64-recommended-installOtelCollector.md | 96 +++++++++++ ...arm64-recommended-instrumentApplication.md | 68 ++++++++ ...s-linuxarm64-recommended-runApplication.md | 43 +++++ ...samd64-quickStart-instrumentApplication.md | 71 ++++++++ ...js-macosamd64-quickStart-runApplication.md | 18 +++ ...samd64-recommended-installOtelCollector.md | 96 +++++++++++ ...amd64-recommended-instrumentApplication.md | 68 ++++++++ ...s-macosamd64-recommended-runApplication.md | 43 +++++ ...sarm64-quickStart-instrumentApplication.md | 71 ++++++++ ...js-macosarm64-quickStart-runApplication.md | 18 +++ ...sarm64-recommended-installOtelCollector.md | 96 +++++++++++ ...arm64-recommended-instrumentApplication.md | 68 ++++++++ ...s-macosarm64-recommended-runApplication.md | 43 +++++ .../constants/apmDocFilePaths.ts | 151 +++++++++++++++++- .../utils/dataSourceUtils.ts | 8 + 48 files changed, 2746 insertions(+), 1 deletion(-) create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-runApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md create mode 100644 frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-installOtelCollector.md new file mode 100644 index 0000000000..946b7fbdbf --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-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/Others/Kubernetes/others-kubernetes-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..a659f36474 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +## 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/v0.79.0/otelcol-contrib_0.79.0_linux_amd64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..cbabb8077b --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +## 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/v0.79.0/otelcol-contrib_0.79.0_linux_arm64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..843e86a411 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +### 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/v0.79.0/otelcol-contrib_0.79.0_darwin_amd64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..3a780bb8de --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +## 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/v0.79.0/otelcol-contrib_0.79.0_darwin_arm64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-installOtelCollector.md new file mode 100644 index 0000000000..946b7fbdbf --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-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/ReactJS/Kubernetes/reactjs-kubernetes-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..a659f36474 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +## 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/v0.79.0/otelcol-contrib_0.79.0_linux_amd64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..cbabb8077b --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +## 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/v0.79.0/otelcol-contrib_0.79.0_linux_arm64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..843e86a411 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +### 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/v0.79.0/otelcol-contrib_0.79.0_darwin_amd64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-instrumentApplication.md new file mode 100644 index 0000000000..8695cc740d --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-instrumentApplication.md @@ -0,0 +1,71 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces', + headers: { + "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}", + }, +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-runApplication.md new file mode 100644 index 0000000000..49ee3d7601 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-runApplication.md @@ -0,0 +1,18 @@ +Once you are done intrumenting your JavaScript application, you can run it as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md new file mode 100644 index 0000000000..3a780bb8de --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md @@ -0,0 +1,96 @@ +## 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/v0.79.0/otelcol-contrib_0.79.0_darwin_arm64.tar.gz +``` +  + +### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder +```bash +mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_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 + 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] +``` + + diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md new file mode 100644 index 0000000000..f52fcb2895 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md @@ -0,0 +1,68 @@ + +### Step 1: Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/context-zone +npm install --save @opentelemetry/instrumentation +npm install --save @opentelemetry/auto-instrumentations-web +npm install --save @opentelemetry/sdk-trace-base +npm install --save @opentelemetry/sdk-trace-web +npm install --save @opentelemetry/resources +npm install --save @opentelemetry/semantic-conventions +npm install --save @opentelemetry/exporter-trace-otlp-http +``` +  + +### Step 2: Create tracing.js file + +```javascript +// tracing.js +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; +import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'; +import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { Resource } from '@opentelemetry/resources'; +import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; + +const provider = new WebTracerProvider({ + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}', + }), +}); +const exporter = new OTLPTraceExporter({ + url: 'http://localhost:4318/v1/traces', +}); +provider.addSpanProcessor(new BatchSpanProcessor(exporter)); + +provider.register({ + // Changing default contextManager to use ZoneContextManager - supports asynchronous operations so that traces are not broken + contextManager: new ZoneContextManager(), +}); + +// Registering instrumentations +registerInstrumentations({ + instrumentations: [ + getWebAutoInstrumentations({ + + '@opentelemetry/instrumentation-xml-http-request': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + '@opentelemetry/instrumentation-fetch': { + propagateTraceHeaderCorsUrls: [ + /.+/g, //Regex to match your backend urls. + ], + }, + }), + ], +}); +``` +### Step 3: Import tracer in main file + +**Important Note**: The below import should be the first line in the main file of your application (Ex -> `index.js`) +```bash +import './tracing.js' +``` diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md new file mode 100644 index 0000000000..b02f98f840 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md @@ -0,0 +1,43 @@ +  + +Once you are done intrumenting your JavaScript 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 +Run your JavaScript application as you normally would. + +For example: + +If you're using `npm` +```bash +npm start +``` +  + +If you're using `yarn` +```bash +yarn start +``` + +  + +To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/) \ 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 b35bf6ce06..aebb865ceb 100644 --- a/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts +++ b/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts @@ -306,8 +306,72 @@ import APM_javascript_nodejs_macOsARM64_quickStart_runApplication from '../Modul import APM_javascript_nodejs_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/NodeJS/MacOsARM64/Recommended/nodejs-macosarm64-recommended-installOtelCollector.md'; import APM_javascript_nodejs_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/NodeJS/MacOsARM64/Recommended/nodejs-macosarm64-recommended-instrumentApplication.md'; import APM_javascript_nodejs_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/NodeJS/MacOsARM64/Recommended/nodejs-macosarm64-recommended-runApplication.md'; +/// // JavaScript Others +import APM_javascript_others_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-installOtelCollector.md'; +import APM_javascript_others_kubernetes_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-instrumentApplication.md'; +import APM_javascript_others_kubernetes_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-runApplication.md'; +// Others-JavaScript-LinuxAMD64-quickstart +import APM_javascript_others_linuxAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-instrumentApplication.md'; +import APM_javascript_others_linuxAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-runApplication.md'; +// // Others-JavaScript-LinuxAMD64-recommended +import APM_javascript_others_linuxAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-installOtelCollector.md'; +import APM_javascript_others_linuxAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-instrumentApplication.md'; +import APM_javascript_others_linuxAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-runApplication.md'; +// Others-JavaScript-LinuxARM64-quiOthers +import APM_javascript_others_linuxARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-instrumentApplication.md'; +import APM_javascript_others_linuxARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-runApplication.md'; +// Others-JavaScript-LinuxARM64-recommended +import APM_javascript_others_linuxARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-installOtelCollector.md'; +import APM_javascript_others_linuxARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-instrumentApplication.md'; +import APM_javascript_others_linuxARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-runApplication.md'; +// Others-JavaScript-MacOsAMD64-quickstart +import APM_javascript_others_macOsAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-instrumentApplication.md'; +import APM_javascript_others_macOsAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-runApplication.md'; +// Others-JavaScript-MacOsAMD64-recommended +import APM_javascript_others_macOsAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-installOtelCollector.md'; +import APM_javascript_others_macOsAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-instrumentApplication.md'; +import APM_javascript_others_macOsAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-runApplication.md'; +// Others-JavaScript-MacOsARM64-quickstart +import APM_javascript_others_macOsARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-instrumentApplication.md'; +import APM_javascript_others_macOsARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-runApplication.md'; +// Others-JavaScript-MacOsARM64-recommended +import APM_javascript_others_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-installOtelCollector.md'; +import APM_javascript_others_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md'; +import APM_javascript_others_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md'; // ---------------------------------------------------------------------------- -/// ////// Java Done +// ReactJS-Kubernetes +import APM_javascript_reactjs_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-installOtelCollector.md'; +import APM_javascript_reactjs_kubernetes_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-instrumentApplication.md'; +import APM_javascript_reactjs_kubernetes_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-runApplication.md'; +// ReactJS-LinuxAMD64-quickstart +import APM_javascript_reactjs_linuxAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-instrumentApplication.md'; +import APM_javascript_reactjs_linuxAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-runApplication.md'; +// // ReactJS-LinuxAMD64-recommended +import APM_javascript_reactjs_linuxAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-installOtelCollector.md'; +import APM_javascript_reactjs_linuxAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-instrumentApplication.md'; +import APM_javascript_reactjs_linuxAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-runApplication.md'; +// ReactJS-LinuxARM64-quickstart +import APM_javascript_reactjs_linuxARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-instrumentApplication.md'; +import APM_javascript_reactjs_linuxARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-runApplication.md'; +// ReactJS-LinuxARM64-recommended +import APM_javascript_reactjs_linuxARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-installOtelCollector.md'; +import APM_javascript_reactjs_linuxARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-instrumentApplication.md'; +import APM_javascript_reactjs_linuxARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-runApplication.md'; +// ReactJS-MacOsAMD64-quickstart +import APM_javascript_reactjs_macOsAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-instrumentApplication.md'; +import APM_javascript_reactjs_macOsAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-runApplication.md'; +// ReactJS-MacOsAMD64-recommended +import APM_javascript_reactjs_macOsAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-installOtelCollector.md'; +import APM_javascript_reactjs_macOsAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-instrumentApplication.md'; +import APM_javascript_reactjs_macOsAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-runApplication.md'; +// ReactJS-MacOsARM64-quickstart +import APM_javascript_reactjs_macOsARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-instrumentApplication.md'; +import APM_javascript_reactjs_macOsARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-runApplication.md'; +// ReactJS-MacOsARM64-recommended +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'; +/// ////// Javascript Done /// ///// Python Start // Django // Django-Kubernetes @@ -1062,6 +1126,91 @@ export const ApmDocFilePaths = { APM_javascript_nodejs_macOsARM64_quickStart_instrumentApplication, APM_javascript_nodejs_macOsARM64_quickStart_runApplication, + /// React JS + + // ReeactJS-Kubernetes + APM_javascript_reactjs_kubernetes_recommendedSteps_setupOtelCollector, + APM_javascript_reactjs_kubernetes_recommendedSteps_instrumentApplication, + APM_javascript_reactjs_kubernetes_recommendedSteps_runApplication, + + // ReactJS-LinuxAMD64-quickstart + APM_javascript_reactjs_linuxAMD64_quickStart_instrumentApplication, + APM_javascript_reactjs_linuxAMD64_quickStart_runApplication, + + // // ReactJS-LinuxAMD64-recommended + APM_javascript_reactjs_linuxAMD64_recommendedSteps_setupOtelCollector, + APM_javascript_reactjs_linuxAMD64_recommendedSteps_instrumentApplication, + APM_javascript_reactjs_linuxAMD64_recommendedSteps_runApplication, + + // ReactJS-LinuxARM64-quickstart + APM_javascript_reactjs_linuxARM64_quickStart_instrumentApplication, + APM_javascript_reactjs_linuxARM64_quickStart_runApplication, + + // ReactJS-LinuxARM64-recommended + APM_javascript_reactjs_linuxARM64_recommendedSteps_setupOtelCollector, + APM_javascript_reactjs_linuxARM64_recommendedSteps_instrumentApplication, + APM_javascript_reactjs_linuxARM64_recommendedSteps_runApplication, + + // ReactJS-MacOsAMD64-quickstart + APM_javascript_reactjs_macOsAMD64_quickStart_instrumentApplication, + APM_javascript_reactjs_macOsAMD64_quickStart_runApplication, + + // ReactJS-MacOsAMD64-recommended + APM_javascript_reactjs_macOsAMD64_recommendedSteps_setupOtelCollector, + APM_javascript_reactjs_macOsAMD64_recommendedSteps_instrumentApplication, + APM_javascript_reactjs_macOsAMD64_recommendedSteps_runApplication, + + // ReactJS-MacOsARM64-quickstart + APM_javascript_reactjs_macOsARM64_quickStart_instrumentApplication, + APM_javascript_reactjs_macOsARM64_quickStart_runApplication, + + // ReactJS-MacOsARM64-recommended + APM_javascript_reactjs_macOsARM64_recommendedSteps_setupOtelCollector, + APM_javascript_reactjs_macOsARM64_recommendedSteps_instrumentApplication, + APM_javascript_reactjs_macOsARM64_recommendedSteps_runApplication, + + /// // JavaScript Others + + APM_javascript_others_kubernetes_recommendedSteps_setupOtelCollector, + APM_javascript_others_kubernetes_recommendedSteps_instrumentApplication, + APM_javascript_others_kubernetes_recommendedSteps_runApplication, + + // Others-JavaScript-LinuxAMD64-quickstart + APM_javascript_others_linuxAMD64_quickStart_instrumentApplication, + APM_javascript_others_linuxAMD64_quickStart_runApplication, + + // // Others-JavaScript-LinuxAMD64-recommended + APM_javascript_others_linuxAMD64_recommendedSteps_setupOtelCollector, + APM_javascript_others_linuxAMD64_recommendedSteps_instrumentApplication, + APM_javascript_others_linuxAMD64_recommendedSteps_runApplication, + + // Others-JavaScript-LinuxARM64-quiOthers + APM_javascript_others_linuxARM64_quickStart_instrumentApplication, + APM_javascript_others_linuxARM64_quickStart_runApplication, + + // Others-JavaScript-LinuxARM64-recommended + APM_javascript_others_linuxARM64_recommendedSteps_setupOtelCollector, + APM_javascript_others_linuxARM64_recommendedSteps_instrumentApplication, + APM_javascript_others_linuxARM64_recommendedSteps_runApplication, + + // Others-JavaScript-MacOsAMD64-quickstart + APM_javascript_others_macOsAMD64_quickStart_instrumentApplication, + APM_javascript_others_macOsAMD64_quickStart_runApplication, + + // Others-JavaScript-MacOsAMD64-recommended + APM_javascript_others_macOsAMD64_recommendedSteps_setupOtelCollector, + APM_javascript_others_macOsAMD64_recommendedSteps_instrumentApplication, + APM_javascript_others_macOsAMD64_recommendedSteps_runApplication, + + // Others-JavaScript-MacOsARM64-quickstart + APM_javascript_others_macOsARM64_quickStart_instrumentApplication, + APM_javascript_others_macOsARM64_quickStart_runApplication, + + // Others-JavaScript-MacOsARM64-recommended + APM_javascript_others_macOsARM64_recommendedSteps_setupOtelCollector, + APM_javascript_others_macOsARM64_recommendedSteps_instrumentApplication, + APM_javascript_others_macOsARM64_recommendedSteps_runApplication, + // ------------------------------------------------------------------------------------------------ /// //// JavaScript Done diff --git a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts index 68b5004952..08a674d19a 100644 --- a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts +++ b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts @@ -34,6 +34,14 @@ export const frameworksMap = { value: 'nodejs', label: 'Nodejs', }, + { + value: 'reactjs', + label: 'React JS', + }, + { + value: 'others', + label: 'Other Web Instrumentation', + }, ], python: [ {