I was able to add my mixpanel
integration by creating a boot
file described here
import { boot } from 'quasar/wrappers';
import mixpanel from 'mixpanel-browser';
import useAppStore from '@/stores/app';
export default boot(({ store, app }) => {
if (import.meta.env.VITE_MIXPANEL_ENABLED === 'true') {
const { loggedUser } = useAppStore(store);
mixpanel.init(import.meta.env.VITE_MIXPANEL_KEY, {
debug: import.meta.env.VITE_MIXPANEL_DEBUG === 'true',
api_host: 'https://api-eu.mixpanel.com',
});
if (loggedUser) {
mixpanel.identify(loggedUser.username);
if (process.env.CLIENT) {
mixpanel.people.set({
firstName: loggedUser.firstName,
lastName: loggedUser.lastName,
city: loggedUser.city.name,
country: loggedUser.city.country.name,
});
}
}
app.provide('mixpanel', mixpanel);
}
});
The problem is that if the user has an adblocker my entire application crashes. QSelect
's and other components stop working because the adblocker has blocked the user from fetching the mixpanel
asset. How can I try to load mixpanel and in case user has an adblock, it doesn't crash the entire app?
CodePudding user response:
The problem was not related to import
but the name of the boot file itself. By naming my bootfile mixpanel
, my adblocker blocked completely the file from being loaded, breaking the app.
You just need to rename the file to something else and after that you should be able to work with the bootfile directly:
import { boot } from 'quasar/wrappers';
import useAppStore from '@/stores/app';
export default boot(async ({ store, app }) => {
if (!process.env.CLIENT) return;
try {
if (import.meta.env.VITE_MIXPANEL_ENABLED === 'true') {
const mixpanel = await import('mixpanel-browser');
// ...
app.provide('mixpanel', mixpanel);
}
} catch (e) {
console.log('Mixpanel is not able to load');
}
});