Skip to main content

URL sharing and navigation

  • 7 minutes

Building Dynatrace apps requires careful consideration of how users navigate, share, and collaborate around data. Two fundamental web platform features, URLs and the browser back button, play a critical role in creating intuitive user experiences. This guide outlines best practices for implementing URL-based state management and browser history handling in Dynatrace applications.

Why URLs matter in Dynatrace solutions​

URLs are more than just addresses—they're a fundamental part of the user interface. As Scott Hanselman famously stated, "URLs are UI." In Dynatrace contexts, where teams collaborate around incidents, performance issues, and system behavior, shareable URLs become essential collaboration tools.

Consider a typical scenario: A DevOps engineer discovers a performance anomaly in a dashboard filtered to a specific service, time range, and metric. They need to share this exact view with their team. Without proper URL state management, they'd need to write instructions like "Go to the dashboard, select Service X, set the time range to last 4 hours, and filter by error rate." With well-designed URLs, they can simply share a link.

The core principle: Bidirectional state synchronization​

The W3C's guidance on web architecture emphasizes that URLs should represent the state of a resource. For modern web applications, this means establishing bidirectional data flow between your application state and the URL:

  • When the URL changes (via navigation, back button, or direct access), the UI state updates accordingly.
  • When the UI state changes (via user interaction), the URL updates to reflect the new state.

This synchronization keeps URLs as the single source of truth for shareable application states.

What should go in the URL?​

States worth sharing​

Include UI states that make sense for users to share or bookmark.

In Dynatrace apps, this typically includes:

  • Time ranges: Absolute timestamps or relative timeframes (e.g., "last 15 minutes").
  • Entity selections: Specific hosts, services, applications, or processes being monitored.
  • Filter criteria: Status filters, tag filters, management zones.
  • View configurations: Selected metrics, chart types, grouping options, table configurations.
  • Navigation context: Active tab, expanded sections, selected dashboard.

Example URL structure:

/dashboards/service-overview?
    service=payment-api&
    timeframe=2h&
    metric=response-time&
    environment=production&
    view=chart

States to exclude​

Not everything belongs in the URL. According to best practices for URL design, avoid including:

  • Transient UI states: Hover states, tooltip visibility, loading indicators, foldouts, expanded accordions, etc.
  • Sensitive information: User credentials, personally identifiable information (PII).
  • Session-specific data: Temporary states that are not meaningful outside the current session.

Browser history API best practices​

The browser history API allows you to manage the user's navigation history seamlessly. Use the history.pushState() method to add a new entry to the history stack when the URL changes due to user interactions, such as filtering or navigating to a different view.

Note

For any automatic redirection, use the history API's replaceState method instead of pushState. It ensures a clean and usable history stack, preventing issues with navigation through history.

While this is most commonly relevant for initial redirects (for example, from the app's root location to the default view), it also applies to redirects that occur later in the app's lifecycle.

Key recommendations​

  • Use pushState for significant state changes, like switching dashboards or applying filters.
  • Use replaceState for minor updates, such as adjusting relative timeframes, to avoid cluttering the history stack.

Back button UX patterns​

The back button is one of the most frequently used navigational elements in modern browsers. It is crucial to ensure that the back button behaves as users expect.

In Dynatrace apps, this means pushing new history entries whenever a significant UI change occurs, such as switching between dashboards or applying filters. This ensures that users can navigate back to their previous state without confusion.

Scroll position management​

Scroll position is another critical aspect of navigation UX that directly impacts how users interact with the back button. Modern browsers automatically restore scroll positions when users navigate through history, but this default behavior doesn't always align with user expectations in dynamic web applications.

Understanding scroll restoration​

The History API provides the scrollRestoration property, which allows you to control how browsers handle scroll position when navigating through history. This property accepts two values:

  • auto (default): The browser automatically restores the scroll position to where the user was when they left the page.
  • manual: You take control of scroll behavior and must handle scroll position restoration yourself.

When to use automatic scroll restoration​

For most Dynatrace apps, the default auto behavior works well. Use automatic scroll restoration when:

  • Users navigate between distinct pages or views (for example, from a dashboard list to a specific dashboard).
  • Content loads synchronously and the page structure remains stable.
  • Users expect to return to their previous position when using the back button.

Example Dynatrace scenarios:

  • Navigating from a list of hosts to a specific host detail page.
  • Switching between different sections in Settings.
  • Browsing through problem lists or log entries.

When to use manual scroll restoration​

Set scrollRestoration to manual when you need custom control over scroll behavior. This is necessary when:

  • Your app performs page transitions or animations that conflict with automatic scroll restoration.
  • Content loads asynchronously and the page height changes dynamically.
  • You're implementing infinite scroll or virtualized lists.
  • The same URL can display different content based on application state.

Example Dynatrace scenarios:

  • Dashboards with dynamically loaded tiles that affect page height.
  • Metric charts that load data asynchronously.
  • Entity lists with lazy loading or infinite scroll.
  • Views with expandable sections that change the page layout.

Implementing manual scroll restoration​

When you set scroll restoration to manual, you're responsible for storing and restoring scroll positions. You can store scroll position data in the history state when using pushState():

Best practices for manual scroll restoration:

  • Store scroll position with history entries: Capture the current scroll position before navigation and store it using history.pushState() or history.replaceState().
  • Restore on popstate events: Listen for popstate events and restore the scroll position from the stored state.
  • Handle async content: Wait for dynamic content to load before restoring scroll position to avoid incorrect positioning.
  • Consider scroll regions: Don't forget about scrollable containers within your page—not just the main document scroll.

Scroll position and URL state​

Generally, you should not include scroll position in the URL query parameters. Scroll position is ephemeral navigation state, not shareable application state. When someone shares a URL, they want to share the content and filters, not their specific scroll position.

Exception: In rare cases where scroll position represents meaningful content location (such as a specific log entry in a long list), consider using anchor links or dedicated parameters that identify the content item rather than a pixel position.

Testing scroll behavior​

When implementing scroll management in your Dynatrace app, test these scenarios:

  • Navigate forward and back through multiple pages.
  • Use the back button after scrolling partway through a long page.
  • Navigate back to pages with dynamically loaded content.
  • Test on different screen sizes and resolutions.
  • Verify behavior with both keyboard and mouse navigation.

Dedicated share feature​

If your application requires complex URL handling, such as adjusting relative timeframes or managing long URLs, consider implementing a dedicated share feature. This feature can save the application state in a more manageable format and provide users with a shortened URL that can be easily shared.

Conclusion​

By implementing these guidelines, Dynatrace apps can offer a more intuitive user experience, enabling seamless navigation and effective collaboration among users. Shareable URLs, proper back button functionality, and scroll position management are essential components of any well-designed web application.

Still have questions?
Find answers in the Dynatrace Community