title: How can I fix 'Unhandled Promise Rejection' for my Vue application?
body: <p>For my Vue application I encounter the following issue in IE: <strong>'Unhandled Promise Rejection undefined'</strong>. </p>
  
  <p>I tracked the issue down to the authentication of the application. But I'm not sure how to tackle it. I've tried try-catch blocks around the next() functions. </p>
  
  <p>Below the code of the authentication.</p>
  
  <pre><code>import router from '@/config/Router';
  import CONST from '@/utils/Constants';
  import ObjectHelper from "@/helpers/ObjectHelper";
  
  class Auth {
      constructor() {
        router.beforeEach((to, from, next) =&gt; {
            if (to.matched.some(record =&gt; record.meta.requiresAuth)) {
  
              if (!Auth.isLoggedIn()) {
                next({path: CONST.ROUTE.SESSION.LOGIN});
              } else {
                next();
              }
            } else {
                next();
            }
        });
      }
  
      static logOut() {
        localStorage.clear();
        sessionStorage.clear();
  
        router.replace(CONST.ROUTE.SESSION.LOGIN);
      }
  
      static isLoggedIn() {
        return ObjectHelper.exists(localStorage.getItem(CONST.KEY.AUTH.ACCESS_TOKEN));
      }
  }
  
  export default Auth;
  </code></pre>
  
  <p>After <code>this.$router.push(CONST.ROUTE.ORGANISATIONS.OVERVIEW);</code> in my login-component, the error is thrown.</p>
  
  <p>To be complete, I also provide the code for the Router:</p>
  
  <pre><code>import Vue from 'vue';
  import Router from 'vue-router';
  
  Vue.use(Router);
  
  export default new Router({
    base: process.env.BASE_URL,
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'home',
        component: () =&gt; import('@/views/home/home.vue')
      },{
        path: '/session',
        name: 'session',
        component: () =&gt; import('@/views/session/session.vue'),
        children: [
          {
            path: 'login',
            name: 'login',
            component: () =&gt; import('@/views/session/login/login.vue')
          },
          {
            path: 'logout',
            name: 'logout',
            component: () =&gt; import('@/views/session/logout/logout.vue')
          }
        ]
      },
      {
        path: '/organisations',
        alias: '/organisaties',
        component: () =&gt; import('@/views/organisations/organisations.vue'),
        children: [
          {
            path: '',
            name: 'organisations-overview',
            component: () =&gt; import('@/views/organisations/overview/overview.vue'),
            meta: {
              requiresAuth: true,
              can: 'edit-organisations',
              fail: '/session/logout'
            }
          },
          {
            path: ':uuid',
            name: 'organisation-edit',
            component: () =&gt; import('@/views/organisations/edit/edit.vue'),
            meta: {
              requiresAuth: true,
              can: 'edit-organisations',
              fail: '/session/logout'
            }
          }
        ]
      }
    ]
  });
  </code></pre>
  
  <p>Anyone an idea how to tackle this? Many thanks!</p>