From a426be11d2b014c415dea4395b43b652e581b9ef Mon Sep 17 00:00:00 2001
From: jonathan <joncanales2@gmail.com>
Date: Wed, 17 Jul 2024 15:27:43 -0500
Subject: [PATCH] still working out the active span."

---
 next-webstore/app/components/bookCards.jsx | 50 ++++++++++++----------
 next-webstore/app/layout.jsx               |  2 -
 next-webstore/instrumentation.ts           |  1 +
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/next-webstore/app/components/bookCards.jsx b/next-webstore/app/components/bookCards.jsx
index d3dce96..7bf678c 100644
--- a/next-webstore/app/components/bookCards.jsx
+++ b/next-webstore/app/components/bookCards.jsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Link from 'next/link';
 import { trace, SpanStatusCode } from '@opentelemetry/api';
 import BookProfile from './bookProfile';
 import { useState, useEffect } from 'react';
@@ -8,30 +7,35 @@ import { useState, useEffect } from 'react';
 const tracer = trace.getTracer('vercel-tracer');
 
 async function fetchBooks() {
-  const span = tracer.startSpan('fetchBooks');
+  // const span = tracer.startSpan('fetchBooks');
+
   const apiUrl =
-    process.env.NEXT_PUBLIC_NODE_ENV === "production"
-      ? "https://next-danube-webshop-backend.vercel.app/api/v1"
-      : "https://next-danube-webshop-backend-staging.vercel.app/api/v1";
+    process.env.NEXT_PUBLIC_NODE_ENV === 'production'
+      ? 'https://next-danube-webshop-backend.vercel.app/api/v1'
+      : 'https://next-danube-webshop-backend-staging.vercel.app/api/v1';
+
+  let books = null;
+
+  await tracer.startActiveSpan('fetchBooks', async (span) => {
+    try {
+      console.log(apiUrl);
+      const response = await fetch(`${apiUrl}/books`);
+      const responseJSON = await response.json();
+      books = responseJSON.data;
+      span.setStatus({ code: SpanStatusCode.OK });
+    } catch (error) {
+      span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
+      console.log(error);
+    } finally {
+      span.addEvent('Books API was called', {
+        provider: 'checkly',
+        someKey: 'someValue',
+      });
+      span.end();
+    }
+  });
 
-  try {
-    console.log(apiUrl);
-    const response = await fetch(`${apiUrl}/books`);
-    const responseJSON = await response.json();
-    const books = await responseJSON.data;
-    span.setStatus({ code: SpanStatusCode.OK }); // Use SpanStatusCode.OK
-    return books;
-  } catch (error) {
-    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message }); // Use SpanStatusCode.ERROR
-    console.log(error);
-    return null;
-  } finally {
-    span.addEvent('Books API was called', {
-      provider: 'checkly',
-      someKey: 'someValue',
-    })
-    span.end();
-  }
+  return books;
 }
 
 const BookCards = () => {
diff --git a/next-webstore/app/layout.jsx b/next-webstore/app/layout.jsx
index 098144d..d2482f5 100644
--- a/next-webstore/app/layout.jsx
+++ b/next-webstore/app/layout.jsx
@@ -1,7 +1,5 @@
 import "./globals.css";
 import Header from "./components/header";
-import Books from "./components/bookCards"
-import BookFilter from "./components/bookFilter";
 import { Roboto } from "next/font/google";
 
 const roboto = Roboto({
diff --git a/next-webstore/instrumentation.ts b/next-webstore/instrumentation.ts
index 5644c1e..cd4e744 100644
--- a/next-webstore/instrumentation.ts
+++ b/next-webstore/instrumentation.ts
@@ -18,4 +18,5 @@ export function register() {
       },
     },
   });
+  console.log('instrumentation registered')
 }
\ No newline at end of file