jaegertracing / jaeger-ui

Web UI for Jaeger

Jaeger UI

Visualize distributed tracing with Jaeger.

Trace Search	Trace Details

Contributing

See CONTRIBUTING.

Stuck somewhere or found a bug? See Getting in Touch on how to ask for help.

Development

• Prerequisites
• Running the application
• Running on Windows OS

Prerequisites

• nvm (Node Version Manager)
• Node.JS
• npm package manager
• yarn package manager

The app was built with create-react-app.

Running the application

Fork and/or clone the jaeger-ui repo and change directory into it.

git clone https://github.com/jaegertracing/jaeger-ui.git
cd jaeger-ui

Use the recommended Node versions: (defined in .nvmrc file):

nvm use

Install dependencies via yarn:

yarn install --frozen-lockfile

Make sure you have the Jaeger Query service running on http://localhost:16686. For example, you can run Jaeger all-in-one Docker image as described in the documentation.

If you don't have it running locally, then tunnel to the correct host and port:

ssh -fN -L 16686:$BACKEND_HOST:$BACKEND_PORT $BACKEND_HOST

If you are using the UI Base Path feature, you need to append the base path into jaeger-ui/jaeger-ui/vite.config.js in proxyConfig object. For example, if the base path is "/jaeger", then the target should be "http://localhost:16686/jaeger" and your proxyConfig object would be:

const proxyConfig = {
  target: 'http://localhost:16686/jaeger',
  secure: false,
  changeOrigin: true,
  ws: true,
  xfwd: true,
};

Start the development server with hot loading:

yarn start

The above command will run a web server on http://localhost:5173 that will serve the UI assets, with hot reloading support, and it will proxy all API requests to http://localhost:16686 where Jaeger query should be running.

Commands

Command	Description
yarn start	Starts development server with hot reloading and api proxy.
yarn test	Run all the tests
yarn lint	Lint the project (eslint, prettier, typescript)
yarn fmt	Apply Prettier source code formatting
yarn build	Runs production build. Outputs files to packages/jaeger-ui/build.

Running on Windows OS

While we don't natively support Windows OS for running the Jaeger UI Dev Environment, you can use Windows Subsystem for Linux (WSL) to run it.

Here are some steps to follow:

1. Install WSL: https://learn.microsoft.com/en-us/windows/wsl/install
2. Install Node.JS: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl
3. Install Yarn: https://dev.to/bonstine/installing-yarn-on-wsl-38p2
4. Connect WSL Environment with VSCode: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl#install-visual-studio-code
5. Use the WSL Terminal inside VSCode and follow the Jaeger UI installation steps

UI Configuration

See the configuration guide for details on configuring Google Analytics tracking, menu customizations, and other aspects of UI behavior.

Debug unit tests from Vscode (launch.json file given below)

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Jest: current file",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": [
                "${file}"
            ],
            "console": "integratedTerminal",
            "cwd": "${workspaceFolder}/packages/jaeger-ui",
        },

    ]
}

See the configuration guide for details on configuring Google Analytics tracking, menu customizations, and other aspects of UI behavior.

License

Apache 2.0 License.

jaeger-ui's Issues

[trace view] Pan and zoom via keyboard shortcuts

Somewhat similar to Chrome's timeline view, we want to be able to zoom in/out (W, S) and pan left/right (A, D) with keyboard shortcuts.

UI cannot display search results or a single trace

I have a trace in the storage that is returned by the API endpoint as JSON below.
The search results containing this trace fail to render due to a JS error.
Display of the trace works, but when I click to expand the span, another JS error is logged, as well as a few warnings.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `TraceView`. See https://fb.me/react-warning-keys for more information.
    in pure(Component) (at index.js:431)
    in TraceView (at index.js:536)
    in div (at index.js:535)
    in TraceTimelineViewer (at index.js:167)
    in section (at index.js:152)
    in TracePage (created by Connect(TracePage))
    in Connect(TracePage) (created by RouterContext)
    in div (at Page.js:35)
    in div (created by Container)
    in Container (at Page.js:30)
    in section (at Page.js:29)
    in JaegerUIPage (created by MetricsContainer)
    in MetricsContainer (created by RouterContext)
    in RouterContext (created by Router)
    in Router (at index.js:68)
    in Provider (at index.js:67)
    in JaegerUIApp (at index.js:52)

