fix: Catch hash change errors, and emit a routeChangeError event (#36828)

* fix: Catch hash change errors, and emit a `routeChangeError` event

* Add test

* update test

Co-authored-by: JJ Kasper <[email protected]>

Author: icyJoseph

packages/next/shared/lib/router/router.ts

@@ -1080,7 +1080,15 @@ export default class Router implements BaseRouter {
       if (scroll) {
         this.scrollToHash(cleanedAs)
       }
-      this.set(nextState, this.components[nextState.route], null)
+      try {
+        await this.set(nextState, this.components[nextState.route], null)
+      } catch (err) {
+        if (isError(err) && err.cancelled) {
+          Router.events.emit('routeChangeError', err, cleanedAs, routeProps)
+        }
+        throw err
+      }
+
       Router.events.emit('hashChangeComplete', as, routeProps)
       return true
     }

test/integration/client-navigation/test/index.test.js

@@ -1714,6 +1714,26 @@ describe('Client Navigation', () => {
     expect(value).toBe(false)
   })
 
+  it('should emit routeChangeError on hash change cancel', async () => {
+    const browser = await webdriver(context.appPort, '/')
+
+    await browser.eval(`(function() {
+      window.routeErrors = []
+      
+      window.next.router.events.on('routeChangeError', function (err) {
+        window.routeErrors.push(err)
+      })
+      window.next.router.push('#first')
+      window.next.router.push('#second')
+      window.next.router.push('#third')
+    })()`)
+
+    await check(async () => {
+      const errorCount = await browser.eval('window.routeErrors.length')
+      return errorCount > 0 ? 'success' : errorCount
+    }, 'success')
+  })
+
   it('should navigate to paths relative to the current page', async () => {
     const browser = await webdriver(context.appPort, '/nav/relative')
     let page