-
|
😵 I'm sorry but the documents make me stuck. In th exporter-metrics-otlp-http documents,I can use metrics in browser like: // Now, start recording data
const meter = meterProvider.getMeter('example-meter');
const counter = meter.createCounter('metric_name');
counter.add(10, { 'key': 'value' });But the exporter-trace-otlp-http do not provide such code.I tried to use My import {
BatchSpanProcessor,
WebTracerProvider,
} from '@opentelemetry/sdk-trace-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { SITE_URL } from '@/config';
const traceCollectorOptions = {
url: `${SITE_URL}/api/telemetry`,
headers: {
'Content-Type': 'application/json',
'x-telemetry-type': 'traces',
},
};
const exporter = new OTLPTraceExporter(traceCollectorOptions);
const provider = new WebTracerProvider({
resource: resourceFromAttributes({
[ATTR_SERVICE_NAME]: 'website',
[ATTR_SERVICE_VERSION]: '1.0.0',
}),
spanProcessors: [
new BatchSpanProcessor(exporter, {
// The maximum queue size. After the size is reached spans are dropped.
maxQueueSize: 100,
// The maximum batch size of every export. It must be smaller or equal to maxQueueSize.
maxExportBatchSize: 10,
// The interval between two consecutive exports
scheduledDelayMillis: 500,
// How long the export can run before it is cancelled
exportTimeoutMillis: 30000,
})
]
});
provider.register();My browser code like: useEffect(() => {
const tracer = trace.getTracer('memenews-website')
const span = tracer.startSpan('daily-page-views')
sendCounterMetrics('daily-page-views', 1, {
'service.name': 'memenews',
'exported.job': 'daily-page-views',
'memenews.page.id': params.slug,
})
span.end()
}, [params.slug])But the span requests not work. |
Beta Was this translation helpful? Give feedback.
Answered by
WendaoLee
Mar 25, 2025
Replies: 1 comment
-
|
Okay,I finnally find the anwser from https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-sdk-trace-web. The config code should be put in your web files,like // thanks to chatgpt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Tracing Example</title>
<base href="/" />
</head>
<body>
<h1>OpenTelemetry Browser Example</h1>
<p>Check the browser console for exported spans.</p>
<script type="module">
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
// set up your code here.
</script>
</body>
</html>If you use framework like "use client";
import { useEffect, FC } from "react";
import {
WebTracerProvider,
BatchSpanProcessor,
} from "@opentelemetry/sdk-trace-web";
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { ATTR_SERVICE_NAME, ATTR_SERVICE_VERSION } from '@opentelemetry/semantic-conventions';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { SITE_URL } from '@/config';
interface Props {
children: React.ReactNode;
}
const OpenTelemetryProvider: FC<Props> = ({ children }) => {
useEffect(() => {
const traceCollectorOptions = {
url: `${SITE_URL}/api/telemetry`,
headers: {
'Content-Type': 'application/json',
'x-telemetry-type': 'traces',
},
};
const exporter = new OTLPTraceExporter(traceCollectorOptions);
const provider = new WebTracerProvider({
resource: resourceFromAttributes({
[ATTR_SERVICE_NAME]: 'memenews-website',
[ATTR_SERVICE_VERSION]: '1.0.0',
}),
spanProcessors: [
new BatchSpanProcessor(exporter, {
maxQueueSize: 1000,
maxExportBatchSize: 10,
scheduledDelayMillis: 500,
exportTimeoutMillis: 30000,
})
]
});
provider.register();
}, []);
return <>{children}</>;
};
export default OpenTelemetryProvider;And use it in your root layout: export default async function Layout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<ViewTransitions>
<html lang="zh-CN" style={{ scrollbarWidth: "none" }}>
<body
className={cn(
)}
>
<SessionProvider>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<OpenTelemetryProvider>
<main>{children}</main>
</OpenTelemetryProvider>
</ThemeProvider>
</SessionProvider>
</body>
</html>
</ViewTransitions>
)
} |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
WendaoLee
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Okay,I finnally find the anwser from https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-sdk-trace-web.
The config code should be put in your web files,like
index.html: