fix(bridge): correct unhandled promise rejection: undefined

fact: This error is occurred by aborting a pending navigation.

Reason: The first router initialization might override first bridge calling. We
use a callback queue to delay all navigations until router
initialization completed.

- https://github.com/vuejs/vue-router/blob/v3.2.0/src/history/base.js#L187-L189
- vuejs/vue-router#2932
- https://stackoverflow.com/questions/57897511/in-vue-router-why-would-this-happen-this1-pending-route

Author: lbwa

src/bridge/helper.ts

@@ -16,6 +16,31 @@ interface SignalHandler {
   disconnect: Function
 }
 
+type BridgeNavigator = () => unknown
+
+let isRouterLoaded = false
+const navigatorQueue: BridgeNavigator[] = []
+
+export type Pusher = ReturnType<typeof createPusher>
+
+export function switchRouterLoaded() {
+  if (isRouterLoaded) return
+
+  isRouterLoaded = true
+  if (navigatorQueue.length) {
+    navigatorQueue.forEach(navigator => navigator())
+    navigatorQueue.length = 0
+  }
+}
+
+export function queueNavigator(navigator: BridgeNavigator): void {
+  if (isRouterLoaded) {
+    navigator()
+    return
+  }
+  navigatorQueue.push(navigator)
+}
+
 export function dispatch(payload: string) {
   const { type, ...otherPayload }: DispatchPayload = JSON.parse(payload)
 
@@ -28,7 +53,13 @@ export function dispatch(payload: string) {
    * function will always be invoked.
    */
   if (/.+\/#\/$/.test(location.href)) {
-    RECEIVER_MAP[type] && RECEIVER_MAP[type](otherPayload)
+    const navigator = RECEIVER_MAP[type]
+    if (navigator) {
+      queueNavigator(() => navigator(otherPayload))
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(`[Receiver]: Unregister navigator type -> ${type}`)
+    }
   }
 }
 

src/bridge/index.ts

@@ -8,12 +8,7 @@ import {
   createProp,
   registerSignalListener
 } from './helper'
-import {
-  SCOPES,
-  ScopeName,
-  SIGNAL_CALLBACKS,
-  SignalName
-} from '@/config/bridge'
+import { SCOPES, ScopeName } from '@/config/bridge'
 
 declare global {
   interface Window {

src/router/guards.ts

@@ -0,0 +1,7 @@
+import { switchRouterLoaded } from '@/bridge/helper'
+
+function ensureRouterLoaded() {
+  switchRouterLoaded()
+}
+
+export const afterEach = [ensureRouterLoaded]

src/router/index.ts

@@ -1,10 +1,11 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/views/Home.vue'
+import { afterEach } from './guards'
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   routes: [
     {
       path: '/',
@@ -22,3 +23,7 @@ export default new Router({
     }
   ]
 })
+
+afterEach.forEach(hook => router.afterEach(hook))
+
+export default router