Observability Kit Reference
Observability Kit is a custom Java agent based on the OpenTelemetry standard, with preconfigured instrumentation for Vaadin Flow applications.
A Java agent is a special set of classes which, by using the Java Instrumentation API, can intercept applications running on the JVM and inject code to provide more functionality.
OpenTelemetry is an emerging standard for generating, collecting and exporting telemetry data, such as traces, metrics, and logs. It’s supported by various tools and vendors. Vaadin tests and supports integrations with selected vendors. Check the documentation for your preferred observability platform to learn how to use traces and spans.
Caution
|
New Standard
Observability Kit should work with any vendor that supports the OpenTelemetry standard. However, support from specific vendors may still be limited or incomplete.
|
Observability Kit builds on the automatic instrumentation provided by OpenTelemetry by implementing instrumentation on Vaadin-specific classes. This provides plenty of framework-specific details that can be used to identify issues, track performance, or observe user behavior.
Traces
A trace represents an operation that happened within the application. Traces consist of spans, which are nested operations that happened during the trace (e.g., method, database or API calls). Spans can contain attributes, which contain information about the operation, as well as events indicating something occurring at a specific time.
Observability Kit collects traces for all requests made against the application, and generates spans for internal framework calls, as well as external calls to databases and remote services. Observability Kit can also be customized to provide specific details about what happens in the application. See the Customization page for more on this.
Observability Kit creates traces for all Flow-specific requests against the application, and spans for framework-specific operations. It also adds span attributes that can be used to filter traces or spans, or to inspect more details about an operation.
The following sections list the most relevant traces and spans, and their attributes created by Observability Kit.
UI Requests
This creates a trace for every request that’s related to a UI, using the current view’s route template as name (e.g., /products/:productId
).
Static File Requests
This creates a trace for all static files that are served, using the path as name (e.g., /static/image.png
).
Dynamic Stream Requests
This creates a trace for all dynamic content streamed from a StreamResource
, using the resource’s name (e.g., /dynamic/[ui]/[secret]/export.csv
).
Navigation
This creates a nested span whenever a navigation is triggered, either from the client or the server. The span name contains the view’s route template (e.g., Navigation: /products/:productId
).
Attribute | Description |
---|---|
| Whether the navigation was a result of a forwarding request. |
| The target route of the navigation. |
| Whether the navigation was triggered from the client or the server. |
Browser Events
This creates a span whenever a browser event is handled by a UI, such as click events. The span name contains a descriptive label of the element that was the source of the event, as well as the event name (e.g., Event: vaadin-button[Save] :: click
).
Attribute | Description |
---|---|
| The tag name of the element that was the source of the event. |
| The event type. |
| The simple Java class name of the UI’s currently active view, for example |
Element Synchronization
This creates a span whenever an element property has changed and is synchronized to the server. The span name contains a descriptive label for the element, as well as the property name (e.g., Sync: vaadin-text-field[label='Customer Name'].value
).
Attribute | Description |
---|---|
| The property that was synchronized. |
| The tag name of the element that was the source of the event. |
| The simple Java class name of the UI’s currently active view (e.g., |
Server Calls
This creates a span whenever the client calls a server method that’s annotated with ClientCallable
(e.g., Invoke server method: Grid.select
).
Attribute | Description |
---|---|
| The signature of the method that was called. |
| The qualified class name of the component on which the method was called. |
Data Provider Fetches
This creates a span whenever a component fetches data from a data provider (e.g., Data Provider Fetch
).
Attribute | Description |
---|---|
| The requested amount of items to load. |
| The offset from where to start loading items. |
| The qualified class name of the data provider class. |
Common Attributes
In addition to the span-specific attributes, some spans have the following set of attributes:
Attribute | Description | Set On | Usage |
---|---|---|---|
| The host name that triggered the request. | All traces and root spans. | To filter traces by host name. |
| A view’s route template, excluding any actual parameter values, or a path for file and stream requests. | All traces and root spans. | To filter traces for specific views. |
| A view’s actual route, including parameter values, or a path for file and stream requests. | All traces and root spans. | To check which parameters were provided to a view through its route. |
| The Flow version used by the application. | All traces and root spans. | |
| The type of Flow request made against the application. | All traces and root spans. | To filter traces for a specific request type. |
| The Vaadin session ID for the request. | All spans. | To filter traces for a specific session. |
Spans
Each span represents a unit of work or an operation of an application. Observability Kit creates spans for Vaadin-specific operations and attaches some useful attributes and any errors that arise.
Errors
The Kit records an error when the root span and any nested spans have handled an exception. If an exception is thrown, the corresponding stack trace is in the span details.
An exception may be handled and wrapped or re-thrown, which may result in several nested span levels reporting errors. In such a case, the original exception stack trace is in the details of the lowest span in the tree with an error marked against it.
Attributes
Each span has attributes associated with it. Along with the attributes that OpenTelemetry provides, Observability Kit provides Vaadin-specific attributes that can help diagnose problems with an application.
Global Attributes
All Vaadin-specific spans contain the vaadin.session.id
attribute. This uniquely identifies the Vaadin session involved.
Request Attributes
Request spans have the following attributes:
Attribute | Description |
---|---|
| For a static file request, this contains the requested file. |
| The version of Vaadin Flow that’s being used (e.g., 23.1.6). |
| The type of request, such as |
| For a successful static file request, this contains "Up to date". |
Navigation Attributes
The attributes for navigation spans (e.g., Navigate: /index
) are listed in the table here. They provide context for the cause of the navigation.
Attribute | Description |
---|---|
| Whether the navigation event is the result of a |
| The requested navigation case (e.g., "/index"). |
| The type of user interaction that triggered the navigation event (e.g., |
View Attributes
These are attributes of spans related to a Vaadin view.
Attribute | Description |
---|---|
| When a component is being rendered, this shows the component class name. |
| When an element’s properties are synced from the client, this shows the property that’s affected. |
| The corresponding HTML tag for the element related to the span. |
| When an element is being attached, this shows the target element to which it’s being attached. |
| The type of event that has been fired by a Vaadin component. This is discussed further in Event Types. |
| For an |
| This contains the related view’s class name. |
| This contains the service URL of a web component. |
Other Attributes
The table here lists and describes other attributes.
Attribute | Description |
---|---|
| When a server event is handled, this shows the method that was called. |
| When data is being fetched, this contains the result limit, the number of rows to be returned. |
| When data is being fetched, this contains the result offset, the number of rows to skip. |
| When data is being fetched, this contains the data provider class name. |
Event Types
Components in Vaadin fire events when certain properties are changed or actions are performed. These are captured by Observability Kit instrumentation. The vaadin.event.type
attribute can be found on the corresponding span. The attribute contains the type of event that was fired.
Here are some of the more important events:
Event | Description | Note |
---|---|---|
change | Fired when the user commits a change. | |
input | Fired when a field value is changed by the user. | |
value-changed | Fired when the | The event doesn’t contain the new value. |
invalid-changed | Fired when the | The event doesn’t contain the new value. |
opened-changed | Fired when the | Check the |
checked-changed | Fired when the | The event doesn’t contain the new value. |
selected-items-changed | Fired when the | The event doesn’t contain the new value. |
Metrics
A metric is a measurement of a service, captured at runtime. Observability Kit captures a range of JVM metrics, such as memory usage and CPU usage. It also captures Vaadin-specific metrics, including the number of open sessions and session duration.
Application and request metrics are important indicators of availability and performance. Custom metrics can provide insights into how availability indicators impact user experience.
Metrics are categorized into three types:
- Counter
-
A single value that only increases. An example is the number of classes loaded into the JVM.
- Gauge
-
A single value that’s measured in intervals. The memory used by the JVM is an example of this.
- Histogram
-
Samples observations (e.g., individual request durations) and distributes them into buckets. Each bucket counts the number of observations that fall into a specific value range. Histograms are typically used to calculate quantiles. They also provide a total sum of all observed values and the total count of observations. This allows calculations of averages.
Vaadin-Specific Metrics
Metric | Type | Description |
---|---|---|
| Gauge | The number of open sessions. |
| Histogram | The duration of individual sessions. |
| Gauge | The number of current UIs managed by the application. |
Database Connection Pool Metrics
Metric | Type | Description |
---|---|---|
| Histogram | The time it took to create a new connection. |
| Gauge | The minimum number of idle connections allowed. |
| Gauge | The maximum number of connections allowed. |
| Gauge | The number of pending requests for an open connection, cumulative for the entire pool. |
| Histogram | The time between borrowing a connection and returning it to the pool. |
| Histogram | The time it took to get an open connection from the pool. |
JVM Metrics
Below is a list of JVM metrics, each one’s type, and a description of each:
Metric | Type | Description |
---|---|---|
| Gauge | The number of buffers in the pool. |
| Gauge | Total capacity of the buffers in this pool, in bytes. |
| Gauge | Memory that the Java virtual machine is using for this buffer pool, in bytes. |
| Gauge | Number of classes currently loaded. |
| Counter | Number of classes loaded since JVM start. |
| Counter | Number of classes unloaded since JVM start. |
| Gauge | Recent CPU usage for the process. |
| Gauge | Average CPU load of the whole system for the last minute. |
| Gauge | Recent CPU usage for the whole system. |
| Gauge | Measure of memory committed, in bytes. |
| Gauge | Measure of initial memory requested, in bytes. |
| Gauge | Measure of maximum obtainable memory, in bytes. |
| Gauge | Measure of memory used, in bytes. |
| Gauge | Number of executing threads. |
Frontend Traces
Frontend traces provide spans with data related to operations and events initiated by the frontend application — within the browser. Observability Kit provides several instrumentation modules for observing the frontend, which are detailed below.
All frontend spans have the following attributes:
Attribute | Description |
---|---|
| The instrumentation module name. For example, |
| A unique identification for the Vaadin UI associated with the span. This can be used to track spans being emitted from a particular browser tab. |
Document Load
This creates spans when a page is first loaded (e.g., Frontend: documentLoad
). These represent the initial document load, document fetch, and each resource fetch. Each span has the following attributes:
Attribute | Description |
---|---|
| The URL of the requested document or resource. |
User Interaction
This creates spans when a user interacts with the application (e.g., Frontend: click
). This includes events such as click
. Each span has the following attributes:
Attribute | Description |
---|---|
| The type of user interaction event (e.g., |
| The document element that is the target of the event. |
| The XPath query for the target element. |
XMLHttpRequest
This creates spans when there is an asynchronous request from the frontend (e.g., Frontend: HTTP POST
) — also known as AJAX. Each span has the following attributes:
Attribute | Description |
---|---|
| The HTTP method used for the request (e.g., |
| The response code. |
| The URL of the AJAX request. |
Long Task
A long task (e.g., Frontend: longtask
) is defined as any operation that takes more than 50 milliseconds to complete. This creates spans to record when an operation is considered a long task. Each span has the following attributes:
Attribute | Description |
---|---|
| The duration of the task in milliseconds. |
| The browsing context or frame that can be attributed to the long task. |
Frontend Error
Frontend error instrumentation (e.g., Frontend: windowError
) creates spans for errors and unhandled rejection events fired on the browser. Each span has the following attributes, that may be present or not based on the type of the intercepted event:
Attribute | Description |
---|---|
| The exception type. |
| The exception message. |
| The source code file name that identifies the code unit as uniquely as possible. |
| The line number in |
| Full HTTP request URL in the form |
Spans may also contain an event
representing the error reason, with the following attributes:
Attribute | Description |
---|---|
| The exception type. |
| The exception message. |
| The error stack trace as a string. |