+ {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=
+ 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) + +7. You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](#validating-instrumentation-by-checking-for-traces). + +
+ 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) + +7. You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](#validating-instrumentation-by-checking-for-traces). + +
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ Select Framework
+
+
+
+ Service Name
+
+
+
+ {renderDocs()}
+
+ + +```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.
+- `
+ +```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.
+ +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. + +You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](#validating-instrumentation-by-checking-for-traces). 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..d373931072 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md @@ -0,0 +1,81 @@ +## 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=
+ +```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
+ +```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. + +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). 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..1d089e431a --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx @@ -0,0 +1,121 @@ +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 AngularDocs from './md-docs/angular.md'; +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', + angular: 'Angular', + other: 'Others', +}; + +export default function Javascript({ + activeStep, +}: { + activeStep: number; +}): JSX.Element { + const [selectedFrameWork, setSelectedFrameWork] = useState('express'); + + const [form] = Form.useForm(); + + const renderDocs = (): JSX.Element => { + switch (selectedFrameWork) { + case 'express': + return
+
+ )}
+ {activeStep === 3 && (
+
+
+
+
+
+
+ Select Framework
+
+
+
+ Service Name
+
+
+
+ {renderDocs()}
+
+ + We start by installing the relevant dependencies. + + ```bash + npm install --save @opentelemetry/sdk-node + npm install --save @opentelemetry/auto-instrumentations-node + npm install --save @opentelemetry/exporter-trace-otlp-http + ``` + + The dependencies included are briefly explained below:
+ + `@opentelemetry/sdk-node` - This package provides the full OpenTelemetry SDK for Node.js including tracing and metrics.
+ + `@opentelemetry/auto-instrumentations-node` - This module provides a simple way to initialize multiple Node instrumentations.
+ + `@opentelemetry/exporter-trace-otlp-http` - This module provides the exporter to be used with OTLP (`http/json`) compatible receivers.
+ +
+ The `tracing.js` file will contain the tracing setup code. Notice, that we have set some environment variables in the code(highlighted). You can update these variables based on your environment. + +````jsx + // 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 = { + // highlight-next-line + url: 'http://localhost:4318/v1/traces' + } + + const traceExporter = new OTLPTraceExporter(exporterOptions); + const sdk = new opentelemetry.NodeSDK({ + traceExporter, + instrumentations: [getNodeAutoInstrumentations()], + // highlight-start + resource: new Resource({ + [SemanticResourceAttributes.SERVICE_NAME]: 'node_app' + }) + // highlight-end + }); + + // 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)); + }); + ``` + + OpenTelemetry Node SDK currently does not detect the `OTEL_RESOURCE_ATTRIBUTES` from `.env` files as of today. That’s why we need to include the variables in the `tracing.js` file itself. + + About environment variables: + + `service_name` : node_app (you can give whatever name that suits you) + + `http://localhost:4318/v1/traces` is the default url for sending your tracing data. We are assuming you have installed SigNoz on your `localhost`. Based on your environment, you can update it accordingly. It should be in the following format: + + `http://
+The tracing configuration should be run before your application code. We will use the [`-r, —require module`](https://nodejs.org/api/cli.html#cli_r_require_module) flag for that.
+ +```jsx + node -r ./tracing.js app.js + ``` + +:::note +If you're running your nodejs application in PM2 cluster mode, it doesn't support node args: [Unitech/pm2#3227](https://github.com/Unitech/pm2/issues/3227). As above sample app instrumentation requires to load `tracing.js` before app load by passing node arg, so nodejs instrumentation doesn't work in PM2 cluster mode. So you need to import `tracing.js` in your main application. The `import ./tracing.js` should be the first line of your application code and initialize it before any other function. Here's the [sample github repo](https://github.com/SigNoz/sample-nodejs-app/tree/init-tracer-main) which shows the implementation. +::: + +### Validating instrumentation by checking for traces + +With your application running, you can verify that you’ve instrumented your application with OpenTelemetry correctly by confirming that tracing data is being reported to SigNoz. + +To do this, you need to ensure that your application generates some data. Applications will not produce traces unless they are being interacted with, and OpenTelemetry will often buffer data before sending. So you need to interact with your application and wait for some time to see your tracing data in SigNoz. + +Validate your traces in SigNoz: + +1. Trigger an action in your app that generates a web request. Hit the endpoint a number of times to generate some data. Then, wait for some time. +2. In SigNoz, open the `Services` tab. Hit the `Refresh` button on the top right corner, and your application should appear in the list of `Applications`. +3. Go to the `Traces` tab, and apply relevant filters to see your application’s traces. + +You might see other dummy applications if you’re using SigNoz for the first time. You can remove it by following the docs [here](https://signoz.io/docs/operate/docker-standalone/#remove-the-sample-application). + +
+ + +If you don't see your application reported in the list of services, try our [troubleshooting](https://signoz.io/docs/install/troubleshooting/) guide. + + +### Using a specific auto-instrumentation library + +If you want to instrument only your Express framework, then you need to use the following package: + +```jsx +npm install --save @opentelemetry/instrumentation-express +```` + +Note that in the above case, you will have to install packages for all the components that you want to instrument with OpenTelemetry individually. You can find detailed instructions [here](https://signoz.io/docs/instrumentation/javascript/#using-a-specific-auto-instrumentation-library). 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..c6c155c535 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md @@ -0,0 +1,231 @@ +## Send traces to SigNoz Cloud + +Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud. + +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 + +```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-grpc@^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-grpc'); +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', +}; +// 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. + +| Region | Endpoint | +| ------ | -------------------------- | +| US | ingest.us.signoz.cloud:443 | +| IN | ingest.in.signoz.cloud:443 | +| EU | ingest.eu.signoz.cloud:443 | + +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-grpc'); +const { Resource } = require('@opentelemetry/resources'); +const { + SemanticResourceAttributes, +} = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4317', +}; + +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 +``` + +Step 4. You can validate if your application is sending traces to SigNoz cloud [here](#validating-instrumentation-by-checking-for-traces). + + +
+ +```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-grpc'); +const { Resource } = require('@opentelemetry/resources'); +const { + SemanticResourceAttributes, +} = require('@opentelemetry/semantic-conventions'); + +const exporterOptions = { + url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4317', +}; + +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 +``` + +Step 4. You can validate if your application is sending traces to SigNoz cloud [here](#validating-instrumentation-by-checking-for-traces). 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..62fadbd826 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md @@ -0,0 +1,129 @@ +## Send Traces Directly to SigNoz + +### Using the all-in-one auto-instrumentation library + +The recommended way to instrument your Nestjs application is to use the all-in-one auto-instrumentation library - `@opentelemetry/auto-instrumentations-node`. It provides a simple way to initialize multiple Nodejs instrumentations. + +Internally, it calls the specific auto-instrumentation library for components used in the application. You can see the complete list [here](https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/metapackages/auto-instrumentations-node#supported-instrumentations). + +#### Steps to auto-instrument Nestjs application + +1. Install the dependencies
+ We start by installing the relevant dependencies. + + ```bash + npm install --save @opentelemetry/sdk-node + npm install --save @opentelemetry/auto-instrumentations-node + npm install --save @opentelemetry/exporter-trace-otlp-http + ``` + +
+ 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(); + ``` + + You can now run your Nestjs application. The data captured with OpenTelemetry from your application should start showing on the SigNoz dashboard. + +### Validating instrumentation by checking for traces + +With your application running, you can verify that you’ve instrumented your application with OpenTelemetry correctly by confirming that tracing data is being reported to SigNoz. + +To do this, you need to ensure that your application generates some data. Applications will not produce traces unless they are being interacted with, and OpenTelemetry will often buffer data before sending. So you need to interact with your application and wait for some time to see your tracing data in SigNoz. + +Validate your traces in SigNoz: + +1. Trigger an action in your app that generates a web request. Hit the endpoint a number of times to generate some data. Then, wait for some time. +2. In SigNoz, open the `Services` tab. Hit the `Refresh` button on the top right corner, and your application should appear in the list of `Applications`. +3. Go to the `Traces` tab, and apply relevant filters to see your application’s traces. + +You might see other dummy applications if you’re using SigNoz for the first time. You can remove it by following the docs [here](https://signoz.io/docs/operate/docker-standalone/#remove-the-sample-application). + +
+ + +If you don't see your application reported in the list of services, try our [troubleshooting](https://signoz.io/docs/install/troubleshooting/) guide. + +### Using a specific auto-instrumentation library + +If you want to instrument only your Nestjs framework, then you need to use the following package: + +```jsx +npm install --save @opentelemetry/instrumentation-nestjs-core +``` + +Note that in the above case, you will have to install packages for all the components that you want to instrument with OpenTelemetry individually. You can find detailed instructions [here](https://signoz.io/docs/instrumentation/javascript/#using-a-specific-auto-instrumentation-library). 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 + ``` + +2. **Install the OpenTelemetry dependencies**
+ + ```bash + pip install opentelemetry-distro + pip install opentelemetry-exporter-otlp + ``` + + The dependencies included are briefly explained below: + + `opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. + + `opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz. + + :::note + 💡 The `opentelemetry-exporter-otlp` is a convenient wrapper package to install all OTLP exporters. Currently, it installs: + + - opentelemetry-exporter-otlp-proto-http + - opentelemetry-exporter-otlp-proto-grpc + + - (soon) opentelemetry-exporter-otlp-json-http + + The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter. + ::: + +3. **Add automatic instrumentation**
+ The below command inspects the dependencies of your application and installs the instrumentation packages relevant for your Django application. + + ```bash + opentelemetry-bootstrap --action=install + ``` + + :::note + 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. + ::: + +4. **Run your application**
+ In the final run command, you can configure environment variables and flags. Flags for exporters:
+ + For running your application, there are a few things that you need to keep in mind. Below are the notes: + :::note + Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. + ::: + + For running applications with application servers which are based on [pre fork model](#running-applications-with-gunicorn-uwsgi), like Gunicorn, uWSGI you have to add a post_fork hook or a @postfork decorator in your configuration. + + To start sending data to SigNoz, use the following run command: + + ```bash + OTEL_RESOURCE_ATTRIBUTES=service.name=
+ diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md new file mode 100644 index 0000000000..6e2b5b25b1 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md @@ -0,0 +1,92 @@ +## Send Traces Directly to SigNoz + +You can use OpenTelemetry to send your traces directly to SigNoz. OpenTelemetry provides a handy distro in Python that can help you get started with automatic instrumentation. We recommend using it to get started quickly. + +### Steps to auto-instrument Falcon app for traces + +1. **Create a virtual environment**
+ + ```bash + python3 -m venv .venv + source .venv/bin/activate + ``` + +2. **Install the OpenTelemetry dependencies**
+ + ```bash + pip install opentelemetry-distro + pip install opentelemetry-exporter-otlp + ``` + + The dependencies included are briefly explained below: + + `opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. + + `opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz. + + :::note + 💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs: + + - opentelemetry-exporter-otlp-proto-http + - opentelemetry-exporter-otlp-proto-grpc + + - (soon) opentelemetry-exporter-otlp-json-http + + The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter. + ::: + +3. **Add automatic instrumentation**
+ The below command inspects the dependencies of your application and installs the instrumentation packages relevant for your Falcon application. + + ```bash + opentelemetry-bootstrap --action=install + ``` + + :::note + 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. + ::: + +4. **Run your application**
+ In the final run command, you can configure environment variables and flags. Flags for exporters:
+ + For running your application, there are a few things that you need to keep in mind. Below are the notes: + :::note + Don’t run app in reloader/hot-reload mode as it breaks instrumentation. + ::: + + For running applications with application servers which are based on [pre fork model](#running-applications-with-gunicorn-uwsgi), like Gunicorn, uWSGI you have to add a post_fork hook or a @postfork decorator in your configuration. + + To start sending data to SigNoz, use the following run command: + + ```bash + OTEL_RESOURCE_ATTRIBUTES=service.name=
+ diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md new file mode 100644 index 0000000000..f1b8d4ab4e --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md @@ -0,0 +1,92 @@ +## Send Traces Directly to SigNoz + +You can use OpenTelemetry to send your traces directly to SigNoz. OpenTelemetry provides a handy distro in Python that can help you get started with automatic instrumentation. We recommend using it to get started quickly. + +### Steps to auto-instrument FastAPI app for traces + +1. **Create a virtual environment**
+ + ```bash + python3 -m venv .venv + source .venv/bin/activate + ``` + +2. **Install the OpenTelemetry dependencies**
+ + ```bash + pip install opentelemetry-distro + pip install opentelemetry-exporter-otlp + ``` + + The dependencies included are briefly explained below: + + `opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. + + `opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz. + + :::note + 💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs: + + - opentelemetry-exporter-otlp-proto-http + - opentelemetry-exporter-otlp-proto-grpc + + - (soon) opentelemetry-exporter-otlp-json-http + + The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter. + ::: + +3. **Add automatic instrumentation**
+ The below command inspects the dependencies of your application and installs the instrumentation packages relevant for your FastAPI application. + + ```bash + opentelemetry-bootstrap --action=install + ``` + + :::note + 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. + ::: + +4. **Run your application**
+ In the final run command, you can configure environment variables and flags. Flags for exporters:
+ + For running your application, there are a few things that you need to keep in mind. Below are the notes: + :::note + Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, if you use `--reload` or `reload=True`, it enables the reloader mode which breaks OpenTelemetry isntrumentation. + ::: + + For running applications with application servers which are based on [pre fork model](#running-applications-with-gunicorn-uwsgi), like Gunicorn, uWSGI you have to add a post_fork hook or a @postfork decorator in your configuration. + + To start sending data to SigNoz, use the following run command: + + ```bash + OTEL_RESOURCE_ATTRIBUTES=service.name=
+ diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md new file mode 100644 index 0000000000..f1843276ac --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md @@ -0,0 +1,92 @@ +## Send Traces Directly to SigNoz + +You can use OpenTelemetry to send your traces directly to SigNoz. OpenTelemetry provides a handy distro in Python that can help you get started with automatic instrumentation. We recommend using it to get started quickly. + +### Steps to auto-instrument Flask app for traces + +1. **Create a virtual environment**
+ + ```bash + python3 -m venv .venv + source .venv/bin/activate + ``` + +2. **Install the OpenTelemetry dependencies**
+ + ```bash + pip install opentelemetry-distro + pip install opentelemetry-exporter-otlp + ``` + + The dependencies included are briefly explained below: + + `opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. + + `opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz. + + :::note + 💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs: + + - opentelemetry-exporter-otlp-proto-http + - opentelemetry-exporter-otlp-proto-grpc + + - (soon) opentelemetry-exporter-otlp-json-http + + The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter. + ::: + +3. **Add automatic instrumentation**
+ The below command inspects the dependencies of your application and installs the instrumentation packages relevant for your Flask application. + + ```bash + opentelemetry-bootstrap --action=install + ``` + + :::note + 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. + ::: + +4. **Run your application**
+ In the final run command, you can configure environment variables and flags. Flags for exporters:
+ + For running your application, there are a few things that you need to keep in mind. Below are the notes: + :::note + Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, if you use `export Flask_ENV=development`, it enables the reloader mode which breaks OpenTelemetry instrumentation. + ::: + + For running applications with application servers which are based on [pre fork model](#running-applications-with-gunicorn-uwsgi), like Gunicorn, uWSGI you have to add a post_fork hook or a @postfork decorator in your configuration. + + To start sending data to SigNoz, use the following run command: + + ```bash + OTEL_RESOURCE_ATTRIBUTES=service.name=
+ diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md new file mode 100644 index 0000000000..3afe695cb4 --- /dev/null +++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md @@ -0,0 +1,118 @@ +## Send Traces to SigNoz Cloud + +Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud. + +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 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. Run your application + +```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..eddb069f8f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
@@ -0,0 +1,86 @@
+import './InfrastructureMonitoring.styles.scss';
+
+import { MDXProvider } from '@mdx-js/react';
+import { Tabs } from 'antd';
+
+import Prometheus from './prometheus.md';
+import SpecificReceiver from './specific-metric-receiver.md';
+
+const enum ReceiverType {
+ specific_metric_receiver = 'Specific Metric Receiver',
+ Prometheus = 'Prometheus',
+}
+
+const supportedLanguages = [
+ {
+ name: 'specific_metric_receiver',
+ label: 'Specific Metric Receiver',
+ },
+ {
+ name: 'prometheus',
+ label: 'Prometheus',
+ },
+];
+
+export default function InfrastructureMonitoring({
+ activeStep,
+}: {
+ activeStep: number;
+}): JSX.Element {
+ const renderEnableReceiverByType = (receiverType: string): JSX.Element => {
+ if (receiverType === ReceiverType.specific_metric_receiver) {
+ 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/prometheus.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/prometheus.md
new file mode 100644
index 0000000000..1b59702120
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/prometheus.md
@@ -0,0 +1,67 @@
+## Enable a Prometheus Receiver
+
+SigNoz supports all the exporters that are listed on the [Exporters and Integrations](https://prometheus.io/docs/instrumenting/exporters/) page of the Prometheus documentation. If you have a running Prometheus instance, and you expose metrics in Prometheus, then you can scrape them in SigNoz by configuring Prometheus receivers in the `receivers.prometheus.config.scrape_configs` section of the `deploy/docker/clickhouse-setup/otel-collector-metrics-config.yaml` file.
+
+To enable a Prometheus receiver, follow the steps below:
+
+1. Open the `deploy/docker/clickhouse-setup/otel-collector-metrics-config.yaml` file in a plain-text editor.
+2. Enable a new Prometheus receiver. Depending on your use case, there are two ways in which you can enable a new Prometheus exporter:
+
+ - **By creating a new job**: The following example shows how you can enable a Prometheus receiver by creating a new job named `my-new-job`:
+
+ ```yaml {15-18}
+ receivers:
+ otlp:
+ protocols:
+ grpc:
+ http:
+
+ # Data sources: metrics
+ prometheus:
+ config:
+ scrape_configs:
+ - job_name: 'otel-collector'
+ scrape_interval: 30s
+ static_configs:
+ - targets: ['otel-collector:8889']
+ - job_name: 'my-new-job'
+ scrape_interval: 30s
+ static_configs:
+ - targets: ['localhost:8080']
+ processors:
+ batch:
+ send_batch_size: 1000
+ timeout: 10s
+ # This file was truncated for brevity.
+ ```
+
+ - **By adding a new target to an existing job**: The following example shows the default `otel-collector` job to which a new target (`localhost:8080`) was added:
+
+ ```yaml {14}
+ receivers:
+ otlp:
+ protocols:
+ grpc:
+ http:
+
+ # Data sources: metrics
+ prometheus:
+ config:
+ scrape_configs:
+ - job_name: 'otel-collector'
+ scrape_interval: 30s
+ static_configs:
+ - targets: ['otel-collector:8889', 'localhost:8080']
+ processors:
+ batch:
+ send_batch_size: 1000
+ timeout: 10s
+ # This file was truncated for brevity.
+ ```
+
+ Note that all the jobs are scraped in parallel, and all targets inside a job are scraped serially. For more details about configuring jobs and targets, see the following sections of the Prometheus documentation:
+
+ - [
+
+ {
+ const id = String(i + 1);
+
+ return {
+ label:
+
+ )}
+ {activeStep === 3 &&
+
+
+ + By default, when you install SigNoz, only the + + Hostmetric receiver + + is enabled. +
+
+ Before you can query other metrics, you must first enable additional
+ receivers in SigNoz. There are two ways in which you can send metrics to
+ SigNoz using OpenTelemetry:
+
+
+
+ +
+ 1. Enable a Specific Metric Receiver
+ 2. Enable a Prometheus Receiver
+
+ {language.label}
,
+ key: id,
+ children: renderEnableReceiverByType(language.name),
+ };
+ })}
+ />
+ Infra Monitoring Step 3
}
+
+
+ )}
+ {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': '
+
+ )}
+ {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..14573812d1
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
@@ -0,0 +1,122 @@
+/* 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 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: 'Logs from existing Collectors',
+ id: 'application_logs_otel_sdk',
+ 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/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
index 4271b47690..1ef5222a53 100644
--- a/frontend/src/container/SideNav/SideNav.tsx
+++ b/frontend/src/container/SideNav/SideNav.tsx
@@ -2,6 +2,7 @@ import { CheckCircleTwoTone, WarningOutlined } from '@ant-design/icons';
import { MenuProps } from 'antd';
import getLocalStorageKey from 'api/browser/localstorage/get';
import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
+import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes';
import history from 'lib/history';
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
@@ -14,7 +15,7 @@ import AppReducer from 'types/reducer/app';
import { routeConfig, styles } from './config';
import { getQueryString } from './helper';
-import menuItems from './menuItems';
+import defaultMenuItems from './menuItems';
import { MenuItem, SecondaryMenuItemKey } from './sideNav.types';
import { getActiveMenuKeyFromPath } from './sideNav.utils';
import Slack from './Slack';
@@ -32,10 +33,29 @@ function SideNav(): JSX.Element {
const [collapsed, setCollapsed] = useState
+
+
+ {heading}
+ +
+ View detailed docs
+
+ here
+
+
+