Integrate Datadog to frontend for logs and traces (#1335)

Issue #1217 

**Key changes:**

- Add ddtrace library
- Wrap application to datadog serverless-init to collect traces and logs

![2024-11-16 15 14
55](https://github.com/user-attachments/assets/fd6cfc9a-1e6e-4ef8-848f-28df20ef2d58)

.github/workflows/gcp_frontend.yml

@@ -30,7 +30,7 @@ jobs:
       - run: gcloud auth configure-docker
       - name: Build and Push Docker image
         run: |
-          docker build -t gcr.io/${{ vars.GCP_PROJECT_ID }}/${{ env.SERVICE }} -f frontend/Dockerfile .
+          docker build -t gcr.io/${{ vars.GCP_PROJECT_ID }}/${{ env.SERVICE }} -f frontend/Dockerfile.datadog .
           docker push gcr.io/${{ vars.GCP_PROJECT_ID }}/${{ env.SERVICE }}
       - name: Deploy to Cloud Run
         id: deploy

frontend/Dockerfile.datadog

@@ -0,0 +1,63 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+RUN echo "deps: $(pwd)"
+RUN ls -la
+
+# Install dependencies based on the preferred package manager
+COPY frontend/package.json frontend/yarn.lock* frontend/package-lock.json* frontend/pnpm-lock.yaml* ./
+
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+#COPY frontend/. .
+COPY frontend .
+ENV API_URL=https://based-hardware--backend-api.modal.run
+RUN npm run build
+
+RUN echo "base files"
+RUN ls -la
+
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+RUN apk add --no-cache libc6-compat
+RUN echo "production: $(pwd)"
+RUN ls -la
+RUN npm install dd-trace --save
+ENV NODE_ENV production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=gcr.io/datadoghq/serverless-init:1 --chown=nextjs:nodejs /datadog-init /app/datadog-init
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+ENTRYPOINT ["/app/datadog-init"]
+CMD ["node", "server.js"]