👀 [Frontend] 282 adding initial instrumentation setup

CHANGELOG.md

@@ -73,3 +73,5 @@ significant modifications will be credited to OpenTelemetry Authors.
 ([#281](https://github.com/open-telemetry/opentelemetry-demo/pull/281))
 * Added error for a specific product based on a feature flag
 ([#245](https://github.com/open-telemetry/opentelemetry-demo/pull/245))
+* Added Frontend Instrumentation
+([#293](https://github.com/open-telemetry/opentelemetry-demo/pull/293))

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:

src/frontend/.dockerignore

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

src/frontend/Dockerfile

@@ -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 ["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,8 @@ const {
   RECOMMENDATION_SERVICE_ADDR = '',
   SHIPPING_SERVICE_ADDR = '',
   ENV_PLATFORM = '',
+  OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '',
+  OTEL_SERVICE_NAME = 'frontend',
 } = process.env;
 
 const nextConfig = {
@@ -35,6 +37,7 @@ const nextConfig = {
       config.resolve.fallback.dns = false;
       config.resolve.fallback.fs = false;
     }
+
     return config;
   },
   env: {
@@ -45,7 +48,9 @@ const nextConfig = {
     PRODUCT_CATALOG_SERVICE_ADDR,
     RECOMMENDATION_SERVICE_ADDR,
     SHIPPING_SERVICE_ADDR,
+    OTEL_EXPORTER_OTLP_TRACES_ENDPOINT,
     NEXT_PUBLIC_PLATFORM: ENV_PLATFORM,
+    NEXT_PUBLIC_OTEL_SERVICE_NAME: OTEL_SERVICE_NAME,
   },
 };