👀 [Frontend] 282 adding initial instrumentation setup

.env

@@ -7,6 +7,8 @@ OTEL_EXPORTER_OTLP_ENDPOINT=http://otelcol:4317
 OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT}
 OTEL_EXPORTER_OTLP_METRICS_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT}
 
+OTEL_EXPORTER_OTLP_TRACES_PUBLIC_ENDPOINT=http://localhost:4318/v1/traces
+
 # Load Generator
 USERS=10
 

docker-compose.yml

@@ -30,7 +30,7 @@ services:
       - ./src/otelcollector/otelcol-config-extras.yml:/etc/otelcol-config-extras.yml
     ports:
       - "4317"          # OTLP over gRPC receiver
-      - "4318"          # OTLP over HTTP receiver
+      - "4318:4318"          # OTLP over HTTP receiver
       - "9464"          # Prometheus exporter
       - "8888"          # metrics endpoint
     depends_on:
@@ -168,6 +168,7 @@ services:
       - RECOMMENDATION_SERVICE_ADDR
       - SHIPPING_SERVICE_ADDR
       - OTEL_EXPORTER_OTLP_TRACES_ENDPOINT
+      - OTEL_EXPORTER_OTLP_TRACES_PUBLIC_ENDPOINT
       - OTEL_RESOURCE_ATTRIBUTES=service.name=frontend
       - OTEL_EXPORTER_OTLP_ENDPOINT
       - ENV_PLATFORM

src/frontend/.dockerignore

@@ -0,0 +1 @@
+node_modules

src/frontend/Dockerfile

@@ -9,9 +9,9 @@ RUN npm ci
 FROM node:16-alpine AS builder
 RUN apk add --no-cache libc6-compat protoc
 WORKDIR /app
-COPY --from=deps /app/node_modules ./node_modules
 COPY ./pb ./pb
 COPY ./src/frontend .
+COPY --from=deps /app/node_modules ./node_modules
 
 RUN npm run grpc:generate
 RUN npm run build
@@ -26,8 +26,10 @@ RUN addgroup -g 1001 -S nodejs
 RUN adduser -S nextjs -u 1001
 
 COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/utils/telemetry/Instrumentation.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
+COPY --from=deps /app/node_modules ./node_modules
 
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
@@ -37,4 +39,4 @@ USER nextjs
 ENV PORT 8080
 EXPOSE ${PORT}
 
-CMD ["node", "server.js"]
+CMD ["sh", "-c", "npm start"]

src/frontend/components/Header/Header.styled.ts

@@ -1,11 +1,11 @@
+import Link from 'next/link';
 import styled from 'styled-components';
 
 export const Header = styled.header`
   background-color: #853b5c;
   color: white;
 `;
 
-
 export const NavBar = styled.nav`
   height: 80px;
   background-color: white;
@@ -14,7 +14,7 @@ export const NavBar = styled.nav`
   border-bottom: 1px solid ${({ theme }) => theme.colors.textGray};
   z-index: 1;
   padding: 0;
-  
+
   ${({ theme }) => theme.breakpoints.desktop} {
     height: 100px;
   }
@@ -33,7 +33,7 @@ export const Container = styled.div`
   }
 `;
 
-export const NavBarBrand = styled.a`
+export const NavBarBrand = styled(Link)`
   display: flex;
   align-items: center;
   padding: 0;

src/frontend/next.config.js

@@ -18,6 +18,9 @@ const {
   RECOMMENDATION_SERVICE_ADDR = '',
   SHIPPING_SERVICE_ADDR = '',
   ENV_PLATFORM = '',
+  OTEL_EXPORTER_OTLP_TRACES_PUBLIC_ENDPOINT = '',
+  OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '',
+  OTEL_SERVICE_NAME = 'frontend',
 } = process.env;
 
 const nextConfig = {
@@ -34,6 +37,7 @@ const nextConfig = {
       config.resolve.fallback.net = false;
       config.resolve.fallback.dns = false;
       config.resolve.fallback.fs = false;
+      config.resolve.fallback.async_hooks = false;
     }
     return config;
   },
@@ -45,7 +49,10 @@ const nextConfig = {
     PRODUCT_CATALOG_SERVICE_ADDR,
     RECOMMENDATION_SERVICE_ADDR,
     SHIPPING_SERVICE_ADDR,
+    OTEL_EXPORTER_OTLP_TRACES_ENDPOINT,
+    NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_PUBLIC_ENDPOINT: OTEL_EXPORTER_OTLP_TRACES_PUBLIC_ENDPOINT,
     NEXT_PUBLIC_PLATFORM: ENV_PLATFORM,
+    NEXT_PUBLIC_OTEL_SERVICE_NAME: OTEL_SERVICE_NAME,
   },
 };