How to add mixpanel to my SSR quasar project-CodePudding

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');
  }
});