docs(getting started): trace ingestion dotnet, browser (#4052)

* docs(getstarted): add dotnet

* docs(getstarted): add browser

* updating the browser example to use the tracetest sdk

* updating dependency

* Update examples/getting-started/browser/README.md

Co-authored-by: Julianne Fermi <[email protected]>

---------

Co-authored-by: Oscar Reyes <[email protected]>
Co-authored-by: Julianne Fermi <[email protected]>

Author: 3 people

docs/docs/getting-started/configure-trace-ingestion.mdx

@@ -350,6 +350,54 @@ java -javaagent:opentelemetry-javaagent.jar -jar /path/to/app.jar
 [Visit the example in GitHub, here.](https://github.com/kubeshop/tracetest/tree/main/examples/getting-started/java)
 :::
 
+</TabItem>
+<TabItem value="dotnet" label=".NET">
+
+1. Add Dependencies
+
+```bash title="Terminal"
+dotnet add package OpenTelemetry
+dotnet add package OpenTelemetry.Extensions.Hosting
+dotnet add package OpenTelemetry.Exporter.OpenTelemetryProtocol
+dotnet add package OpenTelemetry.Instrumentation.AspNetCore
+dotnet add package OpenTelemetry.Instrumentation.Http
+```
+
+2. Initialize Tracing
+
+```csharp title="Program.cs"
+// Import OpenTelemetry SDK
+using OpenTelemetry.Trace;
+var builder = WebApplication.CreateBuilder(args);
+builder.Services.AddControllers();
+// Configure OpenTelemetry Tracing
+builder.Services.AddOpenTelemetry().WithTracing(builder =>
+{
+  builder
+      // Configure ASP.NET Core Instrumentation
+      .AddAspNetCoreInstrumentation()
+      // Configure HTTP Client Instrumentation
+      .AddHttpClientInstrumentation()
+      // Configure OpenTelemetry Protocol (OTLP) Exporter
+      .AddOtlpExporter();
+});
+```
+
+3. Configure and Run
+
+```bash title="Terminal"
+export OTEL_SERVICE_NAME=my-service-name
+export OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
+export OTEL_EXPORTER_OTLP_ENDPOINT="http://<tracetest-agent>:4318"
+# export OTEL_EXPORTER_OTLP_HEADERS="x-tracetest-token=<token>"
+
+dotnet run
+```
+
+:::note View a code sample
+[Visit the example in GitHub, here.](https://github.com/kubeshop/tracetest/tree/main/examples/getting-started/dotnet)
+:::
+
 </TabItem>
 <TabItem value="ruby" label="Ruby">
 
@@ -379,7 +427,7 @@ end
 export OTEL_SERVICE_NAME=my-service-name
 export OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
 export OTEL_EXPORTER_OTLP_ENDPOINT="http://<tracetest-agent>:4318"
-export OTEL_EXPORTER_OTLP_HEADERS="x-tracetest-token=<token>"
+# export OTEL_EXPORTER_OTLP_HEADERS="x-tracetest-token=<token>"
 
 rails server -p 8080
 ```
@@ -388,6 +436,40 @@ rails server -p 8080
 [Visit the example in GitHub, here.](https://github.com/kubeshop/tracetest/tree/main/examples/getting-started/ruby)
 :::
 
+</TabItem>
+<TabItem value="browser" label="Browser">
+
+1. Install the Tracetest Web SDK
+
+```bash title="Terminal"
+npm i @tracetest/opentelemetry-web
+```
+
+2. Initialize Tracing
+
+```js title="instrumentation.js"
+import TracetestWebSDK from "@tracetest/opentelemetry-web";
+
+const sdk = new TracetestWebSDK({
+  serviceName: "browser-app",
+  endpoint: "http://<tracetest-agent>:4318/v1/traces",
+});
+
+sdk.start();
+```
+
+Load the `instrumentation.js` at the top of your browser app's header or `index.js` entrypoint file.
+
+```js title="index.js"
+import "./instrumentation";
+
+// rest of the app's entrypoint code
+```
+
+:::note View a code sample
+[Visit the example in GitHub, here.](https://github.com/kubeshop/tracetest/tree/main/examples/getting-started/browser)
+:::
+
 </TabItem>
 <TabItem value="docker" label="Docker">
 
@@ -574,13 +656,6 @@ service:
       exporters: [otlp/tracetest] # your exporter pointing to the Tracetest OTLP endpoint
 ```
 
-</TabItem>
-<TabItem value="more" label="More...">
-
-Using other programming languages? More guides are coming soon.
-
-Until then, check out our reference for getting started with OpenTelemetry below!
-
 </TabItem>
 </Tabs>
 

docs/docusaurus.config.js

@@ -259,7 +259,7 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
-        additionalLanguages: ["bash", "ruby"],
+        additionalLanguages: ["bash", "ruby", "csharp"],
       },
       algolia: {
         // The application ID provided by Algolia

examples/getting-started/browser/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/getting-started/browser/README.md

@@ -0,0 +1,74 @@
+# Step-by-step
+
+1. Install Dependencies
+
+      ```bash
+      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
+      ```
+
+2. Initialize Tracing
+
+`instrumentation.js`
+
+```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",
+  }),
+});
+
+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,
+      },
+    }),
+  ],
+});
+```
+
+`index.js` or entrypoint file
+
+```js
+import "./instrumentation";
+// rest of the app's entrypoint code
+```