Next.js: Route Events handlers are not being called

[pencilcheck]

Following the instructions in README to listen to route events doesn't work

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

It should be called and I should see the console logs

Current Behavior

Nothing

Steps to Reproduce (for bugs)

1. Add the code (either in pages/*.js or pages/_document.js)

// onRouteChangeStart(url) - Fires when a route starts to change
Router.onRouteChangeStart = (url) => {
  console.log('App is changing to: ', url)
}

// onRouteChangeComplete(url) - Fires when a route changed completely
Router.onRouteChangeComplete = (url) => {
  console.log('App has changed to: ', url)
}

// onRouteChangeError(err, url) - Fires when there's an error when changing routes
Router.onRouteChangeError = (err, url) => {
  console.log('App has error when changing: ', err, url)
}

// onBeforeHistoryChange(url) - Fires just before changing the browser's history
Router.onBeforeHistoryChange = (url) => {
  console.log('App is changing to before history change: ', err, url)
}

// onAppUpdated(nextRoute) - Fires when switching pages and there's a new version of the app
Router.onAppUpdated = (nextRoute) => {
  console.log('App is updating to: ', nextRoute)
}

1. Refresh the page, and click around and add some Router.push events
2. Nothing in inspector
3. ??

Context

I can't use this to track pageviews for my in-house analytics system.

Your Environment

| Tech | Version |
|---------|---------|
| next | 2.4.6 |
| node | 8.1.3 |
| OS | 10.12.5 |
| browser | chrome 60.0.3112.72 (Official Build) beta (64-bit) |
| etc | |

[lfades]

Have you tried using next beta?

[pencilcheck]

No, is it fixed in beta?

[lfades]

Look at this example: https://github.com/zeit/next.js/tree/v3-beta/examples/page-transitions.
the onRouteChangeStart event works fine with next in latest. I don't know if that's the beta version.

[arunoda]

@pencilcheck You can't use this in pages/_document.js. It's a server only special page.

[arunoda]

@pencilcheck You need to move all of these route events into a separate module and import that on all the pages.

One of your event hook has an error. See:
(The err variable is not there)

// onBeforeHistoryChange(url) - Fires just before changing the browser's history
Router.onBeforeHistoryChange = (url) => {
  console.log('App is changing to before history change: ', err, url)
}

[arunoda]

Thanks for this issue.
I fixed a related bug as well: https://github.com/zeit/next.js/pull/2663

Anyway, I hope we can close this issue.

[pencilcheck]

Thanks, will test again later.

[Ponjimon]

I currently have the problem that onRouteChangeStart is called, but onRouteChangeComplete is not despite the fact that I visually see the changes e.g. it successfully changed the route...

What can I do?