Add spans example

.github/workflows/ci.yml

@@ -96,6 +96,7 @@ jobs:
           - JavaScript/langchain
           - JavaScript/openai-automated
           - JavaScript/openai-manual
+          - JavaScript/spans
 
     defaults:
       run:

JavaScript/spans/README.md

@@ -0,0 +1,60 @@
+<!-- banner start -->
+<p align="center">
+  <img src="https://app.autoblocks.ai/images/logo.png" width="300px">
+</p>
+
+<p align="center">
+  📚
+  <a href="https://docs.autoblocks.ai/">Documentation</a>
+  &nbsp;
+  •
+  &nbsp;
+  🖥️
+  <a href="https://app.autoblocks.ai/">Application</a>
+  &nbsp;
+  •
+  &nbsp;
+  🏠
+  <a href="https://www.autoblocks.ai/">Home</a>
+</p>
+<!-- banner end -->
+
+## Getting started
+
+- Sign up for an Autoblocks account at https://app.autoblocks.ai
+- Grab your Autoblocks ingestion key from https://app.autoblocks.ai/settings/api-keys
+- Create a file named `.env` in this folder and include the following environment variables:
+
+```
+AUTOBLOCKS_INGESTION_KEY=<your-ingestion-key>
+```
+
+## Creating spans
+
+This example shows how you can establish parent / child relationships between your events by sending the `spanId` and `parentSpanId` properties.
+
+## Install dependencies
+
+```
+npm install
+```
+
+## Run the script
+
+```
+npm run start
+```
+
+## View the trace tree
+
+Go to the [explore page](https://app.autoblocks.ai/explore) and find the trace, then switch to the Trace Tree view. You should see something like this:
+
+![rag-span](https://github.com/autoblocksai/autoblocks-examples/assets/7498009/e5a0f0d9-8460-49a6-a8aa-d707d14323a6)
+
+Within the RAG span, we made two embeddings calls: these are both children of the RAG span.
+
+![embedding-span](https://github.com/autoblocksai/autoblocks-examples/assets/7498009/7f9c4b4a-8704-4f7c-97b0-fd9acfc01932)
+
+Then there is the LLM span at the end, which is not a child of the RAG span because we ended the RAG span before starting the LLM span:
+
+![llm-span](https://github.com/autoblocksai/autoblocks-examples/assets/7498009/682d5d57-b343-4d5a-851a-e4aa9acef867)

JavaScript/spans/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "spans",
+  "version": "0.0.0",
+  "description": "Establish parent / child relationships between your events with the `spanId` and `parentSpanId` properties",
+  "type": "module",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "dotenv -e .env -- node ./src/index.js"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@autoblocks/client": "^0.0.15",
+    "dotenv-cli": "^7.3.0"
+  }
+}

JavaScript/spans/src/index.js

@@ -0,0 +1,85 @@
+import crypto from 'crypto';
+import { AutoblocksTracer } from '@autoblocks/client';
+
+const tracer = new AutoblocksTracer(process.env.AUTOBLOCKS_INGESTION_KEY, {
+  traceId: crypto.randomUUID(),
+  properties: {
+    provider: 'openai',
+  },
+});
+
+const spanStack = [];
+
+function startSpan() {
+  spanStack.push(crypto.randomUUID());
+  setSpanIds();
+}
+
+function endSpan() {
+  if (spanStack.length > 0) {
+    spanStack.pop();
+    setSpanIds();
+  }
+}
+
+function setSpanIds() {
+  let spanId = undefined;
+  let parentSpanId = undefined;
+
+  if (spanStack.length >= 2) {
+    spanId = spanStack[spanStack.length - 1];
+    parentSpanId = spanStack[spanStack.length - 2];
+  } else if (spanStack.length === 1) {
+    spanId = spanStack[0];
+  }
+
+  tracer.updateProperties({ spanId, parentSpanId });
+}
+
+const spanFunction = async (fn) => {
+  startSpan();
+  await fn();
+  endSpan();
+};
+
+async function makeEmbeddingRequest() {
+  await tracer.sendEvent('ai.embedding.request');
+
+  // Make embedding request...
+
+  await tracer.sendEvent('ai.embedding.response');
+}
+
+async function startRAGPipeline() {
+  await tracer.sendEvent('ai.rag.start');
+
+  // Simulate making multiple embedding requests within a RAG pipeline
+  await spanFunction(makeEmbeddingRequest);
+  await spanFunction(makeEmbeddingRequest);
+
+  await tracer.sendEvent('ai.rag.end');
+}
+
+async function makeLLMRequest() {
+  // Here we would use the RAG response to generate a prompt for the LLM
+
+  await tracer.sendEvent('ai.completion.request', {
+    properties: {
+      temperature: 0.5,
+      topP: 1,
+    },
+  });
+
+  await tracer.sendEvent('ai.completion.response', {
+    properties: {
+      totalTokens: 123,
+    },
+  });
+}
+
+async function run() {
+  await spanFunction(startRAGPipeline);
+  await spanFunction(makeLLMRequest);
+}
+
+run();