diff --git a/docs/docs/getting-started/configure-trace-ingestion.mdx b/docs/docs/getting-started/configure-trace-ingestion.mdx index a574cfab79..6976f28e0c 100644 --- a/docs/docs/getting-started/configure-trace-ingestion.mdx +++ b/docs/docs/getting-started/configure-trace-ingestion.mdx @@ -439,68 +439,23 @@ rails server -p 8080 -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://: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://: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. diff --git a/examples/getting-started/browser/package-lock.json b/examples/getting-started/browser/package-lock.json index b37e0d53f4..4163c1daa2 100644 --- a/examples/getting-started/browser/package-lock.json +++ b/examples/getting-started/browser/package-lock.json @@ -9,19 +9,10 @@ "version": "0.1.0", "hasInstallScript": 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", @@ -5446,47 +5437,17 @@ "uuid": "dist/bin/uuid" } }, - "node_modules/@tracetest/instrumentation-user-interaction": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@tracetest/instrumentation-user-interaction/-/instrumentation-user-interaction-0.2.0.tgz", - "integrity": "sha512-xZac1UPB0toYn7YqrmTeO8kbBRikbmtg2DKGXQh4PY4wkbgzPT+cP9vQqeL4slnd7cXogMk8wyzglvFfCl6HIw==", - "dependencies": { - "@opentelemetry/core": "^1.8.0", - "@opentelemetry/instrumentation": "^0.45.1", - "@opentelemetry/sdk-trace-web": "^1.8.0" - }, - "peerDependencies": { - "@opentelemetry/api": "^1.3.0", - "zone.js": "0.11.4" - } - }, - "node_modules/@tracetest/instrumentation-user-interaction/node_modules/@opentelemetry/instrumentation": { - "version": "0.45.1", - "resolved": "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.45.1.tgz", - "integrity": "sha512-V1Cr0g8hSg35lpW3G/GYVZurrhHrQZJdmP68WyJ83f1FDn3iru+/Vnlto9kiOSm7PHhW+pZGdb9Fbv+mkQ31CA==", + "node_modules/@tracetest/opentelemetry-web": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@tracetest/opentelemetry-web/-/opentelemetry-web-0.2.3.tgz", + "integrity": "sha512-Uk5b80xa4nrH0cMttSzD/xOiuI8tfb7nEbDMmnodSlukZtGG/aJER/Pj79VlT0oKPC6JrhRz2BbJzJrPp1yelQ==", "dependencies": { - "@types/shimmer": "^1.0.2", - "import-in-the-middle": "1.4.2", - "require-in-the-middle": "^7.1.1", - "semver": "^7.5.2", - "shimmer": "^1.2.1" - }, - "engines": { - "node": ">=14" + "@opentelemetry/auto-instrumentations-web": "^0.41.0", + "@opentelemetry/context-zone": "^1.26.0", + "debug": "^4.3.5" }, - "peerDependencies": { - "@opentelemetry/api": "^1.3.0" - } - }, - "node_modules/@tracetest/instrumentation-user-interaction/node_modules/import-in-the-middle": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-1.4.2.tgz", - "integrity": "sha512-9WOz1Yh/cvO/p69sxRmhyQwrIGGSp7EIdcb+fFNVi7CzQGQB8U1/1XrKVSbEd/GNOAeM0peJtmi7+qphe7NvAw==", - "dependencies": { - "acorn": "^8.8.2", - "acorn-import-assertions": "^1.9.0", - "cjs-module-lexer": "^1.2.2", - "module-details-from-path": "^1.0.3" + "bin": { + "tracetest-opentelemetry-web": "dist/index.js" } }, "node_modules/@tracetest/playwright": { @@ -6557,14 +6518,6 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", - "peerDependencies": { - "acorn": "^8" - } - }, "node_modules/acorn-import-attributes": { "version": "1.9.5", "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", diff --git a/examples/getting-started/browser/package.json b/examples/getting-started/browser/package.json index 006e30a0f8..e9792ef061 100644 --- a/examples/getting-started/browser/package.json +++ b/examples/getting-started/browser/package.json @@ -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", diff --git a/examples/getting-started/browser/src/instrumentation.js b/examples/getting-started/browser/src/instrumentation.js index 09be1a31ed..1ab5fcac32 100644 --- a/examples/getting-started/browser/src/instrumentation.js +++ b/examples/getting-started/browser/src/instrumentation.js @@ -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();