You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
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.
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
The text was updated successfully, but these errors were encountered: