Merge pull request #4431 from nocodb/fix/navigation-n-tab-switch-bug

Fix: Re-render page if navigation error thrown
2 years ago · 5f75de14b8
2 changed files with 53 additions and 3 deletions
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@ -6,12 +6,37 @@ const route = useRoute()
 const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))

 useTheme()
+
+// TODO: Remove when https://github.com/vuejs/core/issues/5513 fixed
+const key = ref(0)
+
+const messages = [
+  `Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // chromium based
+  `NotFoundError: The object can not be found here.`, // safari
+  "Cannot read properties of null (reading 'parentNode')",
+]
+
+if (typeof window !== 'undefined') {
+  // @ts-expect-error using arbitrary window key
+  if (!window.__ncvue) {
+    window.addEventListener('error', (event) => {
+      if (messages.includes(event.message)) {
+        event.preventDefault()
+        console.warn('Re-rendering layout because of https://github.com/vuejs/core/issues/5513')
+        key.value++
+      }
+    })
+  }
+
+  // @ts-expect-error using arbitrary window key
+  window.__ncvue = true
+}
 </script>

 <template>
  <a-config-provider>
    <NuxtLayout :name="disableBaseLayout ? false : 'base'">
-      <NuxtPage />
+      <NuxtPage :key="key" />
    </NuxtLayout>
  </a-config-provider>
 </template>
--- a/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
+++ b/packages/nocodb/src/lib/meta/api/swagger/redocHtml.ts
@ -17,8 +17,33 @@ export default `<!DOCTYPE html>
    </style>
 </head>
 <body>
-<redoc spec-url='./swagger.json'></redoc>
-<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"> </script>
+<div id="redoc"></div>
+<script src="https://cdn.jsdelivr.net/npm/redoc@latest/bundles/redoc.standalone.js"></script>
+<script>
+  let initialLocalStorage = {}
+  
+  try {
+    initialLocalStorage = JSON.parse(localStorage.getItem('nocodb-gui-v2') || '{}');
+  } catch (e) {
+    console.error('Failed to parse local storage', e);
+  }
+
+  const xhttp = new XMLHttpRequest();
+  
+  xhttp.open("GET", "./swagger.json");
+  xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+  xhttp.setRequestHeader("xc-auth", initialLocalStorage && initialLocalStorage.token);
+
+  xhttp.onload = function () {
+      const swaggerJson = this.responseText;
+      const swagger = JSON.parse(swaggerJson);
+      Redoc.init(swagger, {
+        scrollYOffset: 50
+      }, document.getElementById('redoc'))
+  };
+  
+  xhttp.send();
+</script>
 <script>
 console.log('%c🚀 We are Hiring!!! 🚀%c\\n%cJoin the forces http://careers.nocodb.com', 'color:#1348ba;font-size:3rem;padding:20px;', 'display:none', 'font-size:1.5rem;padding:20px')
   const linkEl = document.createElement('a')