[frontend] fix build warnings (open-telemetry#2025)

puckpuck · julianocosta89 · web-flow · commit 62a2c398d047 · 2025-02-12T09:50:15.000+01:00
* upgrade to node 22

* fix build warnings

* fix build warnings

---------

Co-authored-by: Juliano Costa &lt;julianocosta89@outlook.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -84,6 +84,10 @@ the release.
   ([#1954](https://github.com/open-telemetry/opentelemetry-demo/pull/1954))
 * [accounting] bump OpenTelemetry .NET Automatic Instrumentation to 1.10.0
   ([#1998](https://github.com/open-telemetry/opentelemetry-demo/pull/1998))
+* [frontend] update to Node 22
+  ([#2025](https://github.com/open-telemetry/opentelemetry-demo/pull/2025))
+* [frontend] move page titles to individual pages
+  ([#2025](https://github.com/open-telemetry/opentelemetry-demo/pull/2025))
 
 ## 1.12.0
 
diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
@@ -1,15 +1,15 @@
 # Copyright The OpenTelemetry Authors
 # SPDX-License-Identifier: Apache-2.0
 
-FROM node:20-alpine AS deps
+FROM node:22-alpine AS deps
 RUN apk add --no-cache libc6-compat
 
 WORKDIR /app
 
 COPY ./src/frontend/package*.json ./
 RUN npm ci
 
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -18,7 +18,7 @@ COPY ./src/frontend .
 
 RUN npm run build
 
-FROM node:20-alpine AS runner
+FROM node:22-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "NODE_OPTIONS='-r ./utils/telemetry/Instrumentation.js' next dev",
+    "dev": "NODE_OPTIONS='--require ./utils/telemetry/Instrumentation.js' next dev",
     "build": "next build",
     "start": "node --require ./Instrumentation.js server.js",
     "lint": "next lint",
diff --git a/src/frontend/pages/_document.tsx b/src/frontend/pages/_document.tsx
@@ -53,7 +53,6 @@ export default class MyDocument extends Document<{ envString: string }> {
             href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
             rel="stylesheet"
           />
-          <title>OTel demo</title>
         </Head>
         <body>
           <Main />
diff --git a/src/frontend/pages/cart/checkout/[orderId]/index.tsx b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NextPage } from 'next';
+import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Ad from '../../../../components/Ad';
@@ -23,6 +24,9 @@ const Checkout: NextPage = () => {
       productIds={items.map(({ item }) => item?.productId || '')}
       contextKeys={[...new Set(items.flatMap(({ item }) => item.product.categories))]}
     >
+      <Head>
+        <title>Otel Demo - Checkout</title>
+      </Head>
       <Layout>
         <S.Checkout>
           <S.Container>
diff --git a/src/frontend/pages/cart/index.tsx b/src/frontend/pages/cart/index.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NextPage } from 'next';
+import Head from 'next/head';
 import Footer from '../../components/Footer';
 import Layout from '../../components/Layout';
 import Recommendations from '../../components/Recommendations';
@@ -21,6 +22,9 @@ const Cart: NextPage = () => {
       productIds={items.map(({ productId }) => productId)}
       contextKeys={[...new Set(items.flatMap(({ product }) => product.categories))]}
     >
+      <Head>
+        <title>Otel Demo - Cart</title>
+      </Head>
       <Layout>
         <S.Cart>
           {(!!items.length && <CartDetail />) || <EmptyCart />}
diff --git a/src/frontend/pages/index.tsx b/src/frontend/pages/index.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NextPage } from 'next';
+import Head from 'next/head';
 import Footer from '../components/Footer';
 import Layout from '../components/Layout';
 import ProductList from '../components/ProductList';
@@ -21,6 +22,9 @@ const Home: NextPage = () => {
 
   return (
     <Layout>
+      <Head>
+        <title>Otel Demo - Home</title>
+      </Head>
       <S.Home data-cy={CypressFields.HomePage}>
         <Banner />
         <S.Container>
diff --git a/src/frontend/pages/product/[productId]/index.tsx b/src/frontend/pages/product/[productId]/index.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NextPage } from 'next';
+import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useCallback, useState, useEffect } from 'react';
@@ -64,6 +65,9 @@ const ProductDetail: NextPage = () => {
       productIds={[productId, ...items.map(({ productId }) => productId)]}
       contextKeys={[...new Set(categories)]}
     >
+      <Head>
+        <title>Otel Demo - Product</title>
+      </Head>
       <Layout>
         <S.ProductDetail data-cy={CypressFields.ProductDetail}>
           <S.Container>
