Adding TypeScript to "Getting Started"

content/en/docs/instrumentation/js/getting-started/browser.md

@@ -3,7 +3,14 @@ title: Browser
 aliases: [/docs/js/getting_started/browser]
 ---
 
-This guide uses the example application in HTML & javascript provided below, but the steps to instrument your own application should be broadly the same.
+While this guide uses the example application presented below, the steps to
+instrument your own application should be similar.
+
+## Prerequisites
+
+Ensure that you have the following installed locally:
+- [Node.js](https://nodejs.org/en/download/)
+- [TypeScript](https://www.typescriptlang.org/download), if you will be using TypeScript.
 
 ## Example Application
 
@@ -42,24 +49,37 @@ To create traces in the browser, you will need `@opentelemetry/sdk-trace-web`, a
 
 ```shell
 npm init -y
-npm install --save @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/instrumentation-document-load @opentelemetry/context-zone
+npm install  @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/instrumentation-document-load @opentelemetry/context-zone
 ```
 
 ### Initialization and Configuration
 
-Create a empty file called `document-load.js` and add the following code to your html right before the body end tag:
+If you are coding in TypeScript, then run the following command: 
+```shell
+tsc --init
+```
+Create an empty code file named `document-load` with a `.ts` or `.js` extension, as appropriate, based on the language you've chosen to write your app in. Add the following code to your HTML right before the `</body>` closing tag:
+
+{{< tabs TypeScript JavaScript >}}
 
-```html
+{{< tab lang="html">}}
+<script type="module" src="document-load.ts"></script>
+{{< /tab >}}
+
+{{< tab lang="html">}}
 <script type="module" src="document-load.js"></script>
-```
+{{< /tab >}}
+
+{{< /tabs >}}
 
 We will add some code that will trace the document load timings and output those as OpenTelemetry Spans.
 
 ### Creating a Tracer Provider
 
-Add the following code to the `document-load.js` to create a tracer provider, which brings the instrumentation to trace document load:
+Add the following code to the `document-load.ts|js` to create a tracer provider, which brings the instrumentation to trace document load:
 
-```javascript
+```js
+/* document-load.ts|js file - the code snippet is the same for both the languages */
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
@@ -101,9 +121,10 @@ Follow [these instructions](../../exporters) for setting up a backend and export
 
 You may also want to use the `BatchSpanProcessor` to export spans in batches in order to more efficiently use resources.
 
-To export traces to the console, modify `document-load.js` so that it matches the following code snippet:
+To export traces to the console, modify `document-load.ts|js` so that it matches the following code snippet:
 
-```javascript
+```js
+/* document-load.ts|js file - the code is the same for both the languages */
 import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';

content/en/docs/instrumentation/js/getting-started/nodejs.md

@@ -5,6 +5,12 @@ aliases: [/docs/js/getting_started/nodejs]
 
 This guide will show you how to get started with tracing in Node.js.
 
+## Prerequisites
+
+Ensure that you have the following installed locally:
+- [Node.js](https://nodejs.org/en/download/)
+- [TypeScript](https://www.typescriptlang.org/download), if you will be using TypeScript.
+
 ## Example Application
 
 This is a small example application we will monitor in this guide.
@@ -13,23 +19,54 @@ This is a small example application we will monitor in this guide.
 
 Create an empty package.json:
 
-```sh
+```shell
 npm init -f
 ```
 
 Install dependencies used by the example.
 
-```sh
+{{< tabs TypeScript JavaScript >}}
+
+{{< tab lang="shell">}}
+npm install express typescript ts-node express @types/express @types/node 
+{{< /tab >}}
+
+{{< tab lang="shell">}}
 npm install express
-```
+{{< /tab >}}
+
+{{< /tabs >}}
 
 ### Code
 
-Please save the following code as `app.js`.
+If you are using TypeScript, then run following command:
+
+```shell
+tsc --init
+```
+
+Create `app.ts|js` and add the following code to the file:
+
+{{< tabs TypeScript JavaScript >}}
 
-```javascript
-/* app.js */
+{{< tab >}}
+/*app.ts*/
+import express, { Express } from "express";
 
+const PORT: number = parseInt(process.env.PORT || "8080");
+const app: Express = express();
+
+app.get("/", (req, res) => {
+  res.send("Hello World");
+});
+
+app.listen(PORT), () => {
+  console.log(`Listening for requests on http://localhost:${PORT}`);
+};
+{{< /tab >}}
+
+{{< tab >}}
+/*app.js*/
 const express = require("express");
 
 const PORT = process.env.PORT || "8080";
@@ -42,14 +79,26 @@ app.get("/", (req, res) => {
 app.listen(parseInt(PORT, 10), () => {
   console.log(`Listening for requests on http://localhost:${PORT}`);
 });
-```
+{{< /tab >}}
+
+{{< /tab>}}
 
 Run the application with the following request and open <http://localhost:8080> in your web browser to ensure it is working.
 
-```sh
-$ node app.js
+{{< tabs TypeScript JavaScript >}}
+
+{{< tab lang="console">}}
+ts-node app.ts
 Listening for requests on http://localhost:8080
-```
+{{< /tab >}}
+
+{{< tab lang="console">}}
+node app.js
+Listening for requests on http://localhost:8080
+{{< /tab >}}
+
+{{< /tabs >}}
+
 
 ## Tracing
 
@@ -88,11 +137,30 @@ npm install @opentelemetry/auto-instrumentations-node
 
 The tracing setup and configuration should be run before your application code. One tool commonly used for this task is the [`-r, --require module`](https://nodejs.org/api/cli.html#cli_r_require_module) flag.
 
-Create a file with a name like `tracing.js` which will contain your tracing setup code.
+Create a file named `tracing.ts|js`, which will contain your tracing setup code.
 
-```javascript
-/* tracing.js */
+{{< tabs TypeScript JavaScript >}}
 
+{{< tab >}}
+/*tracing.ts*/
+// Require dependencies
+import * as opentelemetry from "@opentelemetry/sdk-node";
+import { getNodeAutoInstrumentations } from "@opentelemetry/auto-instrumentations-node";
+import { diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api';
+
+// For troubleshooting, set the log level to DiagLogLevel.DEBUG
+diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.INFO);
+
+const sdk: any = new opentelemetry.NodeSDK({
+  traceExporter: new opentelemetry.tracing.ConsoleSpanExporter(),
+  instrumentations: [getNodeAutoInstrumentations()]
+});
+
+sdk.start()
+{{< /tab >}}
+
+{{< tab >}}
+/*tracing.js*/
 // Require dependencies
 const opentelemetry = require("@opentelemetry/sdk-node");
 const { getNodeAutoInstrumentations } = require("@opentelemetry/auto-instrumentations-node");
@@ -107,16 +175,27 @@ const sdk = new opentelemetry.NodeSDK({
 });
 
 sdk.start()
-```
+{{< /tab >}}
+
+{{< /tabs >}}
 
 ### Run Application
 
 Now you can run your application as you normally would, but you can use the `--require` flag to load the tracing code before the application code.
 
-```shell
+{{< tabs TypeScript JavaScript >}}
+
+{{< tab lang="console">}}
+$ ts-node --require './tracing.ts' app.ts
+Listening for requests on http://localhost:8080
+{{< /tab >}}
+
+{{< tab lang="console">}}
 $ node --require './tracing.js' app.js
 Listening for requests on http://localhost:8080
-```
+{{< /tab >}}
+
+{{< /tabs >}}
 
 Open <http://localhost:8080> in your web browser and reload the page a few times, after a while you should see the spans printed in the console by the `ConsoleSpanExporter`.