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?