Warning: Failed prop type: SpanDetail: prop type `trace` is invalid; it must be a function, usually from React.PropTypes.
    in SpanDetail (at index.js:229)
    in pure(Component) (at index.js:431)
    in div (at index.js:445)
    in TraceView (at index.js:536)
    in div (at index.js:535)
    in TraceTimelineViewer (at index.js:167)
    in section (at index.js:152)
    in TracePage (created by Connect(TracePage))
    in Connect(TracePage) (created by RouterContext)
    in div (at Page.js:35)
    in div (created by Container)
    in Container (at Page.js:30)
    in section (at Page.js:29)
    in JaegerUIPage (created by MetricsContainer)
    in MetricsContainer (created by RouterContext)
    in RouterContext (created by Router)
    in Router (at index.js:68)
    in Provider (at index.js:67)
    in JaegerUIApp (at index.js:52)

Uncaught TypeError: Cannot read property 'map' of undefined
    at ExpandableDataTable (SpanDetail.js:77)
    at ReactCompositeComponent.js:306
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:305)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:280)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:188)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

{
  "data": [
    {
      "traceID": "11c8c1d0dd824f77",
      "spans": [
        {
          "traceID": "11c8c1d0dd824f77",
          "spanID": "11c8c1d0dd824f77",
          "flags": 3,
          "operationName": "http",
          "startTime": 1496406341450000,
          "duration": 174000,
          "logs": [
            {
              "timestamp": 1496406341622000,
              "fields": [
                {
                  "key": "event",
                  "type": "string",
                  "value": "data_received"
                },
                {
                  "key": "chunk_length",
                  "type": "float64",
                  "value": 1137
                }
              ]
            },
            {
              "timestamp": 1496406341623000,
              "fields": [
                {
                  "key": "event",
                  "type": "string",
                  "value": "data_received"
                },
                {
                  "key": "chunk_length",
                  "type": "float64",
                  "value": 133
                }
              ]
            },
            {
              "timestamp": 1496406341624000,
              "fields": [
                {
                  "key": "event",
                  "type": "string",
                  "value": "request_end"
                }
              ]
            }
          ],
          "processID": "p1"
        }
      ],
      "processes": {
        "p1": {
          "serviceName": "example-svc",
          "tags": [
            {
              "key": "jaeger.hostname",
              "type": "string",
              "value": "ys-C02PQB6FG8WM"
            },
            {
              "key": "jaeger.version",
              "type": "string",
              "value": "Node-3.5.2"
            },
            {
              "key": "my-awesome-service.version",
              "type": "string",
              "value": "1.1.2"
            },
            {
              "key": "peer.ipv4",
              "type": "float64",
              "value": -1062731516
            }
          ]
        }
      }
    }
  ],
  "total": 0,
  "limit": 0,
  "offset": 0,
  "errors": null
}

Merged RPC spans not correctly shown, multi value tags not shown

Following screenshots shows:

• merged RPC spans are now shown (symbol ->)
• multi value tags are not shown

JSON: https://paste.fedoraproject.org/paste/1vNDb8L-OXZvZFeZVaBBUg
Jaeger master/79fba12
Discovered while testing https://github.com/uber/jaeger/pull/334

Reproducer:
https://github.com/pavolloffay/opentracing-java-examples/tree/jaeger-unknown-service-error-and-ui-issues
run spring-boot and curl localhost:8080/chaining

Update react-scripts to 1.0

We should update our react-scripts to be the latest and greatest.

https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html

Change tag search input to be more user friendly

Currently tag query must be entered into a single textbox with tag:value syntax, which is not obvious and too sensitive to white space. Also doesn't seem to work for multi-tag search at all.

The suggestion is to replace a single box with "add tag query" button which adds two text boxes side by side, for tag name (can be used with auto-complete in the future) and tag value. The button allows adding more tag queries. Each pair of key-value text boxes should have a red X to remove it from the search.

Add configurable, persistent links to the header

A site administrator should be able to add global, persistent links to the header.

Current needs for the links are:

• Support one level of grouping, e.g. Help -> { Wiki, Create Ticket, FAQs }
• Each link should have a label and a URL

The configuration mechanism should not be specific to this task, but general enough to support other scenarios, such as modifying the defaults for the search panel, etc.

Design of the configuration mechanism is TBD — details to be added after a design discussion.

Provide a search interface for log events

I'm using the OpenTracing API to add baggage to spans, which has produced a trace with the following log:

It would be great to be able to search traces for these events in a similar way to how tags can be searched e.g. something like the following to allow the example trace to be retrieved: event:baggage key:req-id value:b5a0akvpjll153h06o1g.

Search returns results in different order every time

Description
Multiple clicks on find traces returns results in different order every time

Steps to reproduce the issue:
report a bunch of traces and do multiple searches

Describe the results you received:
Multiple clicks on find traces returns results in different order every time

Describe the results you expected:
Expected some order every time according to the sort options defined

