adding front end exporter custom url (open-telemetry#512)

* adding front end exporter custom url

* adding front end exporter custom url

* adding front end exporter custom url

* adding front end exporter custom url

* adding front end exporter custom url

* updating CHANGELOG

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))

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

src/frontend/pages/cart/CartDetail.tsx → 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';

src/frontend/pages/cart/EmptyCart.tsx → 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 = () => {

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 (

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]

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 (
     <ThemeProvider theme={Theme}>
       <QueryClientProvider client={queryClient}>
@@ -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;

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 {
         </Head>
         <body>
           <Main />
+          <script dangerouslySetInnerHTML={{ __html: this.props.envString }}></script>
           <NextScript />
         </body>
       </Html>

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';
 

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',
       })
     )
   );