jaegertracing / jaeger-ui Goto Github PK

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.

• 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

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

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

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.

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

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

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

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.

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.

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

Hi,

does UI support highlighting error spans?

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

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?

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.

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.

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

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.

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.

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.

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

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

Safari

Chrome

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

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

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.

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.

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

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.

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/

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
}

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

Hi,

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

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

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:

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.

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.

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 ?

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.

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.

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:

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

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.

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

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?

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

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.

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
        },

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

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.