Add client-side javascript example. (#17)

* Add example for jaeger. * Fix indentation. * Correct indentation. * Remove PIC options. * Add client-side javascript example.
opentracing-contrib · Nov 30, 2017 · aff2405 · aff2405
1 parent 6e6ce17
commit aff2405
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 0 deletions.
diff --git a/example/browser/Dockerfile b/example/browser/Dockerfile
@@ -0,0 +1,26 @@
+FROM rnburn/nginx-opentracing
+
+WORKDIR /app
+ADD . /app
+RUN set -x \
+## install nodejs and node dependencies
+  && apt-get update \
+  && apt-get install --no-install-recommends --no-install-suggests -y \
+              python \
+              curl \
+              gnupg2 \
+  && mkdir /node-latest-install \
+  && cd /node-latest-install \
+  && curl -sL https://deb.nodesource.com/setup_7.x -o nodesource_setup.sh \
+  && bash nodesource_setup.sh \
+  && apt-get install --no-install-recommends --no-install-suggests -y \
+              nodejs \
+  && cd /app \
+  && npm install . \
+  && npm run browserify \
+  && mv index.html /usr/share/nginx/html \
+  && mv bundle.js /usr/share/nginx/html
+
+
+EXPOSE 80
+CMD ["/app/start.sh"]
diff --git a/example/browser/README.md b/example/browser/README.md
@@ -0,0 +1,9 @@
+A port of the [zipkin-js-example/web example](https://github.com/openzipkin/zipkin-js-example/tree/master/web) to use nginx.
+It features Nginx as a reverse-proxy in front node services and client-side tracing in the browser.
+Use these commands to run:
+```bash
+docker build -t nginx-example-browser .
+docker run -d -p 9411:9411 --name zipkin openzipkin/zipkin
+docker run -d -p 8080:80 --link zipkin:zipkin nginx-example-browser
+```
+Visit http://localhost:8080 in your browser and http://localhost:9411 to view the traces in Zipkin.
diff --git a/example/browser/index.html b/example/browser/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <pre id="log">Calling frontend service...</pre>
+    <script type="text/javascript" charset="utf-8" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/example/browser/nginx.conf b/example/browser/nginx.conf
@@ -0,0 +1,37 @@
+load_module modules/ngx_http_opentracing_module.so;
+load_module modules/ngx_http_zipkin_module.so;
+
+events {}
+
+http {
+  zipkin_collector_host $ZIPKIN_PORT_9411_TCP_ADDR;
+  zipkin_collector_port $ZIPKIN_PORT_9411_TCP_PORT;
+  zipkin_service_name nginx;
+  opentracing on;
+
+  upstream frontend {
+    server localhost:8081;
+  }
+
+  upstream backend {
+    server localhost:9000;
+  }
+
+  server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+    }
+
+    location /time {
+        proxy_pass http://frontend;
+    }
+
+    location /api {
+        proxy_pass http://backend;
+    }
+  }
+}
diff --git a/example/browser/node/backend.js b/example/browser/node/backend.js
@@ -0,0 +1,22 @@
+/* eslint-disable import/newline-after-import */
+// initialize tracer
+const express = require('express');
+const CLSContext = require('zipkin-context-cls');
+const {Tracer} = require('zipkin');
+const {recorder} = require('./recorder');
+
+const ctxImpl = new CLSContext('zipkin');
+const localServiceName = 'backend';
+const tracer = new Tracer({ctxImpl, recorder, localServiceName});
+
+const app = express();
+
+// instrument the server
+const zipkinMiddleware = require('zipkin-instrumentation-express').expressMiddleware;
+app.use(zipkinMiddleware({tracer}));
+
+app.get('/api', (req, res) => res.send(new Date().toString()));
+
+app.listen(9000, () => {
+  console.log('Backend listening on port 9000!');
+});
diff --git a/example/browser/node/browser.js b/example/browser/node/browser.js
@@ -0,0 +1,37 @@
+/* eslint-env browser */
+/* eslint-disable import/newline-after-import */
+// use higher-precision time than milliseconds
+process.hrtime = require('browser-process-hrtime');
+
+// setup tracer
+const {
+  BatchRecorder,
+  jsonEncoder: {JSON_V2}
+} = require('zipkin');
+const {HttpLogger} = require('zipkin-transport-http');
+
+const recorder = new BatchRecorder({
+  logger: new HttpLogger({
+    endpoint: 'http://localhost:9411/api/v2/spans',
+    jsonEncoder: JSON_V2
+  })
+});
+
+const {Tracer, ExplicitContext} = require('zipkin');
+
+const ctxImpl = new ExplicitContext();
+const localServiceName = 'browser';
+const tracer = new Tracer({ctxImpl, recorder, localServiceName});
+
+// instrument fetch
+const wrapFetch = require('zipkin-instrumentation-fetch');
+const zipkinFetch = wrapFetch(fetch, {tracer});
+
+const logEl = document.getElementById('log');
+const log = text => logEl.innerHTML = `${logEl.innerHTML}\n${text}`;
+
+// wrap fetch call so that it is traced
+zipkinFetch('http://localhost:8080/time')
+  .then(response => (response.text()))
+  .then(text => log(text))
+  .catch(err => log(`Failed:\n${err.stack}`));
diff --git a/example/browser/node/frontend.js b/example/browser/node/frontend.js
@@ -0,0 +1,43 @@
+/* eslint-disable import/newline-after-import */
+// initialize tracer
+const rest = require('rest');
+const express = require('express');
+const CLSContext = require('zipkin-context-cls');
+const {Tracer} = require('zipkin');
+const {recorder} = require('./recorder');
+
+const ctxImpl = new CLSContext('zipkin');
+const localServiceName = 'frontend';
+const tracer = new Tracer({ctxImpl, recorder, localServiceName});
+
+const app = express();
+
+// instrument the server
+const zipkinMiddleware = require('zipkin-instrumentation-express').expressMiddleware;
+app.use(zipkinMiddleware({tracer}));
+
+// instrument the client
+const {restInterceptor} = require('zipkin-instrumentation-cujojs-rest');
+const zipkinRest = rest.wrap(restInterceptor, {tracer});
+
+// Allow cross-origin, traced requests. See http://enable-cors.org/server_expressjs.html
+app.use((req, res, next) => {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Headers', [
+    'Origin', 'Accept', 'X-Requested-With', 'X-B3-TraceId',
+    'X-B3-ParentSpanId', 'X-B3-SpanId', 'X-B3-Sampled'
+  ].join(', '));
+  next();
+});
+
+app.get('/time', (req, res) => {
+  tracer.local('pay-me', () =>
+    zipkinRest('http://localhost/api')
+      .then(response => res.send(response.entity))
+      .catch(err => console.error('Error', err.stack))
+  );
+});
+
+app.listen(8081, () => {
+  console.log('Frontend listening on port 8081!');
+});
diff --git a/example/browser/node/recorder.js b/example/browser/node/recorder.js
@@ -0,0 +1,22 @@
+/* eslint-env browser */
+const {
+  BatchRecorder,
+  jsonEncoder: {JSON_V2}
+} = require('zipkin');
+const {HttpLogger} = require('zipkin-transport-http');
+
+// Send spans to Zipkin asynchronously over HTTP
+if (!process.env.ZIPKIN_HOST || !process.env.ZIPKIN_PORT) {
+  console.log("ZIPKIN_HOST and ZIPKIN_PORT must be set!");
+  process.exit(1);
+}
+const zipkinBaseUrl = 'http://' + process.env.ZIPKIN_HOST + ':' + 
+                       process.env.ZIPKIN_PORT
+const recorder = new BatchRecorder({
+  logger: new HttpLogger({
+    endpoint: `${zipkinBaseUrl}/api/v2/spans`,
+    jsonEncoder: JSON_V2
+  })
+});
+
+module.exports.recorder = recorder;
diff --git a/example/browser/node/servers.js b/example/browser/node/servers.js
@@ -0,0 +1,5 @@
+const path = require('path');
+const childProc = require('child_process');
+
+childProc.fork(path.join(__dirname, 'frontend.js'));
+childProc.fork(path.join(__dirname, 'backend.js'));
diff --git a/example/browser/package.json b/example/browser/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "zipkin-nginx-js-example",
+  "version": "0.0.1",
+  "description": "Example project that shows how to use zipkin with javascript",
+  "repository": "https://github.com/openzipkin/zipkin-js",
+  "scripts": {
+    "lint": "eslint .",
+    "start": "node node/servers.js",
+    "browserify": "browserify node/browser.js -o bundle.js"
+  },
+  "dependencies": {
+    "browser-process-hrtime": "^0.1.2",
+    "express": "^4.14.0",
+    "rest": "^1.3.2",
+    "zipkin": "^0.11.1",
+    "zipkin-context-cls": "^0.11.0",
+    "zipkin-instrumentation-cujojs-rest": "^0.11.1",
+    "zipkin-instrumentation-express": "^0.11.1",
+    "zipkin-instrumentation-fetch": "^0.11.1",
+    "zipkin-transport-http": "^0.11.1"
+  },
+  "devDependencies": {
+    "browserify": "^14.1.0",
+    "eslint": "^3.4.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.2.0"
+  }
+}
diff --git a/example/browser/start.sh b/example/browser/start.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+
+export ZIPKIN_HOST=$ZIPKIN_PORT_9411_TCP_ADDR
+export ZIPKIN_PORT=$ZIPKIN_PORT_9411_TCP_PORT
+envsubst '\$ZIPKIN_PORT_9411_TCP_ADDR \$ZIPKIN_PORT_9411_TCP_PORT' < /app/nginx.conf > /etc/nginx/nginx.conf
+
+npm start &
+nginx
+while /bin/true; do
+  sleep 50
+done