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:
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:
Specs:
How can I further narrow down what the issue is?
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",