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)) 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 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..b9b1bc97b8 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' } = typeof window !== 'undefined' ? 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 90edd55a3b..eb18a8c715 100755 --- a/src/frontend/pages/_app.tsx +++ b/src/frontend/pages/_app.tsx @@ -1,12 +1,22 @@ import '../styles/globals.css'; import { QueryClient, QueryClientProvider } from 'react-query'; -import type { AppProps } from 'next/app'; +import App, { AppContext, AppProps } from 'next/app'; +import { getCookie } from 'cookies-next'; 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 { getCookie } from 'cookies-next'; + +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') { const collector = getCookie('otelCollectorUrl')?.toString() || ''; @@ -15,7 +25,7 @@ if (typeof window !== 'undefined') { const queryClient = new QueryClient(); -function App({ Component, pageProps }: AppProps) { +function MyApp({ Component, pageProps }: AppProps) { return ( @@ -29,4 +39,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..deb7147b68 100644 --- a/src/frontend/pages/_document.tsx +++ b/src/frontend/pages/_document.tsx @@ -1,7 +1,17 @@ import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; -export default class MyDocument extends Document { +const { ENV_PLATFORM, OTEL_SERVICE_NAME, PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT } = process.env; + +const envString = ` +window.ENV = { + 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}', +}; +`; + +export default class MyDocument extends Document<{ envString: string }> { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; @@ -16,6 +26,7 @@ export default class MyDocument extends Document { return { ...initialProps, styles: [initialProps.styles, sheet.getStyleElement()], + envString, }; } finally { sheet.seal(); @@ -35,6 +46,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 217e23074f..8ad93a9489 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 = '' } = + typeof window !== 'undefined' ? window.ENV : {}; + const FrontendTracer = async (collectorString: string) => { 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: collectorString || 'http://localhost:4318/v1/traces', + url: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || collectorString || 'http://localhost:4318/v1/traces', }) ) );