diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index bd28fcf46d..d9011499c0 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -80,16 +80,21 @@ const Sidebar = ({ id }: { id: SidebarId }) => { const June = useJune(); useEffect(() => { - const handleRouteChange = (url, { shallow }) => { - if (June) June.page(url); - }; + if (typeof June !== "undefined") { + const handleRouteChange = (url, { shallow }) => { + console.log("Tracking URL:", url); + June.track(url); + }; - router.events.on("routeChangeStart", handleRouteChange); + console.log("Adding event listener"); + router.events.on("routeChangeStart", handleRouteChange); - return () => { - router.events.off("routeChangeStart", handleRouteChange); - }; - }, [June]); + return () => { + console.log("Removing event listener"); + router.events.off("routeChangeStart", handleRouteChange); + }; + } + }, [June, router.events]); return ( { { name: 0, "Session bitrate": 0 }, ]); - const June = useJune(); const [multiDataChart, setMultiDataChart] = useState( [] ); @@ -35,8 +34,6 @@ const StreamHealthTab = ({ stream, streamHealth, invalidateStream }) => { const [info, setInfo] = useState(null); - June?.track(events.stream.health); - const { getStreamInfo } = useApi(); const { query } = router; diff --git a/packages/www/package.json b/packages/www/package.json index 49e51c35a2..245afa64e3 100644 --- a/packages/www/package.json +++ b/packages/www/package.json @@ -135,6 +135,7 @@ "@types/isomorphic-fetch": "^0.0.35", "@types/numeral": "^2.0.2", "@types/react-table": "^7.0.5", + "@types/react-tooltip": "^4.2.4", "@types/segment-analytics": "^0.0.32", "@types/theme-ui": "0.3.1", "@types/title": "^3.4.0",