feat: instrumented otel with SigNoz backend

Author: Calm-Rock

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

README.md

@@ -0,0 +1,59 @@
+# Electron OpenTelemetry Example Application
+
+This Electron application demonstrates basic OpenTelemetry instrumentation for monitoring and tracing, designed to work with SigNoz Cloud for visualization. It showcases how to trace application startup, simulate long-running tasks, read file contents, and handle user interactions with OpenTelemetry in an Electron app.
+
+## Application Screenshot
+
+![Application Screenshot](PATH_TO_YOUR_APPLICATION_SCREENSHOT)
+
+This screenshot shows the Electron application's interface.
+
+## Backend Traces Screenshot in SigNoz Cloud
+
+![Backend Traces Screenshot in SigNoz Cloud](PATH_TO_YOUR_BACKEND_TRACES_SCREENSHOT)
+
+The above screenshot displays the traces as they appear in SigNoz Cloud. This visualizes the telemetry data collected from the application, including trace details for application startup, simulated tasks, and user actions.
+
+## Getting Started
+
+To run this Electron OpenTelemetry example application on your system and visualize traces in SigNoz Cloud, follow the steps outlined below. These instructions assume you have Node.js and npm installed. If not, please install them from [Node.js official site](https://nodejs.org/).
+
+### 1. Clone the Repository
+
+First, clone the repository to your local machine:
+
+```bash
+git clone https://github.com/YOUR_GITHUB/YOUR_REPOSITORY.git
+cd YOUR_REPOSITORY
+```
+
+### 2. Install Dependencies
+
+Inside the project directory, install the necessary dependencies:
+
+```bash
+npm install
+```
+
+### 3. Run the Application
+
+Once the dependencies are installed, you can start the Electron application with:
+
+```bash
+npm start
+```
+
+This command launches the Electron app window and begins tracing application activities.
+
+### 4. View Traces in SigNoz Cloud
+To view the traces generated by your application:
+
+- Ensure your SigNoz Cloud instance is up and running and correctly configured in `tracing.js`.
+- Perform actions within the application (e.g., clicking the demonstrated button, and waiting for the application to read the file content).
+- Access your SigNoz Cloud dashboard **Service Tab** to view your application.
+
+You should see a service called `electronjs-otel-sample-app` in your Service Tab. You can change the name of your service in your `tracing.js`.
+
+--------------------------------
+
+Read the comments in `tracing.js` and `index.js` files to get a better understanding of how the instrument works. OpenTelemetry doesn't provide auto-instrumentation for ElectronJS so you have to manually instrument all the functions that you want to collect the traces for. 

example.txt

@@ -0,0 +1 @@
+Hello, this is a test file for the Electron instrumentation example with SigNoz.

index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Electron Tracing Example</title>
+</head>
+<body>
+  <h1>Electron OpenTelemetry Tracing</h1>
+  <button id="myButton">Click Me</button>
+  <script src="renderer.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,97 @@
+// Import necessary modules from Electron, the file system, and the path utility.
+const { app, BrowserWindow, ipcMain } = require('electron');
+const fs = require('fs').promises;
+const path = require('path');
+// Import the OpenTelemetry tracer you've configured in tracing.js for creating spans.
+const tracer = require('./tracing');
+
+// Defines an asynchronous function to simulate a time-consuming task.
+async function simulateLongRunningTask() {
+  // Start a new span for tracing this task.
+  const span = tracer.startSpan('simulateLongRunningTask');
+  try {
+    // Simulate a delay of 2000 milliseconds (2 seconds).
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    // Record an event indicating the task is completed.
+    span.addEvent('Task completed');
+  } catch (error) {
+    // Record any exceptions that occur during the task.
+    span.recordException(error);
+  } finally {
+    // End the span once the task is complete or if an error occurred.
+    span.end();
+  }
+}
+
+// Defines an asynchronous function to read the contents of a file named 'example.txt'.
+async function readFileContents() {
+  // Start a new span for tracing the file reading operation.
+  const span = tracer.startSpan('readFileContents');
+  try {
+    // Read the contents of the file asynchronously.
+    const data = await fs.readFile(path.join(__dirname, 'example.txt'), 'utf8');
+    // Log the data to the console.
+    console.log(data);
+    // Record an event indicating the file was read successfully.
+    span.addEvent('File read successfully');
+  } catch (error) {
+    // Record any exceptions that occur while reading the file.
+    span.recordException(error);
+    console.error('Error reading file:', error);
+  } finally {
+    // End the span once the operation is complete or if an error occurred.
+    span.end();
+  }
+}
+
+// Defines an asynchronous function to create a new browser window and load the HTML file.
+async function createWindow() {
+  // Start a new span for tracing the application startup process.
+  const span = tracer.startSpan('ApplicationStart');
+  // Create a new browser window with specific dimensions and web preferences.
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false, // Important for security, see Electron documentation.
+    },
+  });
+  // Load an HTML file into the window.
+  win.loadFile('index.html');
+
+  // Perform additional tasks as part of the startup process.
+  await simulateLongRunningTask();
+  await readFileContents();
+
+  // End the span for the application startup process.
+  span.end();
+}
+
+// Listen for the 'whenReady' event to create the browser window.
+app.whenReady().then(createWindow);
+
+// Listen for 'button-click' messages sent from renderer processes.
+ipcMain.on('button-click', async () => {
+  // Start a new span for tracing the button click action.
+  const span = tracer.startSpan('buttonClick');
+  try {
+    // Simulate processing related to the button click.
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    // Record an event indicating the action related to the button click is completed.
+    span.addEvent('Button action completed');
+  } catch (error) {
+    // Record any exceptions that occur during the processing.
+    span.recordException(error);
+  } finally {
+    // End the span once the action is complete or if an error occurred.
+    span.end();
+  }
+});
+
+// Listen for the 'window-all-closed' event to quit the application on non-macOS platforms.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});