@blaze-cms/nextjs-tools 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/src/components/DebugSidebar/DebugSidebar.js

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { IoCloseOutline } from 'react-icons/io5';
+import { useRouter } from 'next/router';
+import { MdKeyboardArrowLeft, MdEdit } from 'react-icons/md';
+import { Link } from '@blaze-cms/nextjs-components';
+import Switches from '@blaze-react/switches';
+import { buildAdminHref, setBlazeDebug } from '../../helpers';
+import { DEBUG_LOGO, BLAZE_DEBUG } from '../../constants';
+
+const DebugSidebar = ({ itemEntity, itemId, updatedDebugOptions, debugMode, setIsDebugMode }) => {
+  const router = useRouter();
+  const [isEditorMode, setIsEditorMode] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
+
+  const divClass = classnames('debug-sidebar', {
+    'debug-sidebar--open': isOpen,
+    'debug-sidebar--close': !isOpen
+  });
+
+  const toggleEditorMode = () => {
+    // todo: persist editor mode in local storage
+    // const currentEditorMode = getFromLocal(BLAZE_PB_EDITOR_MODE);
+    // if (currentEditorMode) {
+    //   window.localStorage.removeItem(BLAZE_PB_EDITOR_MODE);
+    // } else {
+    //   window.localStorage.setItem(BLAZE_PB_EDITOR_MODE, true);
+    // }
+    updatedDebugOptions('editorModeEnabled', !isEditorMode);
+    updatedDebugOptions({
+      editorModeEnabled: !isEditorMode,
+      adminHref: buildAdminHref({ itemEntity, itemId })
+    });
+    setIsEditorMode(!isEditorMode);
+  };
+
+  const href = buildAdminHref({ itemEntity, itemId });
+
+  const closeDebug = () => {
+    setBlazeDebug(setIsDebugMode);
+    window.blaze.debug();
+
+    const [pathname, search = ''] = router.asPath.split('?');
+    const params = new URLSearchParams(search);
+    params.delete(BLAZE_DEBUG);
+    const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname;
+
+    router.push('/Resolver', newUrl, {
+      shallow: true
+    });
+  };
+
+  return createPortal(
+    <div className={divClass} data-testid="debug-sidebar">
+      <Link href={href} target="_blank">
+        <img src={DEBUG_LOGO.SRC} alt={DEBUG_LOGO.ALT} />
+      </Link>
+      <div
+        role="button"
+        className="debug-sidebar__button debug-sidebar__button--close"
+        data-testid="debug-sidebar-close"
+        aria-label="Close debug sidebar"
+        onClick={closeDebug}>
+        <IoCloseOutline />
+      </div>
+      <Switches
+        onChange={toggleEditorMode}
+        name="debug-sidebar-switch"
+        icon={<MdEdit />}
+        alignVertically
+        returnBoolean
+        onText="ON"
+        offText="OFF"
+        options={{
+          id: 'debug-sidebar-switch',
+          checked: isEditorMode
+        }}
+      />
+      <div
+        role="button"
+        className="debug-sidebar__button open"
+        data-testid="debug-sidebar-button"
+        id="debug-sidebar-button"
+        onClick={() => setIsOpen(!isOpen)}>
+        <i>
+          <MdKeyboardArrowLeft />
+        </i>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+DebugSidebar.propTypes = {
+  updatedDebugOptions: PropTypes.func.isRequired,
+  itemEntity: PropTypes.string,
+  itemId: PropTypes.string,
+  debugMode: PropTypes.bool,
+  setIsDebugMode: PropTypes.func.isRequired
+};
+
+DebugSidebar.defaultProps = {
+  itemEntity: '',
+  itemId: '',
+  debugMode: false
+};
+
+export default DebugSidebar;

package/src/components/DebugSidebar/DebugSidebarRender.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { setBlazeDebug, getFromLocal } from '../../helpers';
+import { BLAZE_DEBUG } from '../../constants';
+
+const DebugSidebar = dynamic(() => import('./DebugSidebar'));
+
+const DebugSidebarRender = ({ itemEntity, itemId, updatedDebugOptions, debugMode }) => {
+  const [isDebugMode, setIsDebugMode] = useState(debugMode);
+  const router = useRouter();
+
+  useEffect(() => {
+    const currentDebugValue = getFromLocal(BLAZE_DEBUG);
+    setIsDebugMode(currentDebugValue);
+    setBlazeDebug(setIsDebugMode);
+  }, []);
+
+  useEffect(() => {
+    const handleRouteChange = url => {
+      const hasDebug = url.includes(`${BLAZE_DEBUG}=1`);
+      if (hasDebug) {
+        setBlazeDebug(setIsDebugMode);
+      }
+    };
+
+    if (router.asPath.includes(`${BLAZE_DEBUG}=1`)) {
+      handleRouteChange(router.asPath);
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events, router.asPath]);
+
+  if (!isDebugMode) return null;
+
+  return (
+    <DebugSidebar
+      itemEntity={itemEntity}
+      itemId={itemId}
+      updatedDebugOptions={updatedDebugOptions}
+      debugMode={debugMode}
+      setIsDebugMode={setIsDebugMode}
+    />
+  );
+};
+
+DebugSidebarRender.propTypes = {
+  updatedDebugOptions: PropTypes.func.isRequired,
+  itemEntity: PropTypes.string,
+  itemId: PropTypes.string,
+  debugMode: PropTypes.bool
+};
+
+DebugSidebarRender.defaultProps = {
+  itemEntity: '',
+  itemId: '',
+  debugMode: false
+};
+
+export default DebugSidebarRender;

package/src/components/DebugSidebar/index.js

@@ -1,62 +1,3 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Link } from '@blaze-cms/nextjs-components';
-import { MdKeyboardArrowLeft } from 'react-icons/md';
-import { buildAdminHref, setBlazeDebug } from '../../helpers';
-import { DEBUG_LOGO } from '../../constants';
+import DebugSidebarRender from './DebugSidebarRender';
 
-const DebugSidebar = ({ itemEntity, itemId, debugMode }) => {
-  const [isDebugMode, setIsDebugMode] = useState(debugMode);
-  const [isOpen, setIsOpen] = useState(true);
-
-  useEffect(() => {
-    if (debugMode === true) {
-      setIsDebugMode(debugMode);
-    } else setBlazeDebug(setIsDebugMode);
-  }, [debugMode]);
-
-  const divClass = classnames('debug-sidebar', {
-    'debug-sidebar--open': isOpen,
-    'debug-sidebar--close': !isOpen
-  });
-
-  const href = buildAdminHref({ itemEntity, itemId });
-
-  return (
-    <>
-      {isDebugMode ? (
-        <div className={divClass} data-testid="debug-sidebar">
-          <Link href={href}>
-            <img src={DEBUG_LOGO.SRC} alt={DEBUG_LOGO.ALT} />
-            <span>Blaze admin</span>
-          </Link>
-          <div
-            role="button"
-            className="debug-sidebar__button open"
-            data-testid="debug-sidebar-button"
-            id="debug-sidebar-button"
-            onClick={() => setIsOpen(!isOpen)}>
-            <i>
-              <MdKeyboardArrowLeft />
-            </i>
-          </div>
-        </div>
-      ) : null}
-    </>
-  );
-};
-
-DebugSidebar.propTypes = {
-  itemEntity: PropTypes.string,
-  itemId: PropTypes.string,
-  debugMode: PropTypes.bool
-};
-
-DebugSidebar.defaultProps = {
-  itemEntity: '',
-  itemId: '',
-  debugMode: false
-};
-
-export default DebugSidebar;
+export default DebugSidebarRender;

package/src/components/HashObserver.js

@@ -0,0 +1,8 @@
+import useHashObserver from '../hooks/use-hash-observer';
+
+function HashObserver() {
+  useHashObserver();
+  return null;
+}
+
+export default HashObserver;

package/src/components/index.js

@@ -1,3 +1,4 @@
 import DebugSidebar from './DebugSidebar';
+import HashObserver from './HashObserver';
 
-export { DebugSidebar };
+export { DebugSidebar, HashObserver };

package/src/constants.js

@@ -32,6 +32,8 @@ const PREVIEW_REGEX = /^(\/_preview)/;
 const PREVIEW_MODE = 'Preview Mode';
 const GTM_STRING = 'gtm';
 
+const BLAZE_DEBUG = 'blaze_debug';
+const BLAZE_PB_EDITOR_MODE = 'blaze_pb_editor_mode';
 const DEBUG_LOGO = {
   SRC: 'https://images.thisisblaze.com/logo-small-27-40.png',
   ALT: 'blaze-logo'
@@ -46,6 +48,8 @@ const ROUTE_PATTERN_SITEMAP = process.env.BLAZE_ROUTE_PATTERN_SITEMAP || '/sitem
 const sitemapFilePrefix = process.env.BLAZE_CONTENT_SITEMAP_URL_PREFIX || 'sitemap';
 const ROUTE_PATTERN_SITEMAP_FILE_REGEX = new RegExp(`/${sitemapFilePrefix}/.*\.xml`);
 const ROUTE_PATTERN_ROBOTS_TXT = '/robots.txt';
+const ROUTE_PATTERN_LLMS_TXT = '/llms.txt';
+
 const BLAZE_STATIC_ROUTE_STORE_KEY = 'default';
 
 const STATIC_FILE_FORWARD_HEADERS = ['content-length', 'last-modified', 'etag'];
@@ -62,6 +66,9 @@ const NOT_FOUND_STATUS_CODE = 404;
 const ROOT_SELECTOR_CLASS_PREFIX = 'root-selector';
 const ROOT_SELECTOR_SEPARATOR = '--';
 const RESOLVER_CONTAINER_CLASS = 'resolver-container';
+const ERROR_URLS = {
+  custom404: '/custom-error-404'
+};
 
 module.exports = {
   APPLE_TAGS,
@@ -78,6 +85,8 @@ module.exports = {
   PREVIEW_MODE,
   ROUTE_REGEX,
   PREVIEW_REGEX,
+  BLAZE_DEBUG,
+  BLAZE_PB_EDITOR_MODE,
   DEBUG_LOGO,
   PUBLISHED_,
   RESPONSE_404,
@@ -86,10 +95,12 @@ module.exports = {
   ROUTE_PATTERN_SITEMAP,
   ROUTE_PATTERN_SITEMAP_FILE_REGEX,
   ROUTE_PATTERN_ROBOTS_TXT,
+  ROUTE_PATTERN_LLMS_TXT,
   BLAZE_STATIC_ROUTE_STORE_KEY,
   STATIC_FILE_FORWARD_HEADERS,
   ROOT_SELECTOR_CLASS_PREFIX,
   ROOT_SELECTOR_SEPARATOR,
   RESOLVER_CONTAINER_CLASS,
-  BLAZE_X_FRAME_OPTIONS_DEFAULT
+  BLAZE_X_FRAME_OPTIONS_DEFAULT,
+  ERROR_URLS
 };

package/src/containers/ContentContainer.js

@@ -4,9 +4,11 @@ import { buildPBComponents, getLightboxImages } from '@blaze-cms/plugin-page-bui
 import { Header, MainContextProvider } from '@blaze-cms/nextjs-components';
 import { getSearchFilter, checkForGtm } from '../helpers';
 import { PREVIEW_MODE } from '../constants';
+import { DebugSidebar } from '../components';
 
 const ContentContainer = ({ fullUrl, pageData, isPreview, itemId, itemEntity }) => {
   const [open, setOpen] = useState(false);
+  const [debugOptions, setDebugOptions] = useState({ editorModeEnabled: false });
   const [selectedImage, setSelectedImage] = useState(0);
   const toggleModal = () => setOpen(!open);
 
@@ -38,6 +40,7 @@ const ContentContainer = ({ fullUrl, pageData, isPreview, itemId, itemEntity })
     lightboxImages,
     setSelectedImage
   };
+
   const buildPBComponentsOptions = {
     ...options,
     ...metaProps,
@@ -45,9 +48,21 @@ const ContentContainer = ({ fullUrl, pageData, isPreview, itemId, itemEntity })
     hasGTM
   };
 
+  const updatedDebugOptions = (newOptions = {}) => {
+    setDebugOptions({
+      ...debugOptions,
+      ...newOptions
+    });
+  };
+
   return (
-    <MainContextProvider value={{ fullUrl, isPreview, itemId, hasGTM }}>
+    <MainContextProvider value={{ fullUrl, isPreview, itemId, itemEntity, hasGTM, debugOptions }}>
       <Header {...metaProps} />
+      <DebugSidebar
+        itemId={itemId}
+        itemEntity={itemEntity}
+        updatedDebugOptions={updatedDebugOptions}
+      />
       {isPreview && <div className="preview-header">{PREVIEW_MODE}</div>}
       {!!pageBuilder.length && buildPBComponents(pageBuilder, buildPBComponentsOptions, true)}
     </MainContextProvider>

package/src/helpers/check-url.js

@@ -7,7 +7,8 @@ import {
   COLON,
   NOT_FOUND_STATUS_CODE,
   BLAZE_X_FRAME_OPTIONS_DEFAULT,
-  ROUTE_REGEX
+  ROUTE_REGEX,
+  ERROR_URLS
 } from '../constants';
 import { checkUrlQuery } from '../application/query';
 import checkParent from './check-parent';
@@ -36,7 +37,7 @@ const checkUrl = async props => {
     );
 
     if (!res.getHeader('Cache-Control')) {
-      res.setHeader('Cache-Control', process.env.BLAZE_CACHE_CONTROL_HEADER || '');
+      res.setHeader('Cache-Control', process.env.BLAZE_CACHE_CONTROL_HEADER || ' ');
     }
 
     if (handler) {
@@ -88,37 +89,30 @@ const getFullUrl = (req, asPath) => {
   return `${protocol}${DOUBLE_SLASH}${hostname}${urlPort}${asPath}`;
 };
 
-const doUrlCheck = async ({ asPath, url, apolloClient, res, handle404Error, blazeApp }) => {
+const doUrlCheck = async args => {
+  const { asPath, url, apolloClient, res, blazeApp, errorCheckCode = false } = args;
   try {
     if (!ROUTE_REGEX.test(url)) {
       throw Error('Invalid URL');
     }
-    const {
-      data: {
-        checkUrl: { itemId, itemEntity, urlTo, pageData = {} }
-      }
-    } = await apolloClient.query({
-      query: checkUrlQuery,
-      variables: {
-        url
-      }
-    });
-    const { cacheControlMaxAge = null } = pageData || {}; // pageData can be null when there is no page
-    if (res && cacheControlMaxAge !== null && cacheControlMaxAge >= 0) {
-      res.setHeader('Cache-Control', `max-age=${cacheControlMaxAge}`);
-    }
+    const { data: { checkUrl: { itemId, itemEntity, urlTo, pageData = {} } = {} } = {} } =
+      await apolloClient.query({
+        query: checkUrlQuery,
+        variables: { url }
+      });
 
-    if (urlTo && urlTo !== url) {
-      let redirectUrl = urlTo;
-      if (process.env.BLAZE_DISABLE_REDIRECT_WITH_QUERY !== 'true') {
-        const queryString = asPath.split('?')[1];
-        redirectUrl = queryString ? `${urlTo}?${queryString}` : urlTo;
-      }
+    setCustomCacheControlHeaders(pageData, res);
 
-      doRedirect(res, redirectUrl);
-      return { redirecting: true };
+    if (urlTo && (urlTo !== url || errorCheckCode)) {
+      return handleRedirect({ errorCheckCode, url, urlTo, asPath, res });
     }
     const rootSelectorClasses = getRootSelectorClasses(url, getRootClassesLimit());
+
+    if (errorCheckCode) {
+      blazeApp.events.emit('monitor:log', { message: `Serving custom ${errorCheckCode} page` });
+      if (res) res.statusCode = errorCheckCode;
+    }
+
     return {
       pageData,
       rootSelectorClasses,
@@ -126,14 +120,7 @@ const doUrlCheck = async ({ asPath, url, apolloClient, res, handle404Error, blaz
       itemEntity: getUnpublishedEntityName(itemEntity)
     };
   } catch (err) {
-    const parentPATH = checkParent(url);
-    if (handle404Error && parentPATH) {
-      doRedirect(res, parentPATH);
-    } else {
-      return handleError(err, res, handle404Error, blazeApp);
-    }
-
-    return handle404Error ? {} : null;
+    return handleUrlError(err, args);
   }
 };
 
@@ -152,6 +139,30 @@ const handleError = (err, res, handle404Error, blazeApp) => {
   return {};
 };
 
+function handleRedirect({ errorCheckCode, url, urlTo, asPath, res }) {
+  if (errorCheckCode) {
+    const errorMessage = `Cannot redirect ${url}`;
+    const customError = new Error(errorMessage);
+    customError.graphQLErrors = [errorMessage];
+    throw customError;
+  }
+  let redirectUrl = urlTo;
+  if (process.env.BLAZE_DISABLE_REDIRECT_WITH_QUERY !== 'true') {
+    const queryString = asPath.split('?')[1];
+    redirectUrl = queryString ? `${urlTo}?${queryString}` : urlTo;
+  }
+
+  return doRedirect(res, redirectUrl);
+}
+
+function setCustomCacheControlHeaders(pageData, res) {
+  const { cacheControlMaxAge = null } = pageData || {};
+
+  if (res && cacheControlMaxAge !== null && cacheControlMaxAge >= 0) {
+    res.setHeader('Cache-Control', `max-age=${cacheControlMaxAge}`);
+  }
+}
+
 function doRedirect(res, redirectUrl) {
   if (res) {
     res.writeHead(301, { Location: redirectUrl });
@@ -159,6 +170,38 @@ function doRedirect(res, redirectUrl) {
   } else {
     window.location.href = redirectUrl;
   }
+
+  return { redirecting: true };
+}
+
+async function handleUrlError(err, args) {
+  const { asPath, res, handle404Error, blazeApp, errorCheckCode } = args;
+  if (!err.graphQLErrors || !err.graphQLErrors.length) {
+    return handleError(err, res, handle404Error, blazeApp);
+  }
+
+  if (!errorCheckCode) {
+    const result = await doUrlCheck({
+      ...args,
+      url: ERROR_URLS.custom404,
+      errorCheckCode: NOT_FOUND_STATUS_CODE
+    });
+
+    if (handle404Error) {
+      const parentUrl = checkParent(asPath);
+      if (parentUrl) {
+        return doRedirect(res, parentUrl);
+      }
+    }
+    return result;
+  }
+
+  const parentPATH = checkParent(asPath);
+  if (handle404Error && parentPATH) {
+    return doRedirect(res, parentPATH);
+  }
+
+  return handleError(err, res, handle404Error, blazeApp);
 }
 
 export default checkUrl;

package/src/helpers/get-from-local.js

@@ -0,0 +1,12 @@
+const getFromLocal = key => {
+  if (typeof window === 'undefined') return null;
+
+  try {
+    const value = localStorage.getItem(key);
+    return value ? JSON.parse(value) : null;
+  } catch (error) {
+    return null;
+  }
+};
+
+export default getFromLocal;

package/src/helpers/index.js

@@ -9,6 +9,7 @@ import renderAppleTags from './render-apple-tags';
 import getPageData from './get-page-data';
 import getErrorMessage from './get-error-message';
 import getRootSelectorClasses from './get-root-selector-classes';
+import getFromLocal from './get-from-local';
 
 export {
   buildAdminHref,
@@ -16,6 +17,7 @@ export {
   checkParent,
   checkUrl,
   getEntitysActions,
+  getFromLocal,
   getSearchFilter,
   getPageData,
   getErrorMessage,

package/src/helpers/set-blaze-debug.js

@@ -1,23 +1,33 @@
-const BLAZE_DEBUG = 'blaze_debug';
+import { BLAZE_DEBUG, BLAZE_PB_EDITOR_MODE } from '../constants';
+import getFromLocal from './get-from-local';
 
 const setBlazeDebug = setIsDebugMode => {
-  if (!window.blaze) {
-    window.blaze = {
-      debug: () => {
-        const { localStorage } = window;
+  if (typeof window === 'undefined') return;
 
-        if (JSON.parse(localStorage.getItem(BLAZE_DEBUG))) {
-          localStorage.removeItem(BLAZE_DEBUG);
-          setIsDebugMode(false);
-          return;
-        }
+  const { localStorage, location } = window;
+  const params = new URLSearchParams(location.search);
 
-        localStorage.setItem(BLAZE_DEBUG, true);
-        setIsDebugMode(true);
-      }
-    };
+  window.blaze = window.blaze || {};
+  window.blaze.debug = () => {
+    const stored = getFromLocal(BLAZE_DEBUG);
+    if (stored) {
+      localStorage.removeItem(BLAZE_DEBUG);
+      window.localStorage.removeItem(BLAZE_PB_EDITOR_MODE);
+      setIsDebugMode(false);
+    } else {
+      localStorage.setItem(BLAZE_DEBUG, 'true');
+      setIsDebugMode(true);
+    }
+  };
+
+  if (params.get(BLAZE_DEBUG) === '1') {
+    localStorage.setItem(BLAZE_DEBUG, 'true');
+    setIsDebugMode(true);
+    return;
   }
-  setIsDebugMode(JSON.parse(localStorage.getItem(BLAZE_DEBUG)));
+
+  const stored = JSON.parse(localStorage.getItem(BLAZE_DEBUG));
+  setIsDebugMode(!!stored);
 };
 
 export default setBlazeDebug;

package/src/helpers/static-route-handlers/index.js

@@ -1,14 +1,17 @@
 import * as sitemap from './sitemap';
 import * as sitemapFile from './sitemap-file';
 import * as robots from './robots-txt';
+import * as llms from './llms';
 
 const { pattern: sitemapPattern, handler: sitemapHandler } = sitemap;
 const { pattern: sitemapFilePattern, handler: sitemapFileHandler } = sitemapFile;
 const { pattern: robotsTxtPattern, handler: robotsTxtHandler } = robots;
+const { pattern: llmsPattern, handler: llmsTxtHandler } = llms;
 
 const config = new Map();
 config.set(sitemapPattern, sitemapHandler);
 config.set(sitemapFilePattern, sitemapFileHandler);
 config.set(robotsTxtPattern, robotsTxtHandler);
+config.set(llmsPattern, llmsTxtHandler);
 
 export default config;

package/{lib-es/helpers/static-route-handlers/robots-txt.js → src/helpers/static-route-handlers/llms.js}

@@ -1,11 +1,13 @@
 import { gql } from '@apollo/client';
-import { ROUTE_PATTERN_ROBOTS_TXT, BLAZE_STATIC_ROUTE_STORE_KEY } from '../../constants';
+import { ROUTE_PATTERN_LLMS_TXT, BLAZE_STATIC_ROUTE_STORE_KEY } from '../../constants';
 import getHandler from './generic-file-handler';
+
 const storeKey = process.env.BLAZE_STATIC_ROUTE_STORE_KEY || BLAZE_STATIC_ROUTE_STORE_KEY;
+
 export const fileQuery = gql`
   query {
     files: getFiles(
-      where: { storeKey: "${storeKey}", filename: "robots.txt" }
+      where: { storeKey: "${storeKey}", filename: "llms.txt" }
       limit: 1
       sort: [{ property: "created", direction: "desc" }]
     ) {
@@ -14,6 +16,7 @@ export const fileQuery = gql`
     }
   }
 `;
-export const pattern = new RegExp(ROUTE_PATTERN_ROBOTS_TXT);
+
+export const pattern = new RegExp(ROUTE_PATTERN_LLMS_TXT);
+
 export const handler = getHandler(fileQuery);
-//# sourceMappingURL=robots-txt.js.map

package/src/hoc/withBlaze.js

@@ -8,6 +8,7 @@ import dynamic from 'next/dynamic'; // Next.js dynamic
 import { AppContext } from '@blaze-cms/nextjs-components';
 import blazeConfig from '../blaze.config';
 import { getErrorMessage } from '../helpers';
+import HashObserver from '../components/HashObserver';
 
 const ErrorBoundary = dynamic(() => import('@blaze-cms/core-errors-ui'));
 
@@ -143,6 +144,7 @@ function getWrappedApp(isSsr, config, blazeApp, App) {
 
       return (
         <ErrorBoundary app={this.blazeApp}>
+          <HashObserver />
           <AppContext.Provider value={{ blazeApp: this.blazeApp }}>
             <App {...this.props} apolloClient={this.apolloClient} blazeApp={this.blazeApp} />
           </AppContext.Provider>