Search code examples
vue.jsgoogle-chromeincognito-mode

How to stop Vue.js reloading every 5 seconds in Chrome? Does not happen in incognito mode

I have a VueJS app. One day, it started reloading infinitely, approximately once every 5 seconds.

Here are the steps I took to debug the issue:

  • It does not matter which page I am on in the app.
  • There are no error messages in the console.
  • There are no network requests with error messages.
  • Clearing the cookies, localstorage and other application data didn't help.
  • Restarting the browser and computer did not help.
  • I reverted to an earlier commit that I know for a fact did not have this problem. Didn't help. This is not a coding error.
  • I tried it in Chrome incognito mode and Firefox. The issue did not occur. This is an issue between a customized Chrome and VueJS.
  • I tried disabling all Chrome extensions from the "Manage extensions" page. It did not help.
  • I tried switching to a guest profile. It did not help.
  • I tried creating a fresh vue.js project. This issue did not occur there. This is an issue between my Vue.js project and Chrome.
  • This issue only happens locally. It does not happen on the same app that is deployed to kubernetes.

Command to run the app:

nvm use 20 && vite

I'm not really sure which part of my app could be the cause and I'm really confused about why the issue doesn't occur in incognito mode. The only thing I can think of is that my app uses keycloak.

Main.ts:

import { createApp } from 'vue';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'vue-multiselect/dist/vue-multiselect.css';
import App from './App.vue';
import router from '@/router';
import keycloak from './keycloak';
import axios from 'axios';
import { store } from './store';

keycloak.init({ onLoad: 'login-required' }).then((auth) => {
  if (!auth) {
    window.location.reload();
  } else {
    axios.defaults.baseURL = import.meta.env.VITE_APP_BACKEND;
    axios.defaults.headers.common["Authorization"] = `Bearer ${keycloak.token}`;
    axios.post('/sync_account');

    const app = createApp(App);
    
    app.use(router);
    app.use(store);
    
    app.mount('#app');
  }
}).catch((err) => {
  console.error("Authentication Failed: ", err);
});

It seems like the reload could be caused by keycloak, since when the app reloads, the following three requests are made:

  1. https://KEYCLOAK_SERVER/auth/realms/REALM/protocol/openid-connect/login-status-iframe.html/init?client_id=APP_NAME&origin=http%3A%2F%2Flocalhost%3A5173 (response is 204 No Content)
  2. Another request to keycloak, this time with a code to the auth endpoint (response is 302 Found)
  3. http://localhost:5173/ (the location of the app itself)

Specs:

  • Distribution: Ubuntu 20.04.6 LTS
  • Linux kernel: 5.15.0-117-generic
  • Chrome: Version 126.0.6478.126 (Official Build) (64-bit)

How can I further narrow down what the issue is?

Solution

  • This question is a duplicate of Keycloak JS library: iframe redirect when already logged in

    The solution was to upgrade the version of keycloak-js in package.json to match the version of Keycloak I'm using:

    "keycloak-js": "^25.0.0",

    enter image description here