Additional environment details (Browser, etc.):
chrome

no way to retrieve all traces, regardless of operation name

The operation name has an "all" value in its dropdown, but when selecting that I receive only 3 results. If instead I pick some other arbitrary operation name that I know should be present in my traces, I have tons of results. Is 'all' supposed to return traces that contain any operation name?

Update to React 15.5

The latest version of React has been released:
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

UI responsiveness of the search page is sluggish when many spans in results

Description

The responsiveness of the search results page slows as the summed number of spans in the search results increases. For instance, with ~20,000 spans, the search form takes several seconds to register the focus on one of the text inputs.

Steps to reproduce the issue:

1. Using the HotROD app, register 400 traces

   var i = 100; var btns = [].slice.call(document.querySelectorAll('.hotrod-button')); while (i--) btns.forEach(btn => btn.click());
   

2. On the search page of the Jaeger UI, select Service = frontend and Limit Results = 400
3. Submit the search and let the page finish loading
4. Click the Min Duration text input
5. Note: Several seconds elapse before the input receives focus
6. Click the Max Duration text input
7. Note: Several seconds elapse before the input receives focus

Describe the results you received:

Several seconds elapse before the form inputs register focus.

Describe the results you expected:

The form inputs register focus immediately.

Additional information you deem important (e.g. issue happens only occasionally):

I've identified the underlying issue, have made changes to address it and will issue a pull request within the next couple of days.

npm install failed

npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No repository field.
npm ERR! peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.5.4
npm ERR! peerinvalid Peer [email protected] wants react@>= 0.14.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0-0 || ^15.4.0-0 || ^16.0.0-0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants [email protected] - 15.x
npm ERR! peerinvalid Peer [email protected] wants [email protected] - 15.x
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0 || ^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@^15.0.0
npm ERR! peerinvalid Peer [email protected] wants react@>=0.14.0 <= 15
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 0.14.x || ^15.0.0-0 || 15.x

I am not familiar with node, how can I fix the problem ?

[experimental] Change search panel to a single horizontal textbox

It could be an alternative way of displaying search params for advanced users. The idea is that you just type things into the textbox and some intelli-sense helper provides auto-completion. E.g.:

service=hystrix tag:debug-id=myID time=last-30-min

got error when querying

I deploy individual component manually, and got There was an error querying for traces: Unexpected token < in JSON at position 0 on the ui, like this.

It seems a query got a html response, so it can not be decoded by json decoder.

if a child span with no tag is reported, UI crashes when trying to expand it

reporting a span with no tag causes the UI to crash when trying to access the span detail in the trace view.

SpanDetail.js:77 Uncaught TypeError: Cannot read property 'map' of undefined
    at a (SpanDetail.js:77)
    at f._constructComponentWithoutOwner (ReactCompositeComponent.js:309)
    at f._constructComponent (ReactCompositeComponent.js:285)
    at f.mountComponent (ReactCompositeComponent.js:188)
    at Object.mountComponent (ReactReconciler.js:46)
    at f.performInitialMount (ReactCompositeComponent.js:371)
    at f.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at h.mountChildren (ReactMultiChild.js:238)
    at h._createInitialChildren (ReactDOMComponent.js:697)

Steps to reproduce the issue:

1. create a child span with no tag
2. access the detail view in the ui
3. click on the child span
4. the crash occurs.

Describe the results you received:
the crash

Describe the results you expected:
no crash

Additional information you deem important (e.g. issue happens only occasionally):

Additional environment details (Browser, etc.):
Chrome, but I don't think it matters

Span duration is offset from the span row

In the single trace view, the duration isn't rendered at the center of the span.

This offset is particularly noticeable for error rows that are highlighted in pink.

This is on Safari Version 10.1 (12603.1.30.0.34)

To reproduce, run the latest hotROD demo using instructions at jaeger.readthedocs.io/en/latest/getting_started/

TraceView header expander not working correctly

When the header of the trace view is collapsed, it leaves a bunch of whitespace. The goal of the expander was to allow for more screen real estate for the main timeline view.

cc @saminzadeh

Change auto-complete boxes to "contains"

Currently both the input for service name and operation name are matching the prefix of the service/operation. I think that it would be more convenient if instead it was testing if the typed text is a substring of any service/operation. It would be more convenient to just be able to type a fragment of the name, especially when multiple operations share the same prefix.

#30 (case-insensitive matching) is related

A real-life example with a long common prefix:

[trace view] childOf time ordering incorrect gets center aligned

Description
Intermittently the child spans dont display correctly under the parent
The child spans are there, its just that the placement on the timeline is incorrect
Looks like the child spans get centre aligned

