docs: add example config & API calls for network events

examples/custom-with-collector-ts/package.json

@@ -14,7 +14,7 @@
   "license": "ISC",
   "dependencies": {
     "@honeycombio/opentelemetry-web": "file:../../",
-    "@opentelemetry/auto-instrumentations-web": "~0.36.0"
+    "@opentelemetry/auto-instrumentations-web": "^0.40.0"
   },
   "devDependencies": {
     "html-webpack-plugin": "^5.5.4",

examples/custom-with-collector-ts/src/index.html

@@ -13,6 +13,11 @@
       <h1>Example app sending to a collector</h1>
     </header>
     <button id="button-important" data-cy="button">click me!</button>
+
+    <button id="loadDadJoke">Get A Random Dad Joke</button>
+    <div>
+      <span id="dadJokeText"></span>
+    </div>
   </section>
   <!-- Scripts here. Don't remove ↓ -->
   <script type="module" src="dist/index.js"></script>

examples/custom-with-collector-ts/src/index.ts

@@ -3,6 +3,10 @@ import { HoneycombWebSDK } from '@honeycombio/opentelemetry-web';
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
 
 const tracing = () => {
+  const configDefaults = {
+    ignoreNetworkEvents: true,
+  };
+
   const sdk = new HoneycombWebSDK({
     // To send direct to Honeycomb, set API Key and comment out endpoint
     // apiKey: 'api-key',
@@ -11,7 +15,14 @@ const tracing = () => {
     debug: true,
     skipOptionsValidation: true,
     resourceAttributes: { 'app.environment': 'development' },
-    instrumentations: [getWebAutoInstrumentations()], // add auto-instrumentation
+    instrumentations: [
+      // add auto-instrumentation
+      getWebAutoInstrumentations({
+        '@opentelemetry/instrumentation-xml-http-request': configDefaults,
+        '@opentelemetry/instrumentation-fetch': configDefaults,
+        '@opentelemetry/instrumentation-document-load': configDefaults,
+      }),
+    ],
   });
   sdk.start();
 };
@@ -20,13 +31,14 @@ const trackButton = (onClick: { (): void; (): void }) => {
   const button = document.getElementById(
     'button-important',
   ) as HTMLButtonElement;
-  const tracer = trace.getTracer('click-tracer');
 
-  button.onclick = () =>
-    tracer.startActiveSpan(`clicked the button`, (span) => {
+  button.onclick = () => {
+    const tracer = trace.getTracer('click-tracer');
+    return tracer.startActiveSpan(`clicked the button`, (span) => {
       onClick();
       span.end();
     });
+  };
 };
 
 const onClick = () => {
@@ -50,8 +62,29 @@ const onClick = () => {
   });
 };
 
+const setupAPICall = () => {
+  document.getElementById('loadDadJoke')!.onclick = () => {
+    fetch('https://icanhazdadjoke.com/', {
+      headers: {
+        'content-type': 'application/json',
+        accept: 'application/json',
+      },
+    })
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        document.getElementById('dadJokeText')!.innerText = data.joke;
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
+};
+
 const main = () => {
   tracing();
   trackButton(onClick);
+  setupAPICall();
 };
 main();

examples/custom-with-collector-ts/webpack.config.js

@@ -42,4 +42,5 @@ export default {
     compress: true,
     host: '0.0.0.0',
   },
+  devtool: 'eval-source-map',
 };

examples/hello-world-web/index.html

@@ -11,6 +11,11 @@
 			<header class="header">
 				<h1>👋 Hello World</h1>
 			</header>
+
+			<button id="loadDadJoke">Get A Random Dad Joke</button>
+			<div>
+				<span id="dadJokeText"></span>
+			</div>
 		</section>
 		<!-- Scripts here. Don't remove ↓ -->
 		<script type="module" src="build/bundle.js"></script>

examples/hello-world-web/index.js

@@ -1,20 +1,47 @@
 import { HoneycombWebSDK } from '@honeycombio/opentelemetry-web';
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
 
+const configDefaults = {
+  ignoreNetworkEvents: true,
+};
+
 const main = () => {
-  // Initialize base OTel WebSDK
+  // Initialize Honeycomb SDK
   const sdk = new HoneycombWebSDK({
-    // endpoint: 'http://localhost:4318', // send to collector
-    // To send to collector, comment out API Key
-    apiKey: 'api-key',
-    serviceName: 'web-distro',
+    // defaults to sending to US instance of Honeycomb
+    // endpoint: "https://api.eu1.honeycomb.io/v1/traces", // uncomment to send to EU instance
+    apiKey: 'api-key', // Replace with your Honeycomb Ingest API Key
+    serviceName: 'web-distro', // Replace with your application name. Honeycomb will name your dataset using this variable.
     debug: true,
-    instrumentations: [getWebAutoInstrumentations()], // add auto-instrumentation
-    // webVitalsInstrumentationConfig: {
-    //   enabled: false,
-    // },
+    instrumentations: [
+      getWebAutoInstrumentations({
+        // load custom configuration for xml-http-request instrumentation
+        '@opentelemetry/instrumentation-xml-http-request': configDefaults,
+        '@opentelemetry/instrumentation-fetch': configDefaults,
+        '@opentelemetry/instrumentation-document-load': configDefaults,
+      }),
+    ],
   });
   sdk.start();
+
+  // add event handlers
+  document.getElementById('loadDadJoke').onclick = () => {
+    fetch('https://icanhazdadjoke.com/', {
+      headers: {
+        'content-type': 'application/json',
+        accept: 'application/json',
+      },
+    })
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        document.getElementById('dadJokeText').innerText = data.joke;
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  };
 };
 
 main();