+ {activeStep === 2 && (
+ <>
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.styles.scss b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.styles.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
new file mode 100644
index 0000000000..f2310ec292
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
@@ -0,0 +1,62 @@
+import './GoLang.styles.scss';
+
+import { MDXProvider } from '@mdx-js/react';
+import { Form, Input } from 'antd';
+import Header from 'container/OnboardingContainer/common/Header/Header';
+
+import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
+import GoLangDocs from './goLang.md';
+
+export default function GoLang({
+ activeStep,
+}: {
+ activeStep: number;
+}): JSX.Element {
+ const [form] = Form.useForm();
+
+ return (
+ <>
+ {activeStep === 2 && (
+
+
+
+ + Get Started to instrument your applications and sending data to SigNoz +
+Select the data source
+
+ {supportedLanguages.map((supportedLanguage) => (
+
+
+ )}
+
+ {selectedLanguage && (
+ setSelectedLanguage(supportedLanguage.name)}
+ >
+ 
+
+ ))}
+
+
+ {renderSelectedLanguageSetupInstructions()}
+
+ )}
+
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+ Service Name
+
+
+
+
+
+
+ + + Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers). + + Run the below commands after navigating to the application source folder: + + ```bash + go get go.opentelemetry.io/otel \ + go.opentelemetry.io/otel/trace \ + go.opentelemetry.io/otel/sdk \ + go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin \ + go.opentelemetry.io/otel/exporters/otlp/otlptrace \ + go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc + ``` + +2. **Declare environment variables for configuring OpenTelemetry**
+ + Declare the following global variables in `main.go` which we will use to configure OpenTelemetry: + + ```bash + var ( + serviceName = os.Getenv("SERVICE_NAME") + collectorURL = os.Getenv("OTEL_EXPORTER_OTLP_ENDPOINT") + insecure = os.Getenv("INSECURE_MODE") + ) + ``` + +3. **Instrument your Go application with OpenTelemetry**
+ + To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file. + + ```go + + import ( + ..... + + "github.com/gin-gonic/gin" + "go.opentelemetry.io/otel" + "go.opentelemetry.io/otel/attribute" + "go.opentelemetry.io/otel/exporters/otlp/otlptrace" + "go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc" + + "go.opentelemetry.io/otel/sdk/resource" + sdktrace "go.opentelemetry.io/otel/sdk/trace" + ) + + func initTracer() func(context.Context) error { + + var secureOption otlptracegrpc.Option + + if strings.ToLower(insecure) == "false" || insecure == "0" || strings.ToLower(insecure) == "f" { + secureOption = otlptracegrpc.WithTLSCredentials(credentials.NewClientTLSFromCert(nil, "")) + } else { + secureOption = otlptracegrpc.WithInsecure() + } + + exporter, err := otlptrace.New( + context.Background(), + otlptracegrpc.NewClient( + secureOption, + otlptracegrpc.WithEndpoint(collectorURL), + ), + ) + + if err != nil { + log.Fatalf("Failed to create exporter: %v", err) + } + resources, err := resource.New( + context.Background(), + resource.WithAttributes( + attribute.String("service.name", serviceName), + attribute.String("library.language", "go"), + ), + ) + if err != nil { + log.Fatalf("Could not set resources: %v", err) + } + + otel.SetTracerProvider( + sdktrace.NewTracerProvider( + sdktrace.WithSampler(sdktrace.AlwaysSample()), + sdktrace.WithBatcher(exporter), + sdktrace.WithResource(resources), + ), + ) + return exporter.Shutdown + } + ``` + +4. **Initialize the tracer in main.go**
+ + Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function. + + ```go + func main() { + cleanup := initTracer() + defer cleanup(context.Background()) + + ...... + } + ``` + +5. **Add the OpenTelemetry Gin middleware**
+ + Configure Gin to use the middleware by adding the following lines in `main.go`. + + ```go + import ( + .... + "go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin" + ) + + func main() { + ...... + r := gin.Default() + r.Use(otelgin.Middleware(serviceName)) + ...... + } + ``` + +6. **Set environment variables and run your Go Gin application**
+ + The run command must have some environment variables to send data to SigNoz cloud. The run command: + + ```bash + SERVICE_NAME=goApp INSECURE_MODE=false OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Golang application. + +1. **Install Dependencies**
+ + Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers). + + Run the below commands after navigating to the application source folder: + + ```bash + go get go.opentelemetry.io/otel \ + go.opentelemetry.io/otel/trace \ + go.opentelemetry.io/otel/sdk \ + go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin \ + go.opentelemetry.io/otel/exporters/otlp/otlptrace \ + go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc + ``` + +2. **Declare environment variables for configuring OpenTelemetry**
+ + Declare the following global variables in `main.go` which we will use to configure OpenTelemetry: + + ```go + var ( + serviceName = os.Getenv("SERVICE_NAME") + collectorURL = os.Getenv("OTEL_EXPORTER_OTLP_ENDPOINT") + insecure = os.Getenv("INSECURE_MODE") + ) + ``` + +3. **Instrument your Go application with OpenTelemetry**
+ + To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file. + + ```go + + import ( + ..... + + "github.com/gin-gonic/gin" + "go.opentelemetry.io/otel" + "go.opentelemetry.io/otel/attribute" + "go.opentelemetry.io/otel/exporters/otlp/otlptrace" + "go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc" + + "go.opentelemetry.io/otel/sdk/resource" + sdktrace "go.opentelemetry.io/otel/sdk/trace" + ) + + func initTracer() func(context.Context) error { + + var secureOption otlptracegrpc.Option + + if strings.ToLower(insecure) == "false" || insecure == "0" || strings.ToLower(insecure) == "f" { + secureOption = otlptracegrpc.WithTLSCredentials(credentials.NewClientTLSFromCert(nil, "")) + } else { + secureOption = otlptracegrpc.WithInsecure() + } + + exporter, err := otlptrace.New( + context.Background(), + otlptracegrpc.NewClient( + secureOption, + otlptracegrpc.WithEndpoint(collectorURL), + ), + ) + + if err != nil { + log.Fatalf("Failed to create exporter: %v", err) + } + resources, err := resource.New( + context.Background(), + resource.WithAttributes( + attribute.String("service.name", serviceName), + attribute.String("library.language", "go"), + ), + ) + if err != nil { + log.Fatalf("Could not set resources: %v", err) + } + + otel.SetTracerProvider( + sdktrace.NewTracerProvider( + sdktrace.WithSampler(sdktrace.AlwaysSample()), + sdktrace.WithBatcher(exporter), + sdktrace.WithResource(resources), + ), + ) + return exporter.Shutdown + } + +4. **Initialize the tracer in main.go**
+ + Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function. + + ```go + func main() { + cleanup := initTracer() + defer cleanup(context.Background()) + + ...... + } + ``` + +5. **Add the OpenTelemetry Gin middleware**
+ + Configure Gin to use the middleware by adding the following lines in `main.go`. + + ```go + import ( + .... + "go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin" + ) + + func main() { + ...... + r := gin.Default() + r.Use(otelgin.Middleware(serviceName)) + ...... + } + ``` + +6. **Set environment variables and run your Go Gin application**
+ + The run command must have some environment variables to send data to SigNoz. The run command: + + ```bash + SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go + ``` + + If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
+ `SERVICE_NAME`: goGinApp (you can name it whatever you want) + +--- + +### Applications Deployed on Kubernetes + +For Golang application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/). + +Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Golang instrumentation by following the below steps: + +1. **Install Dependencies**
+ + Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers). + + Run the below commands after navigating to the application source folder: + + ```bash + go get go.opentelemetry.io/otel \ + go.opentelemetry.io/otel/trace \ + go.opentelemetry.io/otel/sdk \ + go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin \ + go.opentelemetry.io/otel/exporters/otlp/otlptrace \ + go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc + ``` + +2. **Declare environment variables for configuring OpenTelemetry**
+ + Declare the following global variables in `main.go` which we will use to configure OpenTelemetry: + + ```go + var ( + serviceName = os.Getenv("SERVICE_NAME") + collectorURL = os.Getenv("OTEL_EXPORTER_OTLP_ENDPOINT") + insecure = os.Getenv("INSECURE_MODE") + ) + ``` + +3. **Instrument your Go application with OpenTelemetry**
+ + To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file. + + ```go + + import ( + ..... + + "github.com/gin-gonic/gin" + "go.opentelemetry.io/otel" + "go.opentelemetry.io/otel/attribute" + "go.opentelemetry.io/otel/exporters/otlp/otlptrace" + "go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc" + + "go.opentelemetry.io/otel/sdk/resource" + sdktrace "go.opentelemetry.io/otel/sdk/trace" + ) + + func initTracer() func(context.Context) error { + + var secureOption otlptracegrpc.Option + + if strings.ToLower(insecure) == "false" || insecure == "0" || strings.ToLower(insecure) == "f" { + secureOption = otlptracegrpc.WithTLSCredentials(credentials.NewClientTLSFromCert(nil, "")) + } else { + secureOption = otlptracegrpc.WithInsecure() + } + + exporter, err := otlptrace.New( + context.Background(), + otlptracegrpc.NewClient( + secureOption, + otlptracegrpc.WithEndpoint(collectorURL), + ), + ) + + if err != nil { + log.Fatalf("Failed to create exporter: %v", err) + } + resources, err := resource.New( + context.Background(), + resource.WithAttributes( + attribute.String("service.name", serviceName), + attribute.String("library.language", "go"), + ), + ) + if err != nil { + log.Fatalf("Could not set resources: %v", err) + } + + otel.SetTracerProvider( + sdktrace.NewTracerProvider( + sdktrace.WithSampler(sdktrace.AlwaysSample()), + sdktrace.WithBatcher(exporter), + sdktrace.WithResource(resources), + ), + ) + return exporter.Shutdown + } + +4. **Initialize the tracer in main.go**
+ + Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function. + + ```go + func main() { + cleanup := initTracer() + defer cleanup(context.Background()) + + ...... + } + ``` + +5. **Add the OpenTelemetry Gin middleware**
+ + Configure Gin to use the middleware by adding the following lines in `main.go`. + + ```go + import ( + .... + "go.opentelemetry.io/contrib/instrumentation/github.com/gin-gonic/gin/otelgin" + ) + + func main() { + ...... + r := gin.Default() + r.Use(otelgin.Middleware(serviceName)) + ...... + } + ``` + +6. **Set environment variables and run your Go Gin application**
+ + The run command must have some environment variables to send data to SigNoz. The run command: + + ```bash + SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go + ``` + + If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
+ `SERVICE_NAME`: goGinApp (you can name it whatever you want) \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.styles.scss b/frontend/src/container/OnboardingContainer/APM/Java/Java.styles.scss new file mode 100644 index 0000000000..5a6fc3baaf --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Java/Java.styles.scss @@ -0,0 +1,10 @@ +.form-container { + display: flex; + align-items: flex-start; + width: 100%; + gap: 16px; + + & .ant-form-item { + margin-bottom: 0px; + } +} diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx new file mode 100644 index 0000000000..a5338ba967 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx @@ -0,0 +1,115 @@ +import './Java.styles.scss'; + +import { MDXProvider } from '@mdx-js/react'; +import { Form, Input, Select } from 'antd'; +import Header from 'container/OnboardingContainer/common/Header/Header'; +import { useState } from 'react'; + +import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; +import JavaDocs from './md-docs/java.md'; +import JbossDocs from './md-docs/jboss.md'; +import SprintBootDocs from './md-docs/spring_boot.md'; +import TomcatDocs from './md-docs/tomcat.md'; + +enum FrameworksMap { + tomcat = 'Tomcat', + spring_boot = 'Spring Boot', + jboss = 'JBoss', + other = 'Others', +} + +export default function Java({ + activeStep, +}: { + activeStep: number; +}): JSX.Element { + const [selectedFrameWork, setSelectedFrameWork] = useState('spring_boot'); + + const [form] = Form.useForm(); + + const renderDocs = (): JSX.Element => { + switch (selectedFrameWork) { + case 'tomcat': + return
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ Select Framework
+
+
+
+ Service Name
+
+
+
+ {renderDocs()}
+
+ + + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application. + +Step 1. Download OTel java binary agent
+ +```bash +wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar +``` + +Step 2. Run your application
+ +```bash +java -javaagent:$PWD/opentelemetry-javaagent.jar -jar
+ + ```bash + wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar + ``` + +2. Run your application
+ + ```bash + java -javaagent:$PWD/opentelemetry-javaagent.jar -jar
+ +- `path` - Update it to the path of your downloaded Java JAR agent.
+- `
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ + +Step 4. [Optional] Write the output/logs of standalone.sh script to a file nohup.out as a background thread + +```bash +/opt/jboss-eap-7.1/bin/standalone.sh > /opt/jboss-eap-7.1/bin/nohup.out & +``` +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application. + +Step 1. Download OTel java binary agent
+```bash +wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar +``` + + +Step 2. Open the configuration file + +```bash +vim /opt/jboss-eap-7.1/bin/standalone.conf +``` + +Step 3. Update `JAVA_OPTS` environment variable + +Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file. + +```bash +JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar" +``` + +where, +- `path` - Update it to the path of your downloaded Java JAR agent.
+ +--- + +### Applications Deployed on Kubernetes + +For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/). + +Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps: + +Step 1. Download otel java binary
+ +```bash +wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar +``` + +Step 2. Open the configuration file + +```bash +vim /opt/jboss-eap-7.1/bin/standalone.conf +``` + +Step 3. Update `JAVA_OPTS` environment variable + +Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file. + +```bash +JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar" +``` + +where, +- `path` - Update it to the path of your downloaded Java JAR agent.
+ + +Step 4. Make sure to dockerise your application along with OpenTelemetry instrumentation. \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md new file mode 100644 index 0000000000..152267ea59 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md @@ -0,0 +1,91 @@ +## Requirements + +Java 8 or higher + +## Send Traces to SigNoz Cloud + +OpenTelemetry provides a handy Java JAR agent that can be attached to any Java 8+ application and dynamically injects bytecode to capture telemetry from a number of popular libraries and frameworks. + +Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud. + +### Application on VMs + +From VMs, there are two ways to send data to SigNoz Cloud. + +- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud) +- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended) + +#### **Send traces directly to SigNoz Cloud** +OpenTelemetry Java agent can send traces directly to SigNoz Cloud. + +Step 1. Download otel java binary agent + +```bash +wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar +``` + +Step 2. Run your application + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application. + +Step 1. Download OTel java binary agent
+```bash +wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar +``` + +Step 2. Run your application
+ +```bash +java -javaagent:$PWD/opentelemetry-javaagent.jar -jar
+ + ```bash + wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar + ``` + +2. Run your application
+ + ```bash + java -javaagent:$PWD/opentelemetry-javaagent.jar -jar
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application. + +Step 1. Download OTel java binary agent
+```bash +wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar +``` + +Step 2. Enable the instrumentation agent and run your application
+ +If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder. + +This should set these environment variables and start sending telemetry data to SigNoz Cloud. + + +```bash +export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/path/to/opentelemetry-javaagent.jar" +``` + +- path/to - Update it to the path of your downloaded Java JAR agent. + +--- + +### Applications Deployed on Kubernetes + +For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/). + +Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps: + +1. Download otel java binary
+ + ```bash + wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar + ``` + +2. Enable the instrumentation agent and run your application
+ + If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder. + + This should set the environment variable and start sending telemetry data to SigNoz Cloud. + + ```bash + export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/path/to/opentelemetry-javaagent.jar" + ``` + + - path/to - Update it to the path of your downloaded Java JAR agent. + +3. Make sure to dockerise your application along with OpenTelemetry instrumentation. + +You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](#validating-instrumentation-by-checking-for-traces). \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.styles.scss b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx new file mode 100644 index 0000000000..9c2e38c143 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx @@ -0,0 +1,113 @@ +import './Javascript.styles.scss'; + +import { MDXProvider } from '@mdx-js/react'; +import { Form, Input, Select } from 'antd'; +import Header from 'container/OnboardingContainer/common/Header/Header'; +import { useState } from 'react'; + +import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; +import ExpressDocs from './md-docs/express.md'; +import JavascriptDocs from './md-docs/javascript.md'; +import NestJsDocs from './md-docs/nestjs.md'; + +const frameworksMap = { + express: 'Express', + nestjs: 'Nest JS', + nodejs: 'Nodejs', +}; + +export default function Javascript({ + activeStep, +}: { + activeStep: number; +}): JSX.Element { + const [selectedFrameWork, setSelectedFrameWork] = useState('nodejs'); + + const [form] = Form.useForm(); + + const renderDocs = (): JSX.Element => { + switch (selectedFrameWork) { + case 'nodejs': + return
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ Select Framework
+
+
+
+ Service Name
+
+
+
+ {renderDocs()}
+
+ + +You need to configure the endpoint for SigNoz cloud in this file. You can find your ingestion key from SigNoz cloud account details sent on your email. + +```js +// tracing.js +'use strict' +const process = require('process'); +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const { Resource } = require('@opentelemetry/resources'); +const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); + +// do not set headers in exporterOptions, the OTel spec recommends setting headers through ENV variables +// https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables + +// highlight-start +const exporterOptions = { + url: 'https://ingest.{region}.signoz.cloud:443/v1/traces' +} +// highlight-end + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + // highlight-next-line + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) +}); + +// initialize the SDK and register with the OpenTelemetry API +// this enables the API to record telemetry +sdk.start() + +// gracefully shut down the SDK on process exit +process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); +}); +``` + +Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table. + + US - ingest.us.signoz.cloud:443/v1/traces
+ + IN - ingest.in.signoz.cloud:443/v1/traces
+ + EU - ingest.eu.signoz.cloud:443/v1/traces
+ +Step 3. Run the application
+ +Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows +```bash +OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=
+ +```js +// tracing.js +'use strict' +const process = require('process'); +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const { Resource } = require('@opentelemetry/resources'); +const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces', +} + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + // highlight-next-line + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) +}); + +// initialize the SDK and register with the OpenTelemetry API +// this enables the API to record telemetry +sdk.start() + +// gracefully shut down the SDK on process exit +process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); +}); +``` + +Step 3. Run the application
+```bash +node -r ./tracing.js app.js +``` +--- + +### Applications Deployed on Kubernetes + +For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/). + +Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps: + +Step 1. Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/api@^1.4.1 +npm install --save @opentelemetry/sdk-node@^0.39.1 +npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1 +``` + +Step 2. Create tracing.js file
+ +```js +// tracing.js +'use strict' +const process = require('process'); +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const { Resource } = require('@opentelemetry/resources'); +const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces', +} + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + // highlight-next-line + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) +}); + +// initialize the SDK and register with the OpenTelemetry API +// this enables the API to record telemetry +sdk.start() + +// gracefully shut down the SDK on process exit +process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); +}); +``` + +Step 3. Run the application
+ +```bash +node -r ./tracing.js app.js +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md new file mode 100644 index 0000000000..5b5ab19cb3 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md @@ -0,0 +1,212 @@ +## Requirements + +- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))
+ +## Send traces to SigNoz Cloud + +Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud. + +### Application on VMs + +From VMs, there are two ways to send data to SigNoz Cloud. + +- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud) +- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended) + +#### **Send traces directly to SigNoz Cloud** + +Step 1. Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/api@^1.4.1 +npm install --save @opentelemetry/sdk-node@^0.39.1 +npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1 +``` + +Step 2. Create tracing.js file
+ +You need to configure the endpoint for SigNoz cloud in this file. You can find your ingestion key from SigNoz cloud account details sent on your email. + +```js +// tracing.js +'use strict' +const process = require('process'); +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const { Resource } = require('@opentelemetry/resources'); +const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); + +// do not set headers in exporterOptions, the OTel spec recommends setting headers through ENV variables +// https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables + +// highlight-start +const exporterOptions = { + url: 'https://ingest.{region}.signoz.cloud:443/v1/traces' +} +// highlight-end + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + // highlight-next-line + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) +}); + +// initialize the SDK and register with the OpenTelemetry API +// this enables the API to record telemetry +sdk.start() + +// gracefully shut down the SDK on process exit +process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); +}); +``` + +Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table. + + US - ingest.us.signoz.cloud:443/v1/traces
+ + IN - ingest.in.signoz.cloud:443/v1/traces
+ + EU - ingest.eu.signoz.cloud:443/v1/traces
+ +Step 3. Run the application
+ +Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows + +```bash +OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=
+ +```js +// tracing.js +'use strict' +const process = require('process'); +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const { Resource } = require('@opentelemetry/resources'); +const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces', +} + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + // highlight-next-line + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) +}); + +// initialize the SDK and register with the OpenTelemetry API +// this enables the API to record telemetry +sdk.start() + +// gracefully shut down the SDK on process exit +process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); +}); +``` + +Step 3. Run the application
+ +```bash +node -r ./tracing.js app.js +``` + +--- + +### Applications Deployed on Kubernetes + +For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/). + +Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps: + +Step 1. Install OpenTelemetry packages + +```js +npm install --save @opentelemetry/api@^1.4.1 +npm install --save @opentelemetry/sdk-node@^0.39.1 +npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1 +``` + +Step 2. Create tracing.js file
+ +```js +// tracing.js +'use strict' +const process = require('process'); +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const { Resource } = require('@opentelemetry/resources'); +const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces', +} + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + // highlight-next-line + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) +}); + +// initialize the SDK and register with the OpenTelemetry API +// this enables the API to record telemetry +sdk.start() + +// gracefully shut down the SDK on process exit +process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); +}); +``` + +Step 3. Run the application
+```bash +node -r ./tracing.js app.js +``` \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md new file mode 100644 index 0000000000..e53831c343 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md @@ -0,0 +1,300 @@ +## Requirements + +**Supported Versions** + +- `>=4.0.0` + +## Send traces to SigNoz Cloud + +Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud. + +### Application on VMs + +From VMs, there are two ways to send data to SigNoz Cloud. + +- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud) +- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended) + +#### **Send traces directly to SigNoz Cloud** + +Step 1. Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/api@^1.4.1 +npm install --save @opentelemetry/sdk-node@^0.39.1 +npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1 +``` + +Step 2. Create `tracer.ts` file
+ +You need to configure the endpoint for SigNoz cloud in this file. + +```js +'use strict' +const process = require('process'); +//OpenTelemetry +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const {Resource} = require('@opentelemetry/resources'); +const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + // highlight-start + url: 'https://ingest.{region}.signoz.cloud:443/v1/traces' + // highlight-end + } + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication' + }) + }); + + // initialize the SDK and register with the OpenTelemetry API + // this enables the API to record telemetry + sdk.start() + + // gracefully shut down the SDK on process exit + process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); + }); + + module.exports = sdk +``` + +Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table. + + US - ingest.us.signoz.cloud:443/v1/traces
+ + IN - ingest.in.signoz.cloud:443/v1/traces
+ + EU - ingest.eu.signoz.cloud:443/v1/traces
+ + + +Step 3. Import the tracer module where your app starts + +```jsx +const tracer = require('./tracer') +``` + + +Step 4. Start the tracer
+ +In the `async function boostrap` section of the application code, initialize the tracer as follows: + +```jsx +const tracer = require('./tracer') + +import { NestFactory } from '@nestjs/core'; +import { AppModule } from './app.module'; + // All of your application code and any imports that should leverage + // OpenTelemetry automatic instrumentation must go here. + +async function bootstrap() { + // highlight-start + await tracer.start(); + //highlight-end + const app = await NestFactory.create(AppModule); + await app.listen(3001); + } + bootstrap(); +``` + +Step 5. Run the application + +```bash +OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=
+ +```js +'use strict' +const process = require('process'); +//OpenTelemetry +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const {Resource} = require('@opentelemetry/resources'); +const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + // highlight-start + url: 'http://localhost:4318/v1/traces' + // highlight-end + } + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication' + }) + }); + + // initialize the SDK and register with the OpenTelemetry API + // this enables the API to record telemetry + sdk.start() + + // gracefully shut down the SDK on process exit + process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); + }); + + module.exports = sdk +``` + +Step 3. Import the tracer module where your app starts + +```jsx +const tracer = require('./tracer') +``` + + +Step 4. Start the tracer
+ +In the `async function boostrap` section of the application code, initialize the tracer as follows: + +```jsx +const tracer = require('./tracer') + +import { NestFactory } from '@nestjs/core'; +import { AppModule } from './app.module'; + // All of your application code and any imports that should leverage + // OpenTelemetry automatic instrumentation must go here. + +async function bootstrap() { + // highlight-start + await tracer.start(); + //highlight-end + const app = await NestFactory.create(AppModule); + await app.listen(3001); + } + bootstrap(); +``` + +Step 5. Run the application + +--- + +### Applications Deployed on Kubernetes + +For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/). + +Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps: + +Step 1. Install OpenTelemetry packages + +```bash +npm install --save @opentelemetry/api@^1.4.1 +npm install --save @opentelemetry/sdk-node@^0.39.1 +npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0 +npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1 +``` + +Step 2. Create `tracer.ts` file
+ +```js +'use strict' +const process = require('process'); +//OpenTelemetry +const opentelemetry = require('@opentelemetry/sdk-node'); +const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node'); +const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http'); +const {Resource} = require('@opentelemetry/resources'); +const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + // highlight-start + url: 'http://localhost:4318/v1/traces' + // highlight-end + } + +const traceExporter = new OTLPTraceExporter(exporterOptions); +const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication' + }) + }); + + // initialize the SDK and register with the OpenTelemetry API + // this enables the API to record telemetry + sdk.start() + + // gracefully shut down the SDK on process exit + process.on('SIGTERM', () => { + sdk.shutdown() + .then(() => console.log('Tracing terminated')) + .catch((error) => console.log('Error terminating tracing', error)) + .finally(() => process.exit(0)); + }); + + module.exports = sdk +``` + +Step 3. Import the tracer module where your app starts + +```jsx +const tracer = require('./tracer') +``` + + +Step 4. Start the tracer
+ +In the `async function boostrap` section of the application code, initialize the tracer as follows: + +```jsx +const tracer = require('./tracer') + +import { NestFactory } from '@nestjs/core'; +import { AppModule } from './app.module'; + // All of your application code and any imports that should leverage + // OpenTelemetry automatic instrumentation must go here. + +async function bootstrap() { + // highlight-start + await tracer.start(); + //highlight-end + const app = await NestFactory.create(AppModule); + await app.listen(3001); + } + bootstrap(); +``` + +Step 5. Run the application \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.styles.scss b/frontend/src/container/OnboardingContainer/APM/Python/Python.styles.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx new file mode 100644 index 0000000000..51331fbd70 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx @@ -0,0 +1,123 @@ +import './Python.styles.scss'; + +import { MDXProvider } from '@mdx-js/react'; +import { Form, Input, Select } from 'antd'; +import Header from 'container/OnboardingContainer/common/Header/Header'; +import { useState } from 'react'; + +import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; +import DjangoDocs from './md-docs/django.md'; +import FalconDocs from './md-docs/falcon.md'; +import FastAPIDocs from './md-docs/fastAPI.md'; +import FlaskDocs from './md-docs/flask.md'; +import PythonDocs from './md-docs/python.md'; + +const frameworksMap = { + django: 'Django', + fastAPI: 'Fast API', + flask: 'Flask', + falcon: 'Falcon', + other: 'Others', +}; + +export default function Python({ + activeStep, +}: { + activeStep: number; +}): JSX.Element { + const [selectedFrameWork, setSelectedFrameWork] = useState('django'); + + const [form] = Form.useForm(); + + const renderDocs = (): JSX.Element => { + switch (selectedFrameWork) { + case 'django': + return
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ Select Framework
+
+
+
+ Service Name
+
+
+
+ {renderDocs()}
+
+ + +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + + + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +Note: +Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application. + +Step 1. Create a virtual environment
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Step 4. To run your application and send data to collector in same VM: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Step 4. Run your application: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + + + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +Note: +Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application. + +Step 1. Create a virtual environment
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. To run your application and send data to collector in same VM: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +Note: +Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application. + +Step 1. Create a virtual environment
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. To run your application and send data to collector in same VM: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +Note: +Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application. + +Step 1. Create a virtual environment
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. To run your application and send data to collector in same VM: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ +```bash +python3 -m venv .venv +source .venv/bin/activate +``` + +Step 2. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + + +Step 3. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed. + +Step 4. Run your application: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+ + IN - ingest.in.signoz.cloud:443
+ + EU - ingest.eu.signoz.cloud:443
+ +Note: +Don’t run app in reloader/hot-reload mode as it breaks instrumentation. + +--- + +#### **Send traces via OTel Collector binary** + +OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way. + +You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application. + +Step 1. Install the OpenTelemetry dependencies + +```bash +pip install opentelemetry-distro==0.38b0 +pip install opentelemetry-exporter-otlp==1.17.0 +``` + +Step 2. Add automatic instrumentation + +```bash +opentelemetry-bootstrap --action=install +``` + +Step 3. To run your application and send data to collector in same VM: + +```bash +OTEL_RESOURCE_ATTRIBUTES=service.name=
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss
new file mode 100644
index 0000000000..466f47c40b
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss
@@ -0,0 +1,35 @@
+.infrastructure-monitoring-module-container {
+ padding: 48px 0;
+
+ .content-container {
+ .heading {
+ .title {
+ a {
+ color: rgb(232, 112, 64);
+ }
+ }
+ }
+
+ .subheading {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ margin-bottom: 16px;
+
+ .recevier-types {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ h1 {
+ font-size: 24px;
+ font-weight: 500;
+ }
+
+ h4 {
+ font-size: 14px;
+ font-weight: 300;
+ }
+ }
+}
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
new file mode 100644
index 0000000000..0b61a0d442
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
@@ -0,0 +1,39 @@
+import './InfrastructureMonitoring.styles.scss';
+
+import { MDXProvider } from '@mdx-js/react';
+
+import InfraMonitoringDocs from './infraMonitoringDocs.md';
+
+export default function InfrastructureMonitoring({
+ activeStep,
+}: {
+ activeStep: number;
+}): JSX.Element {
+ const docsURL = 'https://signoz.io/docs/userguide/send-metrics-cloud/';
+ const heading = 'Send Metrics to SigNoz Cloud';
+ return (
+ {renderDocsReference()}
+
+
+
+
+
+ Service Name
+ {serviceName}
+
+
+
+ Language - Framework
+
+ {language} - {framework}
+
+
+
+ Status
+
+
+ {(loading || isServiceLoading) &&
+
+
+ Details
+
+
+ {(loading || isServiceLoading) &&
+ Waiting for Update
}
+ {!(loading || isServiceLoading) && isReceivingData && (
+ Received data from the application successfully.
+ )}
+ {!(loading || isServiceLoading) && !isReceivingData && (
+ Could not detect the install
+ )}
+
+ {activeStep === 2 && (
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
new file mode 100644
index 0000000000..351c4542c6
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
@@ -0,0 +1,191 @@
+There are two ways in which you can send metrics to SigNoz using OpenTelemetry:
+
+- From your application
+- From OpenTelemetry Collector
+
+In this document, we will cover how to send metrics from OpenTelemetry Collector. The Collector is a swiss-army knife that can collect metrics from various sources and send them to SigNoz.
+
+- [Enable a Specific Metric Receiver](#enable-a-specific-metric-receiver)
+- [Enable a Prometheus Receiver](#enable-a-prometheus-receiver)
+
+## Enable a Specific Metric Receiver
+
+SigNoz supports all the receivers that are listed in the [opentelemetry-collector-contrib](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver) GitHub repository. To configure a new metric receiver, you must edit the `receivers` and `service::pipelines` sections of the `otel-collector-config.yaml` file. The following example shows the default configuration in which the `hostmetrics` receiver is enabled:
+
+```yaml {8-20,52}
+receivers:
+ otlp:
+ protocols:
+ grpc:
+ endpoint: localhost:4317
+ http:
+ endpoint: localhost:4318
+ hostmetrics:
+ collection_interval: 30s
+ scrapers:
+ cpu: {}
+ disk: {}
+ load: {}
+ filesystem: {}
+ memory: {}
+ network: {}
+ paging: {}
+ process:
+ mute_process_name_error: true
+ processes: {}
+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, ec2] # include ec2 for AWS, gce for GCP and azure for Azure.
+ # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+ timeout: 2s
+ override: false
+ system:
+ hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+exporters:
+ otlp:
+ endpoint: 'ingest.{region}.signoz.cloud:443' # replace {region} with your region
+ tls:
+ insecure: false
+ headers:
+ 'signoz-access-token': '
+
+
+
+ )}
+ {activeStep === 3 &&
+
+
+
+
+ {heading}
+ +
+ View detailed docs
+
+ here
+
+
+ Infra Monitoring Step 3
}
+ + +IN - ingest.in.signoz.cloud:443
+ +EU - ingest.eu.signoz.cloud:443
+ +To enable a new OpenTelemetry receiver, follow the steps below: + +1. Open the `otel-collector-config.yaml` file in a plain-text editor. +2. Configure your receivers. The following example shows how you can enable a `rabbitmq` receiver: + +```yaml {21-25,53} +receivers: + otlp: + protocols: + grpc: + endpoint: localhost:4317 + http: + endpoint: localhost:4318 + hostmetrics: + collection_interval: 30s + scrapers: + cpu: {} + disk: {} + load: {} + filesystem: {} + memory: {} + network: {} + paging: {} + process: + mute_process_name_error: true + processes: {} + rabbitmq: + endpoint: http://localhost:15672 + username:
+
+ )}
+ {activeStep === 3 && (
+
+
+ {type === ApplicationLogsType.FROM_LOG_FILE && {
+ const id = String(i + 1);
+
+ return {
+ label:
+
+ {language}
,
+ key: id,
+ children: renderContentForCollectingLogsOtelSDK(language),
+ };
+ })}
+ />
+ )}
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md
new file mode 100644
index 0000000000..4f65666afc
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md
@@ -0,0 +1,38 @@
+## Collect Application Logs from Log file in SigNoz cloud
+
+If you don’t already have a SigNoz cloud account, you can sign up [here](https://signoz.io/teams/).
+
+- Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
+
+- Add the filelog reciever to `config.yaml`.
+
+ ```yaml {3-15}
+ receivers:
+ ...
+ filelog/app:
+ include: [ /tmp/app.log ]
+ start_at: beginning
+ ...
+ ```
+
+ `start_at: beginning` can be removed once you are done testing.
+
+ For parsing logs of different formats you will have to use operators, you can read more about operators [here](https://signoz.io/docs/userguide/logs/#operators-for-parsing-and-manipulating-logs).
+
+ For more configurations that are available for filelog receiver please check [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/filelogreceiver).
+
+- Next we will modify our pipeline inside `config.yaml` to include the receiver we have created above.
+
+ ```yaml {4}
+ service:
+ ....
+ logs:
+ receivers: [otlp, filelog/app]
+ processors: [batch]
+ exporters: [otlp]
+ ```
+
+- Now we can restart the otel collector so that new changes are applied.
+
+- The log will be exported, if you add more lines to the log file it will be exported as well
+- If there are no errors your logs will be visible on SigNoz UI.
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
new file mode 100644
index 0000000000..dd3591d472
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
@@ -0,0 +1,33 @@
+# Collecting Application Logs Using OTEL Java Agent
+
+You can directly send your application logs to SigNoz using Java Agent provided by opentlemetry.
+In this blog we will run a sample java application and send the application logs to SigNoz.
+
+For collecting logs we will have to download the java agent from [here](https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar).
+
+To sends logs from a Java application you will have to add the agent and add the environment variables for the agent
+
+The command for it will look like
+
+```bash
+OTEL_LOGS_EXPORTER=otlp OTEL_EXPORTER_OTLP_ENDPOINT="http://+ +In the below example we will configure a java application to send logs to SigNoz. + +## How to Collect Application Logs Using OTEL Java Agent? + +- Clone this [repository](https://github.com/SigNoz/spring-petclinic) +- Build the application using `./mvnw package` +- Now run the application + + ``` + OTEL_LOGS_EXPORTER=otlp OTEL_EXPORTER_OTLP_ENDPOINT="http://
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
new file mode 100644
index 0000000000..e72a38dbf5
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
@@ -0,0 +1,70 @@
+## Collect Syslogs in SigNoz cloud
+
+### Setup Otel Collector as agent
+
+- Add `config.yaml`
+ ```yaml {22-26}
+ receivers:
+ filelog:
+ include: [/tmp/python.log]
+ start_at: beginning
+ operators:
+ - type: json_parser
+ timestamp:
+ parse_from: attributes.time
+ layout: '%Y-%m-%d,%H:%M:%S %z'
+ - type: move
+ from: attributes.message
+ to: body
+ - type: remove
+ field: attributes.time
+ processors:
+ batch:
+ send_batch_size: 10000
+ send_batch_max_size: 11000
+ timeout: 10s
+ exporters:
+ otlp:
+ endpoint: 'ingest.{region}.signoz.cloud:443'
+ tls:
+ insecure: false
+ headers:
+ 'signoz-access-token': '
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md
new file mode 100644
index 0000000000..6ec0400f98
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md
@@ -0,0 +1,66 @@
+If you use fluentBit to collect logs in your stack with this tutotrial you will be able to send logs from fluentBit to SigNoz.
+
+At SigNoz we use opentelemetry collector to recieve logs which supports the fluentforward protocol. So you can forward your logs from your fluentBit agent to opentelemetry collector using fluentforward protocol.
+
+### Collect Logs Using FluentBit in SigNoz cloud
+
+- Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
+- Add fluentforward reciever to your `config.yaml`
+
+ ```yaml
+ receivers:
+ fluentforward:
+ endpoint: 0.0.0.0:24224
+ ```
+
+ Here we have used port 24224 for listing in fluentforward protocol, but you can change it to a port you want.
+ You can read more about fluentforward receiver [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/fluentforwardreceiver).
+
+- Modify your `config.yaml` and add the above receiver
+ ```yaml {4}
+ service:
+ ....
+ logs:
+ receivers: [otlp, fluentforward]
+ processors: [batch]
+ exporters: [otlp]
+ ```
+- Change the fluentBit config to forward the logs to otel collector.
+
+ ```
+ [INPUT]
+ Name dummy
+ Tag dummy.log
+ Dummy {"message": "mylog", "trace_id": "0000000000000000f4dbb3edd765f620", "span_id": "43222c2d51a7abe3"}
+
+ [OUTPUT]
+ Name forward
+ Match *
+ Host otel-collector-host
+ Port 24224
+ ```
+
+ In this example we are generating sample logs and then forwarding them to the otel collector which is listening on port 24224.
+ `otel-collector-host` has to be replaced by the host where otel-collector is running. For more info check [troubleshooting](../install/troubleshooting.md#signoz-otel-collector-address-grid).
+
+- Once you make this changes you can restart fluentBit and otel-binary, and you will be able to see the logs in SigNoz.
+- To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry. [link](./logs.md#processors-available-for-processing-logs)
+
+ eg:-
+
+ ```yaml
+ processors:
+ logstransform:
+ operators:
+ - type: trace_parser
+ trace_id:
+ parse_from: attributes.trace_id
+ span_id:
+ parse_from: attributes.span_id
+ - type: remove
+ field: attributes.trace_id
+ - type: remove
+ field: attributes.span_id
+ ```
+
+ The operations in the above processor will parse the trace_id and span_id from log to opentelemetry log model and remove them from attributes.
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md
new file mode 100644
index 0000000000..0f383b2c89
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md
@@ -0,0 +1,79 @@
+If you use fluentD to collect logs in your stack with this tutotrial you will be able to send logs from fluentD to SigNoz.
+
+At SigNoz we use opentelemetry collector to recieve logs which supports the fluentforward protocol. So you can forward your logs from your fluentD agent to opentelemetry collector.
+
+### Collect Logs Using FluentD in SigNoz cloud
+
+- Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
+
+- Add fluentforward reciever to your `config.yaml`
+
+ ```yaml
+ receivers:
+ fluentforward:
+ endpoint: 0.0.0.0:24224
+ ```
+
+ Here we have used port 24224 for listing in fluentforward protocol, but you can change it to a port you want.
+ You can read more about fluentforward receiver [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/fluentforwardreceiver).
+
+- Modify your `config.yaml` and add the above receiver
+
+ ```yaml {4}
+ service:
+ ....
+ logs:
+ receivers: [otlp, fluentforward]
+ processors: [batch]
+ exporters: [otlp]
+ ```
+
+- Change the fluentD config to forward the logs to otel collector.
+
+ ```
+
+
+
+
+
+ Select Framework
+
+
+ {renderDocs()}
+
+
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md
new file mode 100644
index 0000000000..8f2262b52d
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md
@@ -0,0 +1,6 @@
+## Collect Kubernetes Pod Logs in SigNoz Cloud
+
+To collect logs from your kubernetes cluster, you will need to deploy k8s-infra chart. Please follow the guide [here](/docs/tutorial/kubernetes-infra-metrics/). Log collection of pods from all namespaces is enabled by default except for pods in `kube-system` and `hotrod`. To modify the log collection mechanism, please follow the guides below.
+
+- [Disable automatic pod logs collection](#steps-to-disable-automatic-pod-logs-collection)
+- [Filter/Exclude logs collection](#steps-to-filterexclude-logs-collection)
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.styles.scss b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.styles.scss
new file mode 100644
index 0000000000..17db6c183a
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.styles.scss
@@ -0,0 +1,152 @@
+.logs-management-module-container {
+ min-height: calc(100vh - 300px);
+ padding: 48px 0;
+
+ .header {
+ h1 {
+ font-size: 24px;
+ font-weight: 500;
+ }
+
+ h4 {
+ font-size: 14px;
+ font-weight: 300;
+ }
+ }
+}
+
+.supported-logs-type-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 24px;
+}
+
+.supported-logs-type {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 16px;
+ width: 300px;
+ padding: 16px;
+ box-sizing: border-box;
+ height: 120px;
+ background: #1d1d1d;
+ border: 1px solid #424242;
+ border-radius: 3px;
+ color: #e5e7eb;
+ cursor: pointer;
+
+ &.selected {
+ background-color: #111a2c;
+ border: 0.5px solid #3c89e8;
+ }
+}
+
+.supported-logs-type-img {
+ height: 36px;
+}
+
+.selected-logs-type-setup-instructions {
+ padding: 24px 0;
+}
+
+div[class*='-setup-instructions-container'] {
+ .header {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+
+ margin: 16px 0;
+
+ img {
+ height: 32px;
+ min-height: 32px;
+ min-width: 32px;
+ }
+
+ h1 {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ color: #e5e7eb;
+ gap: 16px;
+ margin: 0;
+ }
+ }
+}
+
+.label {
+ font-size: 14px;
+ margin-bottom: 8px;
+ font-weight: 300;
+}
+
+pre {
+ background-color: #292d3e;
+ padding: 8px;
+ overflow: auto;
+ border-radius: 3px;
+
+ code {
+ overflow: auto;
+ text-wrap: wrap;
+ }
+}
+
+.content-container {
+ padding: 24px;
+ margin: 16px 0;
+ background: rgba(29, 29, 29, 1);
+ line-height: 20px;
+}
+
+.detailed-docs-link {
+ display: flex;
+ margin: 8px 0;
+ font-size: 12px;
+
+ a {
+ padding-left: 4px;
+ }
+}
+
+.language-tab-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ height: 28px;
+ }
+}
+
+$lightModeFontColor: rgb(29, 29, 29);
+
+.lightMode {
+ .logs-management-module-container {
+ .header {
+ color: $lightModeFontColor;
+ }
+
+ div[class*='-setup-instructions-container'] {
+ .header {
+ h1 {
+ color: $lightModeFontColor;
+ }
+ }
+
+ .framework-selector {
+ .label {
+ color: $lightModeFontColor;
+ }
+ }
+
+ .service-name-container {
+ .label {
+ color: $lightModeFontColor;
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
new file mode 100644
index 0000000000..e880452ac5
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
@@ -0,0 +1,130 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import './LogsManagement.styles.scss';
+
+import cx from 'classnames';
+import { useState } from 'react';
+
+import ApplicationLogs from './ApplicationLogs/ApplicationLogs';
+import Docker from './Docker/Docker';
+import ExistingCollectors from './ExistingCollectors/ExistingCollectors';
+import Kubernetes from './Kubernetes/Kubernetes';
+import Nodejs from './Nodejs/Nodejs';
+import SysLogs from './SysLogs/SysLogs';
+
+const supportedLogTypes = [
+ {
+ name: 'Kubernetes Pod Logs',
+ id: 'kubernetes',
+ imgURL: `Logos/kubernetes.svg`,
+ },
+ {
+ name: 'Docker Container Logs',
+ id: 'docker',
+ imgURL: `Logos/docker.svg`,
+ },
+ {
+ name: 'SysLogs',
+ id: 'syslogs',
+ imgURL: `Logos/syslogs.svg`,
+ },
+ {
+ name: 'Application Logs',
+ id: 'application_logs_log_file',
+ imgURL: `Logos/software-window.svg`,
+ },
+ {
+ name: 'NodeJS Winston Logs ',
+ id: 'nodejs',
+ imgURL: `Logos/node-js.svg`,
+ },
+ {
+ name: 'Application Logs using OTEL SDK',
+ id: 'application_logs_otel_sdk',
+ imgURL: `Logos/cmd-terminal.svg`,
+ },
+ {
+ name: 'Logs from existing collectors',
+ id: 'existing_collectors',
+ imgURL: `Logos/cmd-terminal.svg`,
+ },
+];
+
+export default function LogsManagement({
+ activeStep,
+ handleLogTypeSelect,
+}: {
+ activeStep: number;
+ handleLogTypeSelect: (id: string) => any;
+}): JSX.Element {
+ const [selectedLogsType, setSelectedLogsType] = useState('kubernetes');
+
+ const renderSelectedLanguageSetupInstructions = ():
+ | JSX.Element
+ | undefined => {
+ switch (selectedLogsType) {
+ case 'kubernetes':
+ return
+ {activeStep === 2 && (
+ <>
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
new file mode 100644
index 0000000000..5ebc044205
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
@@ -0,0 +1,38 @@
+import { MDXProvider } from '@mdx-js/react';
+import Header from 'container/OnboardingContainer/common/Header/Header';
+
+import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
+import Post from './nodejs.md';
+
+export default function Nodejs({
+ activeStep,
+}: {
+ activeStep: number;
+}): JSX.Element {
+ return (
+ <>
+ {activeStep === 2 && (
+
+
+
+ Select a Logs type
+Choose the logs that you want to receive on SigNoz
+
+ {supportedLogTypes.map((logType) => (
+
+
+ )}
+
+ {selectedLogsType && (
+ {
+ handleLogTypeSelect(logType.id);
+ setSelectedLogsType(logType.id);
+ }}
+ >
+ 
+
+
+ ))}
+
+
+ {logType.name}
+
+ {renderSelectedLanguageSetupInstructions()}
+
+ )}
+
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/nodejs.md b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/nodejs.md
new file mode 100644
index 0000000000..eebc1c1876
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/nodejs.md
@@ -0,0 +1,29 @@
+# Collecting NodeJS winston logs
+
+If you are using `winston` as your logging library in your Nodejs application, you can export these logs to SigNoz very easily using various transports provided by `winston`.
+
+## Collecting Nodejs logs when application is deployed on Docker or Kubernetes
+
+When your application is deployed in Docker or a Kubernetes cluster the logs from the console are automatically collected and stored in the node. The SigNoz collector will automatically collect the logs and it will be visible on the SigNoz UI.
+
+You can add a console transport very easily as stated here.
+
+```
+logger.add(new winston.transports.Console(options));
+```
+
+## Collecting Nodejs logs when application is deployed on a Host
+
+When you run your application directly on the host, you will be required to add a intermediary medium ex:- a file, where you can export your logs and the otel-collector can read them and push to signoz.
+
+You can add a file transport very easily as stated here.
+
+```
+logger.add(new winston.transports.File(options));
+```
+
+Once you run your application and the logs are added to a file, you can configure otel collector to read from that file.
+
+For configuring it you can follow the guide [here](./collecting_application_logs_file.md#collecting-application-logs-from-log-file).
+
+Once you configure the otel collector the logs will be visible on the UI.
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
new file mode 100644
index 0000000000..eb00380e44
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
@@ -0,0 +1,38 @@
+import { MDXProvider } from '@mdx-js/react';
+import Header from 'container/OnboardingContainer/common/Header/Header';
+
+import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
+import Post from './syslogs.md';
+
+export default function SysLogs({
+ activeStep,
+}: {
+ activeStep: number;
+}): JSX.Element {
+ return (
+ <>
+ {activeStep === 2 && (
+
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md
new file mode 100644
index 0000000000..32ed6eb13f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md
@@ -0,0 +1,83 @@
+## Collect Syslogs in SigNoz cloud
+
+If you don’t already have a SigNoz cloud account, you can sign up [here](https://signoz.io/teams/).
+
+
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/Onboarding.styles.scss b/frontend/src/container/OnboardingContainer/Onboarding.styles.scss
new file mode 100644
index 0000000000..668fc5a78f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Onboarding.styles.scss
@@ -0,0 +1,119 @@
+.container {
+ width: 100%;
+ max-width: 1440px;
+ margin: 0 auto;
+
+ &.darkMode {
+ }
+
+ &.lightMode {
+ .onboardingHeader {
+ color: #1d1d1d;
+ }
+ }
+}
+
+.moduleSelectContainer {
+ width: 100%;
+}
+
+.onboardingContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ color: #e5e7eb;
+}
+
+.onboardingHeader {
+ text-align: center;
+ margin-top: 48px;
+ margin-bottom: 24px;
+}
+
+.onboardingHeader h1 {
+ font-size: 24px;
+ font-weight: 500;
+}
+
+.modulesContainer {
+ display: block;
+ padding: 24px;
+}
+
+.moduleContainerRowStyles {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 36px;
+ margin: 36px;
+}
+
+.moduleStyles {
+ padding: 0;
+ box-sizing: border-box;
+ cursor: pointer;
+ width: 400px;
+
+ .ant-card-body {
+ padding: 0px;
+ }
+}
+
+.moduleTitleStyle {
+ font-size: 16px;
+ font-weight: 500;
+ padding: 16px;
+ margin: 0px !important;
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.moduleStyles.selected {
+ border: 1px solid rgb(232, 112, 64, 0.6) !important;
+
+ .moduleTitleStyle {
+ border-bottom: 1px solid rgb(232, 112, 64, 0.6) !important;
+ }
+}
+
+.moduleDesc {
+ padding: 24px;
+ margin: 0px !important;
+ min-height: 100px;
+}
+
+.modules-container {
+ display: flex;
+}
+
+.continue-to-next-step {
+ display: flex;
+ justify-content: center;
+ margin: 48px 0;
+}
+
+.stepsContainer {
+ position: relative;
+ height: 100%;
+ padding: 48px;
+}
+
+.actionButtonsContainer {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 48px;
+ box-sizing: border-box;
+ bottom: 0;
+}
+
+.ant-steps-item-description {
+ font-size: 12px !important;
+ max-width: 100% !important;
+}
diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
new file mode 100644
index 0000000000..edee0cb70f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
@@ -0,0 +1,279 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import './Onboarding.styles.scss';
+
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { Button, Card, StepProps, Steps, Typography } from 'antd';
+import cx from 'classnames';
+import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import history from 'lib/history';
+import { useEffect, useState } from 'react';
+
+import APM from './APM/APM';
+import InfrastructureMonitoring from './InfrastructureMonitoring/InfrastructureMonitoring';
+import LogsManagement from './LogsManagement/LogsManagement';
+
+enum ModulesMap {
+ APM = 'APM',
+ LogsManagement = 'LogsManagement',
+ InfrastructureMonitoring = 'InfrastructureMonitoring',
+}
+
+const defaultStepDesc = 'Configure data source';
+const getStarted = 'Get Started';
+const selectUseCase = 'Select the use-case';
+const instrumentApp = 'Instrument Application';
+const testConnection = 'Test Connection';
+const verifyConnectionDesc = 'Verify that you’ve instrumented your application';
+
+const verifyableLogsType = ['kubernetes', 'docker'];
+
+interface ModuleProps {
+ id: string;
+ title: string;
+ desc: string;
+ stepDesc: string;
+}
+
+const useCases = {
+ APM: {
+ id: ModulesMap.APM,
+ title: 'Application Monitoring',
+ desc:
+ 'Monitor performance of your applications & troubleshoot problems by installing within your infra.',
+ stepDesc: defaultStepDesc,
+ },
+ LogsManagement: {
+ id: ModulesMap.LogsManagement,
+ title: 'Logs Management',
+ desc:
+ 'Easily search and filter logs with query builder and automatically detect logs from K8s cluster.',
+ stepDesc: 'Choose the logs that you want to receive on SigNoz',
+ },
+ InfrastructureMonitoring: {
+ id: ModulesMap.InfrastructureMonitoring,
+ title: 'Infrastructure Monitoring',
+ desc:
+ 'Easily search and filter logs with query builder and automatically detect logs from K8s cluster.',
+ stepDesc: defaultStepDesc,
+ },
+};
+
+const defaultSteps: StepProps[] = [
+ {
+ title: getStarted,
+ description: selectUseCase,
+ },
+ {
+ title: instrumentApp,
+ description: defaultStepDesc,
+ },
+ {
+ title: testConnection,
+ description: verifyConnectionDesc,
+ },
+];
+
+export default function Onboarding(): JSX.Element {
+ const [selectedModule, setSelectedModule] = useState{renderDocsReference()}
+
+
+
+
+
+ Logs Type
+ {logType}
+
+
+ Status
+
+
+ {(loading || isFetching) &&
+
+
+ Details
+
+
+ {(loading || isFetching) &&
+ Waiting for Update
}
+ {!(loading || isFetching) && isReceivingData && (
+ Received logs successfully.
+ )}
+ {!(loading || isFetching) && !isReceivingData && (
+ Could not detect the logs
+ )}
+
+ {activeStep === 1 && (
+ <>
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/common/Header/Header.tsx b/frontend/src/container/OnboardingContainer/common/Header/Header.tsx
new file mode 100644
index 0000000000..685060ca1e
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/common/Header/Header.tsx
@@ -0,0 +1,33 @@
+import cx from 'classnames';
+
+interface HeaderProps {
+ entity: string;
+ heading: string;
+ imgURL: string;
+ docsURL: string;
+ imgClassName: string;
+}
+
+export default function Header({
+ entity,
+ heading,
+ imgURL,
+ docsURL,
+ imgClassName,
+}: HeaderProps): JSX.Element {
+ return (
+
+
+
+ Get Started with SigNoz
+ Select a use-case to get started
+
+
+
+
+ {Object.keys(ModulesMap).map((module) => {
+ const selectedUseCase = (useCases as any)[module];
+
+ return (
+ handleModuleSelect(selectedUseCase)}
+ >
+
+ {selectedUseCase.title}
+
+
+ {selectedUseCase.desc}
+
+
+ );
+ })}
+
+
+ } onClick={handleNext}>
+ Continue to next step
+
+
+
+ )}
+
+ {activeStep > 1 && (
+
+
+ )}
+
+ {selectedModule.id === ModulesMap.APM &&
+
+
+ {activeStep > 0 && (
+ } onClick={handlePrev}>
+ Back
+
+ )}
+
+ {activeStep < steps.length && (
+ }
+ onClick={handleNext}
+ >
+ Continue to next step
+
+ )}
+
+ {activeStep === steps.length && (
+
+ )}
+
+
+ 
+
+ );
+}
diff --git a/frontend/src/container/OnboardingContainer/index.tsx b/frontend/src/container/OnboardingContainer/index.tsx
new file mode 100644
index 0000000000..ec214b1380
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/index.tsx
@@ -0,0 +1,3 @@
+import OnboardingContainer from './OnboardingContainer';
+
+export default OnboardingContainer;
diff --git a/frontend/src/container/OnboardingContainer/typings.d.ts b/frontend/src/container/OnboardingContainer/typings.d.ts
new file mode 100644
index 0000000000..30a8ef69eb
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '*.md' {
+ const content: string;
+ export = content;
+}
diff --git a/frontend/src/container/PageSizeSelect/index.tsx b/frontend/src/container/PageSizeSelect/index.tsx
index 835549ddaa..21e408f4ce 100644
--- a/frontend/src/container/PageSizeSelect/index.tsx
+++ b/frontend/src/container/PageSizeSelect/index.tsx
@@ -1,5 +1,5 @@
import { Col, Row, Select } from 'antd';
-import { queryParamNamesMap } from 'constants/queryBuilderQueryNames';
+import { QueryParams } from 'constants/query';
import {
defaultSelectStyle,
ITEMS_PER_PAGE_OPTIONS,
@@ -14,7 +14,7 @@ function PageSizeSelect({
isShow,
}: PageSizeSelectProps): JSX.Element | null {
const { redirectWithQuery, queryData: pageSize } = useUrlQueryData
+
+
+ {heading}
+ +
+ View detailed docs
+
+ here
+
+
+ {label}
- {tags.map((tag) => (
-
{selectedFilter.length !== 0 && selectedGroup.length === 0 ? (
-
) : (
diff --git a/frontend/src/container/TriggeredAlerts/index.tsx b/frontend/src/container/TriggeredAlerts/index.tsx
index 379c0b1106..106be51fda 100644
--- a/frontend/src/container/TriggeredAlerts/index.tsx
+++ b/frontend/src/container/TriggeredAlerts/index.tsx
@@ -1,91 +1,43 @@
import getTriggeredApi from 'api/alerts/getTriggered';
import Spinner from 'components/Spinner';
-import { State } from 'hooks/useFetch';
-import { useNotifications } from 'hooks/useNotifications';
-import { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PayloadProps } from 'types/api/alerts/getTriggered';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useAxiosError from 'hooks/useAxiosError';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
import TriggerComponent from './TriggeredAlert';
function TriggeredAlerts(): JSX.Element {
- const [groupState, setGroupState] = useState
+
+ );
+}
+
+export default OnboardingPage;
diff --git a/frontend/src/pages/OnboardingPage/index.tsx b/frontend/src/pages/OnboardingPage/index.tsx
new file mode 100644
index 0000000000..779b534384
--- /dev/null
+++ b/frontend/src/pages/OnboardingPage/index.tsx
@@ -0,0 +1,3 @@
+import OnboardingPage from './OnboardingPage';
+
+export default OnboardingPage;
diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx
index f102c8f97d..d1cdccccf4 100644
--- a/frontend/src/pages/SignUp/SignUp.tsx
+++ b/frontend/src/pages/SignUp/SignUp.tsx
@@ -5,7 +5,9 @@ import loginApi from 'api/user/login';
import signUpApi from 'api/user/signup';
import afterLogin from 'AppRoutes/utils';
import WelcomeLeftContainer from 'components/WelcomeLeftContainer';
+import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes';
+import useFeatureFlag from 'hooks/useFeatureFlag';
import { useNotifications } from 'hooks/useNotifications';
import history from 'lib/history';
import { useEffect, useState } from 'react';
@@ -14,7 +16,7 @@ import { useQuery } from 'react-query';
import { useLocation } from 'react-router-dom';
import { SuccessResponse } from 'types/api';
import { PayloadProps } from 'types/api/user/getUser';
-import * as loginPrecheck from 'types/api/user/loginPrecheck';
+import { PayloadProps as LoginPrecheckPayloadProps } from 'types/api/user/loginPrecheck';
import {
ButtonContainer,
@@ -41,7 +43,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
const { t } = useTranslation(['signup']);
const [loading, setLoading] = useState(false);
- const [precheck, setPrecheck] = useState