Steps to reproduce the issue:

1. NodeJS
2. Create spans with multiple levels of childOf
3. Use const sampling

Describe the results you received:

I have added the actual start/end time of each span as a tag.
You can see in the attachment, that the 2nd expanded span is supposed to start early than the 1st expanded span

Describe the results you expected:
Child spans started at the correct time

Additional information you deem important (e.g. issue happens only occasionally):

Additional environment details (Browser, etc.):

        sampler: {
            type: 'const',
            param: 1,
        },
        reporter: {
            // logSpans: true,
            flushIntervalMs: 2000
        },

Span timeline not compatible with Safari

Safari

Chrome

[trace view] Better visualization of inter-service calls

In sharded storage implementations it's common for a request to one node to be forwarded to another node, e.g. Cassandra's coordinator node can talk to other nodes. The trace view currently colors spans by the service name only, so calls between different instances of the same service are colored the same, making it harder to understand without expanding the spans.

Some options to fix this:

1. take process hostname / ip into account when assigning the color
2. add an optional column Hostname to the grid
3. decorate service name to indicate different instances, e.g. cassandra[1], cassandra[2]
4. decorate service name with host name cassandra[host-001] if there are multiple nodes involved in the trace

Left panel "Find Traces" is not scrollable

When I zoom in browser I am not able to see the bottom of left panel "Find Traces" neither to scroll down. I'm only able to scroll down trace instances.

This issue was reported here in Red Hat MSA project when Jaeger is embedded in an iframe:

Support autocomplete by indexing tags and values for a given service

While the current interface supports searching by tags, it is often quite difficult to determine what tags to search by.

Maintaining the following maps would help us autocomplete tag search in the UI.

• service_name:{tag1, ...}
• service_name_tag1: {value1, ...}

The size of these maps, and the lengths of the tags and values can be bounded, and subject to a TTL.
Autocompleting search improves user experience by aiding discoverability of search terms, and preventing user errors during data input.

Infinite loop on the Dependencies view

When running a clean hotrod Docker image and having no data returned from dependencies endpoint the UI goes into infinite loop on the Dependencies tab

docker run -d -p5775:5775/udp -p16686:16686 jaegertracing/all-in-one:latest

Document allowed operators on tag search

The tag search prefilled text shows that a | is allowed, but there is no documentation about operators.

Make left column scrollable in trace detail view

Currently, if the viewport is small or when process / operation names are long, the left column truncates labels (see attached screenshot).

Making the left column scrollable will accommodate deeply nested spans, long process or operation names, and small viewport sizes.

Logs show 'event' as the first entry

Hi,

I think this would define a consistent way how to read logs as event is usually always present.

No service dependencies found.

Hi, i am new to jaeger ui. Jaeger ui showing like "No service dependencies found.". In package json i set proxy value to my api server url "http://localhost:16686". Please help me How to configure.

Find Traces Matching Multiple Services

Currently, you can only search spans belonging to a one service. It would be nice if you could find traces belonging to multiple services. Then, you could search tags where error:true on all tags or search for traces which include multiple services.

Rename "Span Name" column

in the Trace View the first column is called Span Name, where in fact it shows Service and Operation. Should we rename it to "Service & Operation".

I want to avoid using the term "endpoint" because it's not generic enough, better to stick with OpenTracing terminology.

Add support to "archive traces"

Users often ask for this feature. The trace retention period is usually short, and often people would put a link to the trace into some issue tracker to improve service performance, but by the time someone starts working on the ticket the trace has already expired.

The functionality is already supported in the backend, but missing UI changes. The idea is to add a button "Archive Trace" on the trace detail view (next to View Options dropdown), which opens (expands?) a form with:

• a dropdown to select the TTL (options: 1 month, 3 month, 1yr, indefinite)
• submit button that does a POST to /api/v1/archive/{trace_id}?ttldays=30 (or whichever is the best REST API, maybe move trace_id/ttldays to POST body)
• once the trace is archived, the form displays the permanent URL: http://.../archive/{trace_id}

The /archive/ route needs to make the webapp query /api/v1/archive/{trace_id} endpoint instead of the usual /traces endpoint. And it must also change View JSON to the same URL.

@saminzadeh wdyt? how hard is it to do?

[trace view] Merged RPC spans

We already have a feature that allows to collapse client-server (RPC) spans into one view, e.g.

However, there are a couple problems with the current implementation:

• This view is only available when the parent span is fully collapsed. Ideally we want this merged display to be independent of the collapsing behavior, because one cannot see the children spans of the server, meaning this merged RPC view is rarely useful
• When the client/server spans are merged, we still need to be able to see full details about each span. In the earlier discussions we decided that it's best to just stack client & server span details on top of each other when the merged span is expanded.
• The text describing the operation names does not fit in the allotted space, it should have a mouseover tip to show the full service::operation strings, or have that displayed in some other way

