GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 03:59:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: onboarding flow updates and new flow addition (#4222)

Browse Source 
* 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 <makeavish786@gmail.com>
Co-authored-by: Yunus M <myounis.ar@live.com>
This commit is contained in:
CheetoDa 2023-12-26 10:43:55 +05:30 committed by GitHub
parent 16b846006a
commit f2521b4c49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
48 changed files with 2746 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-installOtelCollector.md Normal file
View File

@ -0,0 +1,24 @@
## Install otel-collector in your Kubernetes infra
&nbsp;
Add the SigNoz Helm Chart repository
```bash
helm repo add signoz https://charts.signoz.io
```
&nbsp;
If the chart is already present, update the chart to the latest using:
```bash
helm repo update
```
&nbsp;
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=<CLUSTER_NAME>
```
- Replace `<CLUSTER_NAME>` with the name of the Kubernetes cluster or a unique identifier of the cluster.

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/Kubernetes/others-kubernetes-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/QuickStart/others-linuxamd64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
## Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxAMD64/Recommended/others-linuxamd64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/QuickStart/others-linuxarm64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
## Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/LinuxARM64/Recommended/others-linuxarm64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/QuickStart/others-macosamd64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
### Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsAMD64/Recommended/others-macosamd64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/QuickStart/others-macosarm64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
## Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

24
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-installOtelCollector.md Normal file
View File

@ -0,0 +1,24 @@
## Install otel-collector in your Kubernetes infra
&nbsp;
Add the SigNoz Helm Chart repository
```bash
helm repo add signoz https://charts.signoz.io
```
&nbsp;
If the chart is already present, update the chart to the latest using:
```bash
helm repo update
```
&nbsp;
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=<CLUSTER_NAME>
```
- Replace `<CLUSTER_NAME>` with the name of the Kubernetes cluster or a unique identifier of the cluster.

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/Kubernetes/reactjs-kubernetes-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/QuickStart/reactjs-linuxamd64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
## Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxAMD64/Recommended/reactjs-linuxamd64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/QuickStart/reactjs-linuxarm64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
## Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/LinuxARM64/Recommended/reactjs-linuxarm64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/QuickStart/reactjs-macosamd64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
### Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsAMD64/Recommended/reactjs-macosamd64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

71
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

18
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/QuickStart/reactjs-macosarm64-quickStart-runApplication.md Normal file
View File

@ -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
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

96
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md Normal file
View File

@ -0,0 +1,96 @@
## Setup OpenTelemetry Binary as an agent
&nbsp;
### 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
```
&nbsp;
### 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
```
&nbsp;
### 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]
```

68
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md Normal file
View File

@ -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
```
&nbsp;
### 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'
```

43
frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md Normal file
View File

@ -0,0 +1,43 @@
&nbsp;
Once you are done intrumenting your JavaScript application, you can run it using the below commands
&nbsp;
### 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
```
&nbsp;
#### (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)"
```
&nbsp;
### Step 2: Run your application
Run your JavaScript application as you normally would.
For example:
If you're using `npm`
```bash
npm start
```
&nbsp;
If you're using `yarn`
```bash
yarn start
```
&nbsp;
To view more detailed documentation, checkout this [link](https://signoz.io/docs/instrumentation/javascript/)

151
frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts
View File

@ -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_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_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'; 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 /// ///// Python Start
// Django // Django
// Django-Kubernetes // Django-Kubernetes
@ -1062,6 +1126,91 @@ export const ApmDocFilePaths = {
APM_javascript_nodejs_macOsARM64_quickStart_instrumentApplication, APM_javascript_nodejs_macOsARM64_quickStart_instrumentApplication,
APM_javascript_nodejs_macOsARM64_quickStart_runApplication, 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 /// //// JavaScript Done

8
frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts
View File

@ -34,6 +34,14 @@ export const frameworksMap = {
value: 'nodejs', value: 'nodejs',
label: 'Nodejs', label: 'Nodejs',
}, },
{
value: 'reactjs',
label: 'React JS',
},
{
value: 'others',
label: 'Other Web Instrumentation',
},
], ],
python: [ python: [
{ {