From 1a70e1bbb7248cf4907f7bbb32adbc0e5d5e9e29 Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Fri, 21 Oct 2022 13:05:32 -0500 Subject: [PATCH 1/6] adding front end exporter custom url --- .../cart => components/Cart}/CartDetail.tsx | 6 ++--- .../cart => components/Cart}/EmptyCart.tsx | 2 +- .../components/PlatformFlag/PlatformFlag.tsx | 4 +++- .../components/ProductPrice/ProductPrice.tsx | 4 +--- src/frontend/pages/_app.tsx | 22 ++++++++++++++++--- src/frontend/pages/_document.tsx | 16 +++++++++++++- src/frontend/pages/cart/index.tsx | 4 ++-- .../utils/telemetry/FrontendTracer.ts | 7 ++++-- 8 files changed, 49 insertions(+), 16 deletions(-) rename src/frontend/{pages/cart => components/Cart}/CartDetail.tsx (90%) rename src/frontend/{pages/cart => components/Cart}/EmptyCart.tsx (91%) diff --git a/src/frontend/pages/cart/CartDetail.tsx b/src/frontend/components/Cart/CartDetail.tsx similarity index 90% rename from src/frontend/pages/cart/CartDetail.tsx rename to src/frontend/components/Cart/CartDetail.tsx index 1f00b37aca..2733a92115 100644 --- a/src/frontend/pages/cart/CartDetail.tsx +++ b/src/frontend/components/Cart/CartDetail.tsx @@ -1,8 +1,8 @@ import { useRouter } from 'next/router'; import { useCallback } from 'react'; -import CartItems from '../../components/CartItems'; -import CheckoutForm from '../../components/CheckoutForm'; -import { IFormData } from '../../components/CheckoutForm/CheckoutForm'; +import CartItems from '../CartItems'; +import CheckoutForm from '../CheckoutForm'; +import { IFormData } from '../CheckoutForm/CheckoutForm'; import SessionGateway from '../../gateways/Session.gateway'; import { useCart } from '../../providers/Cart.provider'; import { useCurrency } from '../../providers/Currency.provider'; diff --git a/src/frontend/pages/cart/EmptyCart.tsx b/src/frontend/components/Cart/EmptyCart.tsx similarity index 91% rename from src/frontend/pages/cart/EmptyCart.tsx rename to src/frontend/components/Cart/EmptyCart.tsx index 541a0a6e70..2e146dcee1 100644 --- a/src/frontend/pages/cart/EmptyCart.tsx +++ b/src/frontend/components/Cart/EmptyCart.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import Button from '../../components/Button'; +import Button from '../Button'; import * as S from '../../styles/Cart.styled'; const EmptyCart = () => { diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.tsx b/src/frontend/components/PlatformFlag/PlatformFlag.tsx index f2b70301f0..1d3a818488 100644 --- a/src/frontend/components/PlatformFlag/PlatformFlag.tsx +++ b/src/frontend/components/PlatformFlag/PlatformFlag.tsx @@ -1,6 +1,8 @@ import * as S from './PlatformFlag.styled'; -const platform = (process.env.NEXT_PUBLIC_ANALYTICS_ID || 'local') as S.Platform; +const { NEXT_PUBLIC_PLATFORM = 'local' } = window.ENV; + +const platform = NEXT_PUBLIC_PLATFORM as S.Platform; const PlatformFlag = () => { return ( diff --git a/src/frontend/components/ProductPrice/ProductPrice.tsx b/src/frontend/components/ProductPrice/ProductPrice.tsx index 559b9fd4f5..dd9382069d 100644 --- a/src/frontend/components/ProductPrice/ProductPrice.tsx +++ b/src/frontend/components/ProductPrice/ProductPrice.tsx @@ -8,11 +8,9 @@ interface IProps { price: Money; } -const ProductPrice = ({ price: { units, currencyCode, nanos }, price }: IProps) => { +const ProductPrice = ({ price: { units, currencyCode, nanos } }: IProps) => { const { selectedCurrency } = useCurrency(); - console.log('@@@price', price); - const currencySymbol = useMemo( () => getSymbolFromCurrency(currencyCode) || selectedCurrency, [currencyCode, selectedCurrency] diff --git a/src/frontend/pages/_app.tsx b/src/frontend/pages/_app.tsx index d5d5e21c29..157c41dea0 100755 --- a/src/frontend/pages/_app.tsx +++ b/src/frontend/pages/_app.tsx @@ -1,17 +1,27 @@ import '../styles/globals.css'; import { QueryClient, QueryClientProvider } from 'react-query'; -import type { AppProps } from 'next/app'; +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'; +declare global { + interface Window { + ENV: { + NEXT_PUBLIC_PLATFORM?: string; + NEXT_PUBLIC_OTEL_SERVICE_NAME?: string; + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT?: string; + }; + } +} + if (typeof window !== 'undefined') FrontendTracer(); const queryClient = new QueryClient(); -function App({ Component, pageProps }: AppProps) { +function MyApp({ Component, pageProps }: AppProps) { return ( @@ -25,4 +35,10 @@ function App({ Component, pageProps }: AppProps) { ); } -export default App; +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 index 887ad9d412..6a07a53ab7 100644 --- a/src/frontend/pages/_document.tsx +++ b/src/frontend/pages/_document.tsx @@ -1,7 +1,18 @@ import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; -export default class MyDocument extends Document { +const { NEXT_PUBLIC_PLATFORM, NEXT_PUBLIC_OTEL_SERVICE_NAME, NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT } = + process.env; + +const envString = ` +window.ENV = { + NEXT_PUBLIC_PLATFORM: '${NEXT_PUBLIC_PLATFORM}', + NEXT_PUBLIC_OTEL_SERVICE_NAME: '${NEXT_PUBLIC_OTEL_SERVICE_NAME}', + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: '${NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}', +}; +`; + +export default class MyDocument extends Document<{ envString: string }> { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; @@ -13,9 +24,11 @@ export default class MyDocument extends Document { }); const initialProps = await Document.getInitialProps(ctx); + return { ...initialProps, styles: [initialProps.styles, sheet.getStyleElement()], + envString, }; } finally { sheet.seal(); @@ -35,6 +48,7 @@ export default class MyDocument extends Document {
+ diff --git a/src/frontend/pages/cart/index.tsx b/src/frontend/pages/cart/index.tsx index 5cb780cfb9..7e30e565ba 100644 --- a/src/frontend/pages/cart/index.tsx +++ b/src/frontend/pages/cart/index.tsx @@ -3,8 +3,8 @@ import Footer from '../../components/Footer'; import Layout from '../../components/Layout'; import Recommendations from '../../components/Recommendations'; import * as S from '../../styles/Cart.styled'; -import CartDetail from './CartDetail'; -import EmptyCart from './EmptyCart'; +import CartDetail from '../../components/Cart/CartDetail'; +import EmptyCart from '../../components/Cart/EmptyCart'; import { useCart } from '../../providers/Cart.provider'; import AdProvider from '../../providers/Ad.provider'; diff --git a/src/frontend/utils/telemetry/FrontendTracer.ts b/src/frontend/utils/telemetry/FrontendTracer.ts index 2ede67d2e6..03170c94a4 100644 --- a/src/frontend/utils/telemetry/FrontendTracer.ts +++ b/src/frontend/utils/telemetry/FrontendTracer.ts @@ -7,19 +7,22 @@ import { Resource } from '@opentelemetry/resources'; import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +const { NEXT_PUBLIC_OTEL_SERVICE_NAME, NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = 'http://localhost:4318/v1/traces' } = + window.ENV; + const FrontendTracer = async () => { const { ZoneContextManager } = await import('@opentelemetry/context-zone'); const provider = new WebTracerProvider({ resource: new Resource({ - [SemanticResourceAttributes.SERVICE_NAME]: process.env.NEXT_PUBLIC_OTEL_SERVICE_NAME, + [SemanticResourceAttributes.SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME, }), }); provider.addSpanProcessor( new SimpleSpanProcessor( new OTLPTraceExporter({ - url: process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || 'http://localhost:4318/v1/traces', + url: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || , }) ) ); From 4a65a4bc913794b2104af6c57a3501083b205393 Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Fri, 21 Oct 2022 13:25:28 -0500 Subject: [PATCH 2/6] adding front end exporter custom url --- src/frontend/utils/telemetry/FrontendTracer.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/frontend/utils/telemetry/FrontendTracer.ts b/src/frontend/utils/telemetry/FrontendTracer.ts index 03170c94a4..3097f34258 100644 --- a/src/frontend/utils/telemetry/FrontendTracer.ts +++ b/src/frontend/utils/telemetry/FrontendTracer.ts @@ -7,8 +7,10 @@ import { Resource } from '@opentelemetry/resources'; import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'; import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; -const { NEXT_PUBLIC_OTEL_SERVICE_NAME, NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = 'http://localhost:4318/v1/traces' } = - window.ENV; +const { + NEXT_PUBLIC_OTEL_SERVICE_NAME, + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = 'http://localhost:4318/v1/traces', +} = window.ENV; const FrontendTracer = async () => { const { ZoneContextManager } = await import('@opentelemetry/context-zone'); @@ -22,7 +24,7 @@ const FrontendTracer = async () => { provider.addSpanProcessor( new SimpleSpanProcessor( new OTLPTraceExporter({ - url: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || , + url: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT, }) ) ); From 1b44afd82be68f2075589c5313bfafa866e9da7c Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Fri, 21 Oct 2022 13:30:17 -0500 Subject: [PATCH 3/6] adding front end exporter custom url --- src/frontend/components/PlatformFlag/PlatformFlag.tsx | 2 +- src/frontend/utils/telemetry/FrontendTracer.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.tsx b/src/frontend/components/PlatformFlag/PlatformFlag.tsx index 1d3a818488..b9b1bc97b8 100644 --- a/src/frontend/components/PlatformFlag/PlatformFlag.tsx +++ b/src/frontend/components/PlatformFlag/PlatformFlag.tsx @@ -1,6 +1,6 @@ import * as S from './PlatformFlag.styled'; -const { NEXT_PUBLIC_PLATFORM = 'local' } = window.ENV; +const { NEXT_PUBLIC_PLATFORM = 'local' } = typeof window !== 'undefined' ? window.ENV : {}; const platform = NEXT_PUBLIC_PLATFORM as S.Platform; diff --git a/src/frontend/utils/telemetry/FrontendTracer.ts b/src/frontend/utils/telemetry/FrontendTracer.ts index 3097f34258..c26c92fef6 100644 --- a/src/frontend/utils/telemetry/FrontendTracer.ts +++ b/src/frontend/utils/telemetry/FrontendTracer.ts @@ -8,9 +8,9 @@ import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions' import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; const { - NEXT_PUBLIC_OTEL_SERVICE_NAME, + NEXT_PUBLIC_OTEL_SERVICE_NAME = '', NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = 'http://localhost:4318/v1/traces', -} = window.ENV; +} = typeof window !== 'undefined' ? window.ENV : {}; const FrontendTracer = async () => { const { ZoneContextManager } = await import('@opentelemetry/context-zone'); From 971466e5668a6c0e56c3d2c1b8b19331d77116d0 Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Fri, 21 Oct 2022 13:48:34 -0500 Subject: [PATCH 4/6] adding front end exporter custom url --- src/frontend/pages/_document.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/frontend/pages/_document.tsx b/src/frontend/pages/_document.tsx index 6a07a53ab7..deb7147b68 100644 --- a/src/frontend/pages/_document.tsx +++ b/src/frontend/pages/_document.tsx @@ -1,14 +1,13 @@ import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; -const { NEXT_PUBLIC_PLATFORM, NEXT_PUBLIC_OTEL_SERVICE_NAME, NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT } = - process.env; +const { ENV_PLATFORM, OTEL_SERVICE_NAME, PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT } = process.env; const envString = ` window.ENV = { - NEXT_PUBLIC_PLATFORM: '${NEXT_PUBLIC_PLATFORM}', - NEXT_PUBLIC_OTEL_SERVICE_NAME: '${NEXT_PUBLIC_OTEL_SERVICE_NAME}', - NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: '${NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}', + NEXT_PUBLIC_PLATFORM: '${ENV_PLATFORM}', + NEXT_PUBLIC_OTEL_SERVICE_NAME: '${OTEL_SERVICE_NAME}', + NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: '${PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT}', }; `; @@ -24,7 +23,6 @@ export default class MyDocument extends Document<{ envString: string }> { }); const initialProps = await Document.getInitialProps(ctx); - return { ...initialProps, styles: [initialProps.styles, sheet.getStyleElement()], From 48077d6c49def81298dc3967ec19647488a37ad1 Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Fri, 21 Oct 2022 14:16:42 -0500 Subject: [PATCH 5/6] adding front end exporter custom url --- docker-compose.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index 9b8832bb3a..1df265416a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -197,7 +197,7 @@ services: - OTEL_EXPORTER_OTLP_ENDPOINT - ENV_PLATFORM - OTEL_SERVICE_NAME=frontend - - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://localhost:4318/v1/traces + - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT depends_on: - adservice - cartservice From 3b072036419d443e65a2b2bf80bfacf0e93147a6 Mon Sep 17 00:00:00 2001 From: Oscar Reyes Date: Fri, 21 Oct 2022 15:19:11 -0500 Subject: [PATCH 6/6] updating CHANGELOG --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3bc34455f6..3de17ad914 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -126,3 +126,5 @@ significant modifications will be credited to OpenTelemetry Authors. ([#439](https://github.com/open-telemetry/opentelemetry-demo/pull/439)) * Add Envoy as reverse proxy for all user-facing services ([#508](https://github.com/open-telemetry/opentelemetry-demo/pull/508)) +* Added frontend instrumentation exporter custom url +([#512](https://github.com/open-telemetry/opentelemetry-demo/pull/512))