Navigation

Every URL change captured as a timeline marker, for both hard reloads and SPA navigations.

What's captured

FieldExample
from/dashboard
to/orders/42
title"Order 42 - MyApp"
triggerpushState / replaceState / popstate / hard_reload
Timestamp1700000000000

How it works

At init, the SDK patches history.pushState and history.replaceState and listens to popstate. This covers:

  • Next.js <Link> navigation (both App Router and Pages Router)
  • React Router <NavLink> + navigate()
  • Vue Router router.push()
  • SvelteKit <a> + goto()
  • Vanilla history.pushState / back/forward buttons

No extra config. No router-specific adapter.

On React Native

The web navigation hook doesn't apply. Instead, the SDK listens to React Navigation's navigationStateChange event if React Navigation is in the tree. You can also emit manually:

import { trackScreen } from "@galacha/react-native";
 
// In your navigator
trackScreen("OrderDetail", { orderId: "42" });

trackScreen is a no-op if the SDK isn't initialized, safe to call anywhere.

Route changes in the dashboard

The replay timeline shows a thin purple marker at every URL change. Click a marker to jump the scrubber. The top of the replay panel shows the current URL at any point in the replay.

Filtering by URL

In the sessions list, use the URL filter to find "all sessions that visited /checkout". Good for:

  • Debugging a broken page by watching every session that landed on it
  • Finding sessions where users bounced off a specific screen
  • Cohort analysis: "everyone who went through /onboarding/step-3"

Query strings

Full URL with query string is captured. If your query params contain tokens or session IDs, strip them before navigating, or use the network exclusions mechanism to drop matching requests.

Hash-based routing

hashchange is also hooked. Apps using #/path style routing (older SPAs, GitHub Pages deploys) work the same way.

Related