SDK: better support for SPA routing - STEP 2/2 : filter out html anchor tags changes

packages/rum/src/viewCollection.ts

@@ -48,6 +48,8 @@ export function startViewCollection(location: Location, lifeCycle: LifeCycle) {
       currentView.end()
       currentView = newView(lifeCycle, currentLocation, ViewLoadingType.ROUTE_CHANGE)
     } else {
+      // Anchor navigations would modify the location without generating a new view.
+      // These changes need to be acknowledged so they don't interfer with the next change areDifferentViews call
       currentLocation = { ...location }
     }
   }
@@ -176,13 +178,13 @@ function trackHash(onHashChange: () => void) {
   window.addEventListener('hashchange', monitor(onHashChange))
 }
 
-function isAnchorHashInPage(hash: string) {
-  const cleanedHash = hash.substr(1)
-  return !!document.getElementById(cleanedHash)
+function isHashAnAnchor(hash: string) {
+  const correspondingId = hash.substr(1)
+  return !!document.getElementById(correspondingId)
 }
 
 function areDifferentViews(previous: Location, current: Location): boolean {
-  return previous.pathname !== current.pathname || (!isAnchorHashInPage(current.hash) && previous.hash !== current.hash)
+  return previous.pathname !== current.pathname || (!isHashAnAnchor(current.hash) && previous.hash !== current.hash)
 }
 
 interface Timings {

test/e2e/scenario/agents.scenario.ts

@@ -273,11 +273,7 @@ describe('user action collection', () => {
 
 describe('anchor navigation', () => {
   it('should not create a new view when it is an Anchor navigation', async () => {
-    await $('#test-anchor')
-
-    await browserExecute(() => {
-      window.location.hash = '#test-anchor'
-    })
+    await $('#test-anchor').click()
 
     await flushEvents()
     const rumEvents = await waitServerRumEvents()
@@ -288,8 +284,6 @@ describe('anchor navigation', () => {
   })
 
   it('should create a new view on hash change', async () => {
-    await $('#test-anchor')
-
     await browserExecute(() => {
       window.location.hash = '#bar'
     })