Make width of left column adjustable in trace detail view

The width of the left column in the trace detail view can be made adjustable to accommodate deeply nested spans, e.g. the same way the width of a column in a table can be adjusted.

Missing endpoints in jaeger ui dropdown

Currently, dropdowns in the Search page are limited to 250 results. This is implemented for performance reasons. Find a dropdown that has sufficient performance to meet our needs.

Ref: T1123163

Filter by Tag Value Objects

Currently you can filter results by tag. It would be nice if the value of the tag was a JSON object to be able to further index the object. For example:

tag key: http.headers
tag value: {"host": "foo.bar.com"}

It would be great to filter on http.headers.host:foo.bar.com

Hierarchical error span highlighting

Something we discussed in the past.

1. Use a red icon (like a stop sigh) next to span name to indicate errors, instead of highlighting the whole row
2. When the spans are collapsed, the error indicator should bubble up to the first visible ancestor span, but go back to the proper level when spans are expanded again.

[trave view] Mouseover expands truncated text to full length in left column

Show full text show of clipped Service + Operation text in left column on mouseover. Text should bleed into the right column (with a background added to it).

Re discussion of #63.

Highlight error traces

UI currently highlights error spans, however users have to open trace instance view to see if an error happened, therefore UI could also highlight error traces (under /search).

Possible views:

• change color of entire trace
• add number of error spans next to number of total spans per service.

Show running version in UI

Is there a way to show the actual version (or git hash before release) (UI, Server) in the UI ?

Tag Value Span Does Not Scroll Horizontally

Description

Tag value text does not horizontally scroll

Steps to reproduce the issue:
report a span with a really log tag value

Describe the results you received:
expected span to scroll horizontally

Describe the results you expected:
expected span to scroll horizontally

Additional information you deem important (e.g. issue happens only occasionally):

Additional environment details (Browser, etc.):
chrome

[trace view] Navigate and zoom via minimap

• when moving mouse over the minimap, show a crosshair
• if possible, show a horizontal line indicating the vertical scroll of the main timeline
• when clicking on minimap, the main timeline view should pan & scroll to center on the click point
• drag & release on minimap should zoom in (horizontally) on the respective area
• maybe remove the left/right drag handles from minimap once this is done, and instead use background color to indicate the current zoom level

Log js client side errors in our server side logs

We don't track errors in the UI, and rely on users to contact us when things break.

Adding such logging would allow for better discovery of js errors.

Use canvas instead of SVG for trace mini-map

To improve performance on traces with many spans, use the canvas API to render the trace mini-map instead of SVG elements.

[trace view] Span position in graph doesn't match its position in the detail

Description

As shown in the attached image, the position of the span in the graph does not match the position of the span in the detail section.

Steps to reproduce the issue:

Difficult to say, doesn't happen with every trace, and many traces are large so the span graph is very scaled down. Seems to be a parent-child vertical-sorting issue.

Describe the results you received:

The position of the span in the graph does not match the position of the span in the detail section.

Describe the results you expected:

The span positioning is consistent in both the graph and the trace detail view.

Additional information you deem important (e.g. issue happens only occasionally):

Issue is intermittent.

Multi-trace traceID search does not show 404s

Cf. https://github.com/uber/jaeger/issues/310

When a user retrieves multiple traces, a single trace that doesn't exist (due to TTLing) will return an error for the entire batch. This has been fixed on the query side to return as many traces as possible + errors for the traces that couldn't be fetched.

Current version of the UI does not parse the errors portion of the response, it only seems to react to the status code.

Use react-virtualized in trace detail view

Use react-virtualized in the trace detail (aka timeline) view to improve performance when viewing traces with many spans.

Multi-trace ID search query limits

At the moment opening up a search screen for many known trace IDs requires passing those IDs as URL parameters, which can run into length limits. The endpoint should support passing trace IDs in the body of the request, e.g. via POST. This may require some changes in the React router.

Highlight error spans

Hi,

does UI support highlighting error spans?

No support for Jaeger behind a reverse proxy

Jaeger does not run behind a reverse proxy due to how the css and js is being loaded.

<link href="/static/css/main.123456789.css" rel="stylesheet">

This can be corrected with something like

<link href="./static/css/main.123456789.css" rel="stylesheet">

Similarly with the js file.

Thanks

The Services dropdown search should be case-insensitive

The actual service names on the backend are case-sensitive, but the auto-complete in the dropdown should not be.