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

OpenTelemetry instead of Application Insights #1320

Closed
qdraw opened this issue Dec 22, 2023 · 1 comment · Fixed by #1323 · May be fixed by #1329
Closed

OpenTelemetry instead of Application Insights #1320

qdraw opened this issue Dec 22, 2023 · 1 comment · Fixed by #1323 · May be fixed by #1329
Labels
enhancement New feature or request

Comments

@qdraw
Copy link
Owner

qdraw commented Dec 22, 2023

Is your feature request related to a problem? Please describe.

From februari onwards in App insights workspace-based are the new way to go and I'm unable to upgrade existing properties its needed to change provider.

Because App insights is microsoft specific it needs to be changed to an more open protocol

https://opentelemetry.io/docs/instrumentation/net/getting-started/
https://www.twilio.com/blog/build-a-logs-pipeline-in-dotnet-with-opentelemetry

Cientside

Step 4: Instrument React app with OpenTelemetry

To instrument the React app with OpenTelemetry, we need to install the OpenTelemetry dependencies.

yarn add -D @opentelemetry/api @opentelemetry/context-zone @opentelemetry/exporter-trace-otlp-http @opentelemetry/instrumentation-fetch

Step 5: Update Service Name and CollectorTrace Exporter

The file is located at src/helpers/tracing/index.ts, in the sample react app codebase.

const serviceName = "sample-react-app";
const resource = new Resource({ "service.name": serviceName });
const provider = new WebTracerProvider({ resource });
const collector = new CollectorTraceExporter({
url: "http://localhost:4318/v1/traces",
});

Source: https://signoz.io/blog/opentelemetry-react/

OR

Connect your browser instrumentation

Next, you need to set up your browser instrumentation. You’ll need NPM to install the required OpenTelemetry libraries. It’s best to start with OpenTelemetry’s auto instrumentation package for a quick and easy install. NPM installs the necessary packages and creates a file to load the instrumentation. For example, below is a tracing.js file you can use to get started:
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { ZoneContextManager } from '@opentelemetry/context-zone';
const { Resource } = require('@opentelemetry/resources');
const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
const exporter = new OTLPTraceExporter({
url: 'https://:443/v1/traces'
});
const provider = new WebTracerProvider({
resource: new Resource({
[SemanticResourceAttributes.SERVICE_NAME]: 'browser',
}),
});
provider.addSpanProcessor(new BatchSpanProcessor(exporter));
provider.register({
contextManager: new ZoneContextManager()
});
registerInstrumentations({
instrumentations: [
getWebAutoInstrumentations({
// load custom configuration for xml-http-request instrumentation
'@opentelemetry/instrumentation-xml-http-request': {
propagateTraceHeaderCorsUrls: [
/.+/g,
],
},
// load custom configuration for fetch instrumentation
'@opentelemetry/instrumentation-fetch': {
propagateTraceHeaderCorsUrls: [
/.+/g,
],
},
}),
],
});

And here are the dependencies used:This snippet shows configuration of OpenTelemetry to send data to your collector with some default AutoInstrumentations enabled.
npm install --save @opentelemetry/api
npm install --save @opentelemetry/sdk-trace-web
npm install --save @opentelemetry/exporter-trace-otlp-http
npm install --save @opentelemetry/auto-instrumentations-web
npm install --save @opentelemetry/context-zone

For Javascript, you register which instrumentation packages to load. Walking through the configuration above:This snippet shows the commands to load in the dependencies for OpenTelemetry in your web application.

getWebAutoInstrumentations automatically loads the DocumentLoad, Fetch, UserInteraction, and XMLHTTPRequest instrumentation libraries
DocumentLoad is useful to see how fast your page loads and which resources are taking the longest to return
Fetch and XMLHTTPRequest will instrument outgoing REST API calls.

source: https://www.honeycomb.io/blog/opentelemetry-browser-instrumentation

Describe the solution you'd like

Change to OpenTelemetry instead of App insights

Describe alternatives you've considered

Stout should continue to work

Additional context

@qdraw qdraw added the enhancement New feature or request label Dec 22, 2023
@qdraw
Copy link
Owner Author

qdraw commented Feb 9, 2024

Browser tracking isn't propper supported yet

@qdraw qdraw closed this as completed Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
1 participant