Skip to content

Commit

Permalink
updating the browser example to use the tracetest sdk
Browse files Browse the repository at this point in the history
  • Loading branch information
xoscar committed Oct 16, 2024
1 parent 47872f8 commit 83c9d0c
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 161 deletions.
59 changes: 7 additions & 52 deletions docs/docs/getting-started/configure-trace-ingestion.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -439,68 +439,23 @@ rails server -p 8080
</TabItem>
<TabItem value="browser" label="Browser">

1. Install Dependencies
1. Install the Tracetest Web SDK

```bash title="Terminal"
npm i @opentelemetry/core \
@opentelemetry/sdk-trace-web \
@opentelemetry/sdk-trace-base \
@opentelemetry/instrumentation \
@opentelemetry/exporter-trace-otlp-http \
@opentelemetry/context-zone \
@tracetest/instrumentation-user-interaction \
@opentelemetry/auto-instrumentations-web \
@opentelemetry/resources
npm i @tracetest/opentelemetry-web
```

2. Initialize Tracing

```js title="instrumentation.js"
import { CompositePropagator, W3CBaggagePropagator, W3CTraceContextPropagator } from "@opentelemetry/core";
import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { registerInstrumentations } from "@opentelemetry/instrumentation";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { ZoneContextManager } from "@opentelemetry/context-zone";
import { UserInteractionInstrumentation } from "@tracetest/instrumentation-user-interaction";
import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
import { Resource } from "@opentelemetry/resources";

const provider = new WebTracerProvider({
resource: new Resource({
"service.name": "browser-app",
}),
});
import TracetestWebSDK from "@tracetest/opentelemetry-web";

provider.addSpanProcessor(
new BatchSpanProcessor(new OTLPTraceExporter({ url: "http://<tracetest-agent>:4318/v1/traces" }), {
maxQueueSize: 10000,
scheduledDelayMillis: 200,
})
);

provider.register({
contextManager: new ZoneContextManager(),
propagator: new CompositePropagator({
propagators: [new W3CBaggagePropagator(), new W3CTraceContextPropagator()],
}),
const sdk = new TracetestWebSDK({
serviceName: "browser-app",
endpoint: "http://<tracetest-agent>:4318/v1/traces",
});

registerInstrumentations({
tracerProvider: provider,
instrumentations: [
new UserInteractionInstrumentation(),
getWebAutoInstrumentations({
"@opentelemetry/instrumentation-fetch": {
propagateTraceHeaderCorsUrls: /.*/,
clearTimingResources: true,
},
"@opentelemetry/instrumentation-user-interaction": {
enabled: false,
},
}),
],
});
sdk.start();
```

Load the `instrumentation.js` at the top of your browser app's header or `index.js` entrypoint file.
Expand Down
67 changes: 10 additions & 57 deletions examples/getting-started/browser/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 1 addition & 10 deletions examples/getting-started/browser/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@opentelemetry/auto-instrumentations-web": "^0.41.0",
"@opentelemetry/context-zone": "^1.26.0",
"@opentelemetry/core": "^1.26.0",
"@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
"@opentelemetry/instrumentation": "^0.53.0",
"@opentelemetry/resources": "^1.26.0",
"@opentelemetry/sdk-trace-base": "^1.26.0",
"@opentelemetry/sdk-trace-web": "^1.26.0",
"@opentelemetry/semantic-conventions": "^1.27.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@tracetest/instrumentation-user-interaction": "^0.2.0",
"@tracetest/opentelemetry-web": "^0.2.3",
"@tracetest/playwright": "^0.2.1",
"dotenv": "^16.4.5",
"react": "^18.3.1",
Expand Down
47 changes: 5 additions & 42 deletions examples/getting-started/browser/src/instrumentation.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,8 @@
import { CompositePropagator, W3CBaggagePropagator, W3CTraceContextPropagator } from "@opentelemetry/core";
import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
import { registerInstrumentations } from "@opentelemetry/instrumentation";
import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
import { ZoneContextManager } from "@opentelemetry/context-zone";
import { UserInteractionInstrumentation } from "@tracetest/instrumentation-user-interaction";
import { getWebAutoInstrumentations } from "@opentelemetry/auto-instrumentations-web";
import { Resource } from "@opentelemetry/resources";
import TracetestWebSDK from "@tracetest/opentelemetry-web";

const provider = new WebTracerProvider({
resource: new Resource({
"service.name": "browser-app",
}),
const sdk = new TracetestWebSDK({
serviceName: "browser-app",
endpoint: "http://localhost:4318/v1/traces",
});

provider.addSpanProcessor(
new BatchSpanProcessor(new OTLPTraceExporter({ url: "http://localhost:4318/v1/traces" }), {
maxQueueSize: 10000,
scheduledDelayMillis: 200,
})
);

provider.register({
contextManager: new ZoneContextManager(),
propagator: new CompositePropagator({
propagators: [new W3CBaggagePropagator(), new W3CTraceContextPropagator()],
}),
});

registerInstrumentations({
tracerProvider: provider,
instrumentations: [
new UserInteractionInstrumentation(),
getWebAutoInstrumentations({
"@opentelemetry/instrumentation-fetch": {
propagateTraceHeaderCorsUrls: /.*/,
clearTimingResources: true,
},
"@opentelemetry/instrumentation-user-interaction": {
enabled: false,
},
}),
],
});
sdk.start();

0 comments on commit 83c9d0c

Please sign in to comment.