From 82e03978b89938219958032efb1448cc76baa181 Mon Sep 17 00:00:00 2001 From: Saumit Date: Sat, 27 Sep 2025 02:14:26 +0530 Subject: Initial snapshot - OpenTelemetry demo 2.1.3 -f --- src/frontend/pages/_app.tsx | 83 ++++++++++++++++ src/frontend/pages/_document.tsx | 65 +++++++++++++ src/frontend/pages/api/cart.ts | 56 +++++++++++ src/frontend/pages/api/checkout.ts | 44 +++++++++ src/frontend/pages/api/currency.ts | 25 +++++ src/frontend/pages/api/data.ts | 26 +++++ .../pages/api/products/[productId]/index.ts | 26 +++++ src/frontend/pages/api/products/index.ts | 26 +++++ src/frontend/pages/api/recommendations.ts | 33 +++++++ src/frontend/pages/api/shipping.ts | 29 ++++++ .../pages/cart/checkout/[orderId]/index.tsx | 61 ++++++++++++ src/frontend/pages/cart/index.tsx | 39 ++++++++ src/frontend/pages/index.tsx | 48 +++++++++ src/frontend/pages/product/[productId]/index.tsx | 107 +++++++++++++++++++++ 14 files changed, 668 insertions(+) create mode 100755 src/frontend/pages/_app.tsx create mode 100644 src/frontend/pages/_document.tsx create mode 100755 src/frontend/pages/api/cart.ts create mode 100644 src/frontend/pages/api/checkout.ts create mode 100644 src/frontend/pages/api/currency.ts create mode 100644 src/frontend/pages/api/data.ts create mode 100644 src/frontend/pages/api/products/[productId]/index.ts create mode 100644 src/frontend/pages/api/products/index.ts create mode 100644 src/frontend/pages/api/recommendations.ts create mode 100644 src/frontend/pages/api/shipping.ts create mode 100644 src/frontend/pages/cart/checkout/[orderId]/index.tsx create mode 100644 src/frontend/pages/cart/index.tsx create mode 100755 src/frontend/pages/index.tsx create mode 100644 src/frontend/pages/product/[productId]/index.tsx (limited to 'src/frontend/pages') diff --git a/src/frontend/pages/_app.tsx b/src/frontend/pages/_app.tsx new file mode 100755 index 0000000..67ee8b1 --- /dev/null +++ b/src/frontend/pages/_app.tsx @@ -0,0 +1,83 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import '../styles/globals.css'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import App, { AppContext, AppProps } from 'next/app'; +import CurrencyProvider from '../providers/Currency.provider'; +import CartProvider from '../providers/Cart.provider'; +import { ThemeProvider } from 'styled-components'; +import Theme from '../styles/Theme'; +import FrontendTracer from '../utils/telemetry/FrontendTracer'; +import SessionGateway from '../gateways/Session.gateway'; +import { OpenFeatureProvider, OpenFeature } from '@openfeature/react-sdk'; +import { FlagdWebProvider } from '@openfeature/flagd-web-provider'; + +declare global { + interface Window { + ENV: { + NEXT_PUBLIC_PLATFORM?: string; + NEXT_PUBLIC_OTEL_SERVICE_NAME?: string; + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT?: string; + IS_SYNTHETIC_REQUEST?: string; + }; + } +} + +if (typeof window !== 'undefined') { + FrontendTracer(); + if (window.location) { + const session = SessionGateway.getSession(); + + // Set context prior to provider init to avoid multiple http calls + OpenFeature.setContext({ targetingKey: session.userId, ...session }).then(() => { + /** + * We connect to flagd through the envoy proxy, straight from the browser, + * for this we need to know the current hostname and port. + */ + + const useTLS = window.location.protocol === 'https:'; + let port = useTLS ? 443 : 80; + if (window.location.port) { + port = parseInt(window.location.port, 10); + } + + OpenFeature.setProvider( + new FlagdWebProvider({ + host: window.location.hostname, + pathPrefix: 'flagservice', + port: port, + tls: useTLS, + maxRetries: 3, + maxDelay: 10000, + }) + ); + }); + } +} + +const queryClient = new QueryClient(); + +function MyApp({ Component, pageProps }: AppProps) { + return ( + + + + + + + + + + + + ); +} + +MyApp.getInitialProps = async (appContext: AppContext) => { + const appProps = await App.getInitialProps(appContext); + + return { ...appProps }; +}; + +export default MyApp; diff --git a/src/frontend/pages/_document.tsx b/src/frontend/pages/_document.tsx new file mode 100644 index 0000000..8a68bc0 --- /dev/null +++ b/src/frontend/pages/_document.tsx @@ -0,0 +1,65 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'; +import { ServerStyleSheet } from 'styled-components'; +import {context, propagation} from "@opentelemetry/api"; + +const { ENV_PLATFORM, WEB_OTEL_SERVICE_NAME, PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT, OTEL_COLLECTOR_HOST} = process.env; + +export default class MyDocument extends Document<{ envString: string }> { + static async getInitialProps(ctx: DocumentContext) { + const sheet = new ServerStyleSheet(); + const originalRenderPage = ctx.renderPage; + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: App => props => sheet.collectStyles(), + }); + + const initialProps = await Document.getInitialProps(ctx); + const baggage = propagation.getBaggage(context.active()); + const isSyntheticRequest = baggage?.getEntry('synthetic_request')?.value === 'true'; + + const otlpTracesEndpoint = isSyntheticRequest + ? `http://${OTEL_COLLECTOR_HOST}:4318/v1/traces` + : PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT; + + const envString = ` + window.ENV = { + NEXT_PUBLIC_PLATFORM: '${ENV_PLATFORM}', + NEXT_PUBLIC_OTEL_SERVICE_NAME: '${WEB_OTEL_SERVICE_NAME}', + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: '${otlpTracesEndpoint}', + IS_SYNTHETIC_REQUEST: '${isSyntheticRequest}', + };`; + return { + ...initialProps, + styles: [initialProps.styles, sheet.getStyleElement()], + envString, + }; + } finally { + sheet.seal(); + } + } + + render() { + return ( + + + + + + + +
+ + + + + ); + } +} diff --git a/src/frontend/pages/api/cart.ts b/src/frontend/pages/api/cart.ts new file mode 100755 index 0000000..3f5b1b7 --- /dev/null +++ b/src/frontend/pages/api/cart.ts @@ -0,0 +1,56 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiHandler } from 'next'; +import CartGateway from '../../gateways/rpc/Cart.gateway'; +import { AddItemRequest, Empty } from '../../protos/demo'; +import ProductCatalogService from '../../services/ProductCatalog.service'; +import { IProductCart, IProductCartItem } from '../../types/Cart'; +import InstrumentationMiddleware from '../../utils/telemetry/InstrumentationMiddleware'; + +type TResponse = IProductCart | Empty; + +const handler: NextApiHandler = async ({ method, body, query }, res) => { + switch (method) { + case 'GET': { + const { sessionId = '', currencyCode = '' } = query; + const { userId, items } = await CartGateway.getCart(sessionId as string); + + const productList: IProductCartItem[] = await Promise.all( + items.map(async ({ productId, quantity }) => { + const product = await ProductCatalogService.getProduct(productId, currencyCode as string); + + return { + productId, + quantity, + product, + }; + }) + ); + + return res.status(200).json({ userId, items: productList }); + } + + case 'POST': { + const { userId, item } = body as AddItemRequest; + + await CartGateway.addItem(userId, item!); + const cart = await CartGateway.getCart(userId); + + return res.status(200).json(cart); + } + + case 'DELETE': { + const { userId } = body as AddItemRequest; + await CartGateway.emptyCart(userId); + + return res.status(204).send(''); + } + + default: { + return res.status(405); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/checkout.ts b/src/frontend/pages/api/checkout.ts new file mode 100644 index 0000000..6007ba2 --- /dev/null +++ b/src/frontend/pages/api/checkout.ts @@ -0,0 +1,44 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../utils/telemetry/InstrumentationMiddleware'; +import CheckoutGateway from '../../gateways/rpc/Checkout.gateway'; +import { Empty, PlaceOrderRequest } from '../../protos/demo'; +import { IProductCheckoutItem, IProductCheckout } from '../../types/Cart'; +import ProductCatalogService from '../../services/ProductCatalog.service'; + +type TResponse = IProductCheckout | Empty; + +const handler = async ({ method, body, query }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'POST': { + const { currencyCode = '' } = query; + const orderData = body as PlaceOrderRequest; + const { order: { items = [], ...order } = {} } = await CheckoutGateway.placeOrder(orderData); + + const productList: IProductCheckoutItem[] = await Promise.all( + items.map(async ({ item: { productId = '', quantity = 0 } = {}, cost }) => { + const product = await ProductCatalogService.getProduct(productId, currencyCode as string); + + return { + cost, + item: { + productId, + quantity, + product, + }, + }; + }) + ); + + return res.status(200).json({ ...order, items: productList }); + } + + default: { + return res.status(405).send(''); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/currency.ts b/src/frontend/pages/api/currency.ts new file mode 100644 index 0000000..fd69909 --- /dev/null +++ b/src/frontend/pages/api/currency.ts @@ -0,0 +1,25 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../utils/telemetry/InstrumentationMiddleware'; +import CurrencyGateway from '../../gateways/rpc/Currency.gateway'; +import { Empty } from '../../protos/demo'; + +type TResponse = string[] | Empty; + +const handler = async ({ method }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'GET': { + const { currencyCodes = [] } = await CurrencyGateway.getSupportedCurrencies(); + + return res.status(200).json(currencyCodes); + } + + default: { + return res.status(405); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/data.ts b/src/frontend/pages/api/data.ts new file mode 100644 index 0000000..7e6ac8f --- /dev/null +++ b/src/frontend/pages/api/data.ts @@ -0,0 +1,26 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../utils/telemetry/InstrumentationMiddleware'; +import AdGateway from '../../gateways/rpc/Ad.gateway'; +import { Ad, Empty } from '../../protos/demo'; + +type TResponse = Ad[] | Empty; + +const handler = async ({ method, query }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'GET': { + const { contextKeys = [] } = query; + const { ads: adList } = await AdGateway.listAds(Array.isArray(contextKeys) ? contextKeys : contextKeys.split(',')); + + return res.status(200).json(adList); + } + + default: { + return res.status(405).send(''); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/products/[productId]/index.ts b/src/frontend/pages/api/products/[productId]/index.ts new file mode 100644 index 0000000..eb62465 --- /dev/null +++ b/src/frontend/pages/api/products/[productId]/index.ts @@ -0,0 +1,26 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../../../utils/telemetry/InstrumentationMiddleware'; +import { Empty, Product } from '../../../../protos/demo'; +import ProductCatalogService from '../../../../services/ProductCatalog.service'; + +type TResponse = Product | Empty; + +const handler = async ({ method, query }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'GET': { + const { productId = '', currencyCode = '' } = query; + const product = await ProductCatalogService.getProduct(productId as string, currencyCode as string); + + return res.status(200).json(product); + } + + default: { + return res.status(405).send(''); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/products/index.ts b/src/frontend/pages/api/products/index.ts new file mode 100644 index 0000000..74b8937 --- /dev/null +++ b/src/frontend/pages/api/products/index.ts @@ -0,0 +1,26 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../../utils/telemetry/InstrumentationMiddleware'; +import { Empty, Product } from '../../../protos/demo'; +import ProductCatalogService from '../../../services/ProductCatalog.service'; + +type TResponse = Product[] | Empty; + +const handler = async ({ method, query }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'GET': { + const { currencyCode = '' } = query; + const productList = await ProductCatalogService.listProducts(currencyCode as string); + + return res.status(200).json(productList); + } + + default: { + return res.status(405).send(''); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/recommendations.ts b/src/frontend/pages/api/recommendations.ts new file mode 100644 index 0000000..dd975a9 --- /dev/null +++ b/src/frontend/pages/api/recommendations.ts @@ -0,0 +1,33 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../utils/telemetry/InstrumentationMiddleware'; +import RecommendationsGateway from '../../gateways/rpc/Recommendations.gateway'; +import { Empty, Product } from '../../protos/demo'; +import ProductCatalogService from '../../services/ProductCatalog.service'; + +type TResponse = Product[] | Empty; + +const handler = async ({ method, query }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'GET': { + const { productIds = [], sessionId = '', currencyCode = '' } = query; + const { productIds: productList } = await RecommendationsGateway.listRecommendations( + sessionId as string, + productIds as string[] + ); + const recommendedProductList = await Promise.all( + productList.slice(0, 4).map(id => ProductCatalogService.getProduct(id, currencyCode as string)) + ); + + return res.status(200).json(recommendedProductList); + } + + default: { + return res.status(405).send(''); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/api/shipping.ts b/src/frontend/pages/api/shipping.ts new file mode 100644 index 0000000..3a29001 --- /dev/null +++ b/src/frontend/pages/api/shipping.ts @@ -0,0 +1,29 @@ +// Copyright The OpenTelemetry Authors +// SPDX-License-Identifier: Apache-2.0 + +import type { NextApiRequest, NextApiResponse } from 'next'; +import InstrumentationMiddleware from '../../utils/telemetry/InstrumentationMiddleware'; +import ShippingGateway from '../../gateways/http/Shipping.gateway'; +import { Address, CartItem, Empty, Money } from '../../protos/demo'; +import CurrencyGateway from '../../gateways/rpc/Currency.gateway'; + +type TResponse = Money | Empty; + +const handler = async ({ method, query }: NextApiRequest, res: NextApiResponse) => { + switch (method) { + case 'GET': { + const { itemList = '', currencyCode = 'USD', address = '' } = query; + const { costUsd } = await ShippingGateway.getShippingCost(JSON.parse(itemList as string) as CartItem[], + JSON.parse(address as string) as Address); + const cost = await CurrencyGateway.convert(costUsd!, currencyCode as string); + + return res.status(200).json(cost!); + } + + default: { + return res.status(405); + } + } +}; + +export default InstrumentationMiddleware(handler); diff --git a/src/frontend/pages/cart/checkout/[orderId]/index.tsx b/src/frontend/pages/cart/checkout/[orderId]/index.tsx new file mode 100644 index 0000000..740b895 --- /dev/null +++ b/src/frontend/pages/cart/checkout/[orderId]/index.tsx @@ -0,0 +1,61 @@ +// Copyright The OpenTelemetry Authors +// 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'; +import Button from '../../../../components/Button'; +import CheckoutItem from '../../../../components/CheckoutItem'; +import Footer from '../../../../components/Footer'; +import Layout from '../../../../components/Layout'; +import Recommendations from '../../../../components/Recommendations'; +import AdProvider from '../../../../providers/Ad.provider'; +import * as S from '../../../../styles/Checkout.styled'; +import { IProductCheckout } from '../../../../types/Cart'; + +const Checkout: NextPage = () => { + const { query } = useRouter(); + const { items = [], shippingAddress } = JSON.parse((query.order || '{}') as string) as IProductCheckout; + + return ( + item?.productId || '')} + contextKeys={[...new Set(items.flatMap(({ item }) => item.product.categories))]} + > + + Otel Demo - Checkout + + + + + Your order is complete! + We've sent you a confirmation email. + + + {items.map(checkoutItem => ( + + ))} + + + + + + + + + + + +