Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding front end exporter custom url #512

Merged
merged 9 commits into from
Oct 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))
2 changes: 1 addition & 1 deletion docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down
4 changes: 3 additions & 1 deletion src/frontend/components/PlatformFlag/PlatformFlag.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
4 changes: 1 addition & 3 deletions src/frontend/components/ProductPrice/ProductPrice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
24 changes: 20 additions & 4 deletions src/frontend/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -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() || '';
Expand All @@ -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}>
Expand All @@ -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;
14 changes: 13 additions & 1 deletion src/frontend/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -16,6 +26,7 @@ export default class MyDocument extends Document {
return {
...initialProps,
styles: [initialProps.styles, sheet.getStyleElement()],
envString,
};
} finally {
sheet.seal();
Expand All @@ -35,6 +46,7 @@ export default class MyDocument extends Document {
</Head>
<body>
<Main />
<script dangerouslySetInnerHTML={{ __html: this.props.envString }}></script>
<NextScript />
</body>
</Html>
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/pages/cart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
7 changes: 5 additions & 2 deletions src/frontend/utils/telemetry/FrontendTracer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
})
)
);
Expand Down