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

This application was forked from the original source at https://github.com/openzipkin/zipkin-js-example and then modified to send traces to Splunk. Additionally, this repo contains Splunk apps and visualizations to help visualize and monitor the performance of services and traces.

The demo application includes a static web page and three node.js express services that are invoked to service the ttp request. Each component of the application is traced using Zipkin and all spans are recorded in Splunk. 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

Application Overview

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

This example has four services: frontend, thirdparty, backend and magical. Each service reports Zipkin trace data to Splunk. To setup the demo, you need to start the application (npm start) and Splunk Enterprise. 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/backend) and thridparty (http://localhost:9001/3rdParty). The backend service will make a call to the magical service (http://localhost:9002/magical) passing in a date value. The magical service returns a message that is then returned to the end user's browser.

You will want to add the splunk_apps_for_zipkin to your Splunk instance in the /opt/splunk/etc/apps folder and restart Splunk.

Next, you can view traces that went through the backend via http://<splunk_server>/en-US/app/zipkin/zipkin_overview

Quick Start

If you have Docker installed you can run this example in a few simple steps:

1. Clone or Download this repo
2. Start the sample App: run_app.sh

   $ ./run_app.sh

3. Start Docker
4. Start the Splunk container: run_splunk.sh

   $ ./run_splunk.sh

5. Test the app: http://localhost:8081
6. View your traces: http://localhost:8000/en-US/app/zipkin/zipkin_overview

Detailed Setup Instructions

Start by Cloning or downloading this repo.

Next, you'll need to install the required node modules used in this demo:

$ npm install

Next, set 2 environment variables to point to your Splunk instance. These are used in the recorder.js file.

export RECORDER_URL=http://localhost:8088/services/collector/raw
export RECORDER_AUTH='Splunk XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'

Note: This project includes shell scripts with examples for both Zipkin backend as well as Splunk as the backend. See the run_app_xxx.sh files for more details.

With your environment variables set, bundle the JavaScript used by the browser:

$ npm run browserify

Start the Services

Run npm start. This will start all 4 services:

1. frontend.js
2. backend.js
3. thirdparty.js
4. magical.js

$ npm start

Exercise the Application & View the Traces

Open a web browser and hit http://localhost:8081/ a few times

Open another web browser and view the traces in Splunk: http://localhost:8000/en-US/app/zipkin/zipkin_overview