如何将 mixpanel 添加到我的 SSR quasar 项目中

Question

我能够通过创建描述 here

的 boot 文件来添加我的 mixpanel 集成

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

问题是，如果用户有广告拦截器，我的整个应用程序就会崩溃。 QSelect 和其他组件停止工作，因为广告拦截器已阻止用户获取 mixpanel 资产。我如何尝试加载混合面板，以防用户有广告拦截器，它不会使整个应用程序崩溃？

Answer 1

问题与 import 无关，而是引导文件本身的名称。通过命名我的引导文件 mixpanel，我的广告拦截器完全阻止了文件的加载，破坏了应用程序。

您只需要将文件重命名为其他名称，然后您就可以直接使用引导文件了：

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

如何将 mixpanel 添加到我的 SSR quasar 项目中

How to add mixpanel to my SSR quasar project

vue.js

quasar-framework