fix(beatport_importer): avoid SPA navigation bugs via fetch() interception (#838)

- in the previous #744 PR I implemented an SPA navigation interception in order to re-run the necessary bits of the script when navigation happens; however there was a bug in that implementation: navigating to a release page after a fresh load from the home page would not trigger the script. The reason is: `__NEXT_DATA__` never gets updated upon such navigations.
- an easy solution is to run the data fetch request towards Beatport API every time such navigation happens, not only when the Release ID from the state matches the one from the URL. However, since Beatport already runs a fetch request to get the release data for itself, it makes more sense to intercept that request and grab the data we need from it, and then return it back to Beaport. This way it is possible to speed up script execution and avoid running an unnecessary copycat query towards the API.

Author: arsinclair

src/lib/shared/spa-navigation.ts

@@ -1,5 +1,4 @@
 type SubscribeToSPANavigationProps = {
-    beforeNavigate?: () => void;
     onNavigate: () => Promise<void>;
     delay?: number;
 };
@@ -8,12 +7,11 @@ type SubscribeToSPANavigationProps = {
  * Subscribe to Single Page Application (SPA) navigation events.
  * Works with frameworks like Next.js that use pushState/replaceState for client-side routing.
  *
- * @param beforeNavigate - Callback function to execute before navigation occurs
  * @param onNavigate - Callback function to execute when navigation occurs
  * @param delay - Delay in milliseconds before calling onNavigate (default: 200ms)
  * @returns Cleanup function to unsubscribe from navigation events
  */
-export function subscribeToSPANavigation({ beforeNavigate, onNavigate, delay = 200 }: SubscribeToSPANavigationProps): () => void {
+export function subscribeToSPANavigation({ onNavigate, delay = 200 }: SubscribeToSPANavigationProps): () => void {
     let currentUrl = window.location.href;
     const originalPushState = history.pushState.bind(history);
     const originalReplaceState = history.replaceState.bind(history);
@@ -22,7 +20,6 @@ export function subscribeToSPANavigation({ beforeNavigate, onNavigate, delay = 2
         const newUrl = window.location.href;
         if (newUrl !== currentUrl) {
             currentUrl = newUrl;
-            beforeNavigate?.();
             setTimeout(() => {
                 void onNavigate();
             }, delay);
@@ -44,7 +41,6 @@ export function subscribeToSPANavigation({ beforeNavigate, onNavigate, delay = 2
     // Listen for browser navigation (back/forward)
     const popstateHandler = () => {
         currentUrl = window.location.href;
-        beforeNavigate?.();
         setTimeout(() => {
             void onNavigate();
         }, delay);

src/userscripts/beatport_importer/index.ts

@@ -1,13 +1,17 @@
-import { type ArtistCredit, type Disc, type Label, type Release, type Track, type URL } from '~/types/importers';
-import { MBImport } from '~/lib/mbimport';
 import { Logger, LogLevel } from '~/lib/logger';
+import { MBImport } from '~/lib/mbimport';
 import { MBImportStyle } from '~/lib/mbimportstyle';
 import { subscribeToSPANavigation } from '~/lib/shared/spa-navigation';
-import { getBeatportReleaseData } from './utils/getBeatportReleaseData';
+import { type ArtistCredit, type Disc, type Label, type Release, type Track, type URL } from '~/types/importers';
+import { getBeatportReleaseData, installFetchInterceptor } from './utils/getBeatportReleaseData';
+
 import type { BeatportReleaseData, BeatportTrackData } from './types';
 
 const LOGGER = new Logger('beatport_importer', LogLevel.INFO);
 
+// Capture Beatport's release fetches to avoid duplicate requests on SPA navigation
+installFetchInterceptor(LOGGER);
+
 // prevent JQuery conflicts, see http://wiki.greasespot.net/@grant
 window.$ = window.jQuery = jQuery.noConflict(true);
 
@@ -22,11 +26,19 @@ const cleanup = () => {
     $(`#${MB_IMPORT_BARCODE_ELEMENT}`).remove();
 };
 
-async function processReleasePage() {
-    const releaseData = await getBeatportReleaseData(LOGGER);
+async function processReleasePage(ranFrom: string) {
+    cleanup();
 
     const isReleasePage = window.location.pathname.includes('/release/');
-    if (!releaseData || !isReleasePage) {
+    if (!isReleasePage) {
+        return;
+    }
+
+    console.log('ranFrom', ranFrom);
+
+    const releaseData = await getBeatportReleaseData(LOGGER);
+    if (!releaseData || !releaseData.pageProps.release) {
+        LOGGER.error('Could not find release data on the release page');
         return;
     }
 
@@ -61,16 +73,15 @@ async function processReleasePage() {
 
 // Subscribe to SPA navigation events
 subscribeToSPANavigation({
-    beforeNavigate: cleanup,
-    onNavigate: processReleasePage,
+    onNavigate: () => processReleasePage('SPA navigation'),
 });
 
 $(document).ready(() => {
     MBImportStyle();
 
     // Process initial page load
     setTimeout(() => {
-        void processReleasePage();
+        void processReleasePage('initial page load');
     }, 1000);
 });
 

src/userscripts/beatport_importer/meta.json

@@ -1,7 +1,7 @@
 {
     "name": "Import Beatport releases to MusicBrainz",
     "description": "One-click importing of releases from beatport.com/release pages into MusicBrainz",
-    "version": "2026.03.14.1",
+    "version": "2026.03.14.2",
     "author": "VxJasonxV",
     "namespace": "https://github.com/murdos/musicbrainz-userscripts/",
     "downloadURL": "https://raw.githubusercontent.com/murdos/musicbrainz-userscripts/dist/beatport_importer.user.js",

src/userscripts/beatport_importer/types.ts

@@ -100,7 +100,7 @@ export type BeatportSSRState = {
 
 export type BeatportPageData = {
     pageProps: {
-        release: BeatportReleaseData;
+        release: BeatportReleaseData | undefined;
         dehydratedState: {
             queries: Array<{
                 queryKey: string;

src/userscripts/beatport_importer/utils/getBeatportReleaseData.ts

@@ -1,34 +1,92 @@
 import type { BeatportPageData, BeatportSSRState } from '../types';
 import { Logger } from '~/lib/logger';
 
-export const getBeatportReleaseData = async (logger: Logger): Promise<BeatportPageData | null> => {
-    const initialNextDataElement = document.getElementById('__NEXT_DATA__');
-    if (!initialNextDataElement) {
+/**
+ * Cache for release data intercepted from Beatport's own fetch requests.
+ * When the user navigates via SPA, Beatport fetches the release JSON — we capture
+ * it here to avoid making a duplicate request.
+ */
+const interceptedReleaseCache = new Map<string, BeatportPageData>();
+
+/**
+ * Install a fetch interceptor to capture Beatport's release data responses.
+ * Call once at script load, before any navigation can occur.
+ */
+export function installFetchInterceptor(logger: Logger): void {
+    const originalFetch = window.fetch.bind(window);
+    window.fetch = async function (input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+        const response = await originalFetch(input, init);
+        const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+        const releaseMatch = url.match(/beatport\.com\/_next\/data\/[^/]+\/[a-z]{2}(?:-[a-z]{2})?\/release\/[^/]+\/(\d+)\.json/);
+        const releaseId = releaseMatch?.[1];
+        if (releaseId && response.ok) {
+            response
+                .clone()
+                .json()
+                .then((data: unknown) => {
+                    const pageData = data as BeatportPageData;
+                    const releaseIdFromData = pageData.pageProps.release?.id.toString();
+                    if (releaseIdFromData === releaseId) {
+                        interceptedReleaseCache.set(releaseId, pageData);
+                    }
+                })
+                .catch((error: unknown) => {
+                    logger.error('Error parsing release data: ', error as Error);
+                });
+        }
+        return response;
+    };
+}
+
+function getLocaleFromPath(): string {
+    const match = window.location.pathname.match(/^\/([a-z]{2}(?:-[a-z]{2})?)\//);
+    return match?.[1] ?? 'en';
+}
+
+async function fetchReleaseFromNextDataApi(buildId: string, releaseId: string, logger: Logger): Promise<BeatportPageData | null> {
+    const locale = getLocaleFromPath();
+    const name_placeholder = '0'; // NextJS ignores this parameter
+    const pageDataURL = `https://www.beatport.com/_next/data/${buildId}/${locale}/release/${name_placeholder}/${releaseId}.json?id=${releaseId}`;
+    try {
+        const response = await fetch(pageDataURL);
+        const pageData = (await response.json()) as unknown as BeatportPageData;
+        return pageData;
+    } catch (error) {
+        logger.error('Error fetching release data:', error);
         return null;
     }
-    const data = JSON.parse(initialNextDataElement.innerHTML) as unknown as BeatportSSRState;
+}
 
-    const buildId = data.buildId;
-    const initialReleaseId = data.props.pageProps.release.id.toString();
+export const getBeatportReleaseData = async (logger: Logger): Promise<BeatportPageData | null> => {
     const releaseIdFromURL = window.location.pathname.match(/release\/[^/]+\/(\d+)/)?.[1];
-
     if (!releaseIdFromURL) {
         return null;
     }
-    if (releaseIdFromURL === initialReleaseId) {
-        return data.props;
-    } else if (releaseIdFromURL !== initialReleaseId) {
-        const name_placeholder = '0'; // NextJS ignores this parameter
-        const pageDataURL = `https://www.beatport.com/_next/data/${buildId}/en/release/${name_placeholder}/${releaseIdFromURL}.json`;
-        try {
-            const response = await fetch(pageDataURL);
-            const pageData = (await response.json()) as unknown as BeatportPageData;
-            return pageData;
-        } catch (error) {
-            logger.error('Error fetching release data:', error);
-            return null;
+
+    // Use intercepted response from Beatport's own fetch (SPA navigation) to avoid duplicate request
+    const cached = interceptedReleaseCache.get(releaseIdFromURL);
+    if (cached) {
+        interceptedReleaseCache.delete(releaseIdFromURL);
+        return cached;
+    }
+
+    const initialNextDataElement = document.getElementById('__NEXT_DATA__');
+    if (initialNextDataElement) {
+        const data = JSON.parse(initialNextDataElement.innerHTML) as unknown as BeatportSSRState;
+        const initialReleaseId = data.props.pageProps.release?.id.toString();
+
+        // __NEXT_DATA__ has matching release (direct load or refresh)
+        if (initialReleaseId === releaseIdFromURL) {
+            return data.props;
+        }
+
+        // __NEXT_DATA__ is from a different page (e.g. Home) or different release - fetch from API
+        const buildId = data.buildId;
+        if (buildId) {
+            return fetchReleaseFromNextDataApi(buildId, releaseIdFromURL, logger);
         }
     }
 
+    logger.error('Cannot fetch release data: no __NEXT_DATA__ or buildId found');
     return null;
 };