This topic explains how to use dashboards in LaunchDarkly observability.
Dashboards let you visualize what’s happening in your app. They can show error rates, APM trends, user engagement, and more. Dashboards are composed of graphs, which are visualizations of data that you can create and configure to show the data you want.
LaunchDarkly provides two types of dashboards:
To visualize service-to-service dependencies derived from your traces data, read Service map.
Default dashboards provide out-of-the-box observability for your applications without any configuration. To access default dashboards, navigate to Observability > Dashboards in the LaunchDarkly UI. The default dashboards will appear automatically once you have the required integrations configured and data is flowing.
There are three default dashboards available:
The frontend default dashboard monitors client-side application performance and user experience metrics. This dashboard includes three tabs:
The backend default dashboard monitors server-side application performance, including API endpoints and database queries. This dashboard includes two tabs:
The LLM Agent default dashboard monitors the performance and usage of large language model (LLM) calls in your application. This dashboard requires traces with gen_ai.* semantic convention attributes, such as gen_ai.operation.name, gen_ai.request.model, and gen_ai.usage.input_tokens.
Server-side SDK or OpenTelemetry traces with gen_ai.* semantic convention attributes. To learn more, read Observability SDKs.
The dashboard displays:
Custom dashboards are fully customizable dashboards that you can create, edit, and delete to meet your specific reporting needs. Unlike default dashboards, you have full control over the graphs, layout, and configuration of custom dashboards.
Here’s how to create a custom dashboard:
The new dashboard appears. For each Dashboard type, you can customize or remove graphs, and add additional graphs, to meet your reporting needs.
You can add graphs to a dashboard to visualize different data.
First, name the graph and specify how you want the data to display. Here’s how:
Next, build a query to populate the graph with data. Here’s how:
environment filter. To learn more about the filter syntax, read Search specification.
Then, choose options to group the data. Here’s how:
Finally, click Save. The new graph appears in the dashboard.
A heatmap is a map of clicks shown over a session background. A heatmap provides a visual layer that aggregates user interactions such as clicks, taps, or scrolls into color-coded intensity maps over your app or website.
You can create a session background for your app or website while watching a session.
Heatmaps help teams understand user behavior across key areas of an application. They make it easy to identify where users most often click or tap on critical workflows, and to find elements that appear interactive but receive little user engagement. Product, engineering, and design teams can use heatmaps to validate the impact of design or layout changes after a release, and to correlate engagement data with feature flags to measure how user interactions change before and after a rollout.
To use a heatmap, you must install and configure the session replay plugin to capture user sessions. Heatmaps are available only with web sessions.
To create a heatmap:
The heatmap overlay can identify several types of activity:
Hovering over a zone in the overlay also displays the element name with a numerical count of interactions for the element.
The graph editor provides two advanced graph creation tools: the SQL Editor, which you can use to query data for your graph, and dashboard variables, which you can use to parameterize graphs.
The SQL editor lets you write custom queries to retrieve your data and aggregate as you wish. Using the SQL editor is an alternative to using the graphical query builder.
When you are creating or updating a graph for your dashboard, you can choose SQL editor to write a custom query with SQL.
The SQL editor includes the following features and limitations:
The SQL editor supports the ClickHouse SQL dialect. To learn more, read the ClickHouse documentation.
The built-in macro $time_interval(<duration>) expands to toStartOfInterval(Timestamp, <duration>). You can use this macro to group results by their timestamp, which makes time series queries easier to write. Here’s an example that returns a count of logs for every hour:
The dashboard’s data range is automatically applied as a filter to all SQL queries. For example, if your graph uses SELECT count() from logs and your dashboard’s filter is Last 4 hours, your resulting graph will only include logs within the last four hours. If you use a WHERE clause, it will filter in addition to the dashboard’s date range filter, and it will not include results outside that range.
The SQL editor only supports a single SELECT query. However, you can include multiple select expressions. This displays multiple series on your graph. Here’s an example that returns an hourly count and average duration of all traces:
LaunchDarkly stores custom fields and metadata without any type information. You should convert this data to the appropriate type in your SQL queries. Here’s an example where your application records a custom integer field to record how many items are in an end user’s shopping cart:
You can use aliases in your SQL queries so that your data is graphed with custom labels. Here’s an example:
Dashboard variables let you parameterize filters, bucketing, and grouping across multiple graphs. This makes it easier to make changes to sets of graphs at one time. After you create a dashboard variable, you can reference it in any of the filter, function, grouping, or bucketing rules components of the graph editor.
You can create and edit dashboard variables from the dashboard or from the edit page for any graph.
Here’s how:
From the dashboard or the edit page of a graph, click Variables. The “Variables” dialog appears.
Click + New variable.
Enter a Name for the variable.
Select a Suggestion type for the variable. The following table describes the options:
Click Save.
In any of the filter, function, grouping, or bucketing rules components of the graph editor, reference your variable by entering a dollar ($) followed by the variable’s Name, for example, $environment or $emailAddress.
For each graph, you can always take a closer look at the underlying data. Here’s how:
Click Dashboards in the left navigation.
Find the dashboard you want to update and click its name.
Find the graph you want to examine and hover over its graphed data. A tooltip of the current datapoints appears.
Click to freeze the tooltip and show links to the details for each data point:
Click any of the details links to open a panel with the relevant sessions, errors, logs, or traces. The data points in the panel are filtered using the graph’s filters and the grouping, time range, or metric bucket for the specific data point that you selected.
From the detail panel, you can:
After you create a custom dashboard, you can review, update, and share it. You can also add additional graphs or make changes to existing graphs.
To share a custom dashboard, click Dashboards in the left navigation. Find the dashboard you want to update and click its name. From here, you can share the dashboard’s data in the following ways:
To update a custom dashboard, click Dashboards in the left navigation. Find the dashboard you want to update and click its name. From here, you can make the following updates:
To delete a custom dashboard:
Deleted custom dashboards cannot be restored.
If you delete a custom dashboard, you cannot restore it. Be absolutely certain you do not need the dashboard before you delete it.
You can overlay flag targeting changes on dashboard charts to correlate feature flag updates with changes in your application metrics. This is available on both default and custom dashboards.
To view flag targeting changes, select one or more flags using the Flags dropdown in the dashboard filter bar. Then select one or more environments using the Environments dropdown.
When enabled, markers appear on the time axis of each chart at the timestamp of each flat targeting change. If a flag has progressive rollout steps, the steps are connected with a line.
Hovering over a marker displays a tooltip with details about the change. Click View details in the tooltip to open the flag’s targeting history.
