web

Basic example showing distributed tracing from a web browser across node.js apps

This is an example app where a web browser and two express (node.js) services collaborate on an http request. Notably, timing of these requests are recorded into Zipkin, a distributed tracing system. This allows you to see the how long the whole operation took, as well how much time was spent in each service.

Here's an example of what it looks like

This example was initially shown at DevOpsDays Singapore on Oct 8, 2016. It was ported from similar examples, such as Spring Boot.

Implementation Overview

Web requests are served by Express controllers, and tracing is automatically performed for you by zipkin-js. JavaScript used in the web browser is bundled with browserify.

Running the example

This example has two services: frontend and backend. They both report trace data to zipkin. To setup the demo, you need to start frontend.js, backend.js and Zipkin. You'll also need to bundle the JavaScript used by the web browser.

Once the services are started, and the JavaScript is bundled, open index.html

• This starts a trace in the browser and calls the frontend (http://localhost:8081/)
• This continues the trace and calls the backend (http://localhost:9000/api) and show the result, which defaults to a formatted date.

Next, you can view traces that went through the backend via http://localhost:9411/?serviceName=browser

• This is a locally run zipkin service which keeps traces in memory

Setup

Before you start anything, you'll need to download the libraries used in this demo:

$ npm install

Once that's done, bundle the JavaScript used by the browser:

$ npm run browserify

Starting the Services

In a separate tab or window, run npm start, which will start both frontend.js and backend.js:

$ npm start

Next, run Zipkin, which stores and queries traces reported by the browser and above services.

$ curl -sSL https://zipkin.io/quickstart.sh | bash -s
$ java -jar zipkin.jar

Or, if you're using docker:

$ docker run -d -p 9411:9411 openzipkin/zipkin

Debugging

zipkin-js bundles events together and asynchronously sends them as json to Zipkin.

If you want to see which events are recorded vs the json sent to Zipkin as json, start your servers differently:

$ DEBUG=true npm start

Here's example output:

$ DEBUG=true npm start

> [email protected] start /Users/acole/oss/zipkin-js-example/web
> node servers.js

Backend listening on port 9000!
Frontend listening on port 8081!
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 ServiceName("frontend")
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 Rpc("OPTIONS")
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 BinaryAnnotation(http.path="/")
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 ServerRecv()
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 LocalAddr(host="InetAddress(192.168.43.211)", port=0)
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 BinaryAnnotation(http.status_code="200")
frontend recording: a1b7b7274a26ac85/a1b7b7274a26ac85 ServerSend()
frontend reporting: {"traceId":"a1b7b7274a26ac85","id":"a1b7b7274a26ac85","name":"options","kind":"SERVER","timestamp":1561769117353000,"duration":8233,"localEndpoint":{"serviceName":"frontend","ipv4":"192.168.43.211"},"tags":{"http.path":"/","http.status_code":"200"}}
--snip--

You can also see this in the browser's javascript console, if you reload index.html with the query parameter ?debug.

Here's example output: