fix(server): blank screen on mobile (#8460)

Co-authored-by: forehalo <forehalo@gmail.com>
2026-02-11 20:08:37 +00:00 · 2024-10-16 13:12:40 +08:00
parent 82916e8264
commit f393f89a3f
47 changed files with 425 additions and 212 deletions
--- a/packages/backend/server/src/app.ts
+++ b/packages/backend/server/src/app.ts
@@ -24,6 +24,10 @@ export async function createApp() {
    logger: AFFiNE.affine.stable ? ['log'] : ['verbose'],
  });

+  if (AFFiNE.server.path) {
+    app.setGlobalPrefix(AFFiNE.server.path);
+  }
+
  app.use(serverTimingAndCache);

  app.use(
--- a/packages/backend/server/src/core/doc-renderer/controller.ts
+++ b/packages/backend/server/src/core/doc-renderer/controller.ts
@@ -18,7 +18,6 @@ interface RenderOptions {
 }

 interface HtmlAssets {
-  html: string;
  css: string[];
  js: string[];
  publicPath: string;
@@ -27,7 +26,6 @@ interface HtmlAssets {
 }

 const defaultAssets: HtmlAssets = {
-  html: '',
  css: [],
  js: [],
  publicPath: '/',
@@ -152,9 +150,15 @@ export class DocRendererController {
    return null;
  }

+  // @TODO(@forehalo): pre-compile html template to accelerate serializing
  _render(opts: RenderOptions | null, assets: HtmlAssets): string {
-    if (!opts && assets.html) {
-      return assets.html;
+    // TODO(@forehalo): how can we enable the type reference to @affine/env
+    const env: Record<string, any> = {
+      publicPath: assets.publicPath,
+    };
+
+    if (this.config.isSelfhosted) {
+      env.isSelfHosted = true;
    }

    const title = opts?.title
@@ -182,7 +186,7 @@ export class DocRendererController {

    <title>${title}</title>
    <meta name="theme-color" content="#fafafa" />
-    <link rel="preconnect" href="${assets.publicPath}">
+    ${assets.publicPath.startsWith('/') ? '' : `<link rel="preconnect" href="${assets.publicPath}">`}
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" sizes="192x192" href="/favicon-192.png" />
@@ -199,6 +203,10 @@ export class DocRendererController {
    <meta property="og:title" content="${title}" />
    <meta property="og:description" content="${summary}" />
    <meta property="og:image" content="${image}" />
+    <meta name="renderer" content="ssr" />
+    ${Object.entries(env)
+      .map(([key, val]) => `<meta name="env:${key}" content="${val}" />`)
+      .join('\n')}
    ${assets.css.map(url => `<link rel="stylesheet" href="${url}" />`).join('\n')}
  </head>
  <body>
@@ -214,11 +222,20 @@ export class DocRendererController {
   */
  private readHtmlAssets(path: string): HtmlAssets {
    const manifestPath = join(path, 'assets-manifest.json');
-    const htmlPath = join(path, 'index.html');

    try {
-      const assets = JSON.parse(readFileSync(manifestPath, 'utf-8'));
-      assets.html = readFileSync(htmlPath, 'utf-8');
+      const assets: HtmlAssets = JSON.parse(
+        readFileSync(manifestPath, 'utf-8')
+      );
+
+      const publicPath = this.config.isSelfhosted
+        ? this.config.server.host + '/'
+        : assets.publicPath;
+
+      assets.publicPath = publicPath;
+      assets.js = assets.js.map(path => publicPath + path);
+      assets.css = assets.css.map(path => publicPath + path);
+
      return assets;
    } catch (e) {
      if (this.config.node.prod) {
--- a/packages/backend/server/src/core/selfhost/index.ts
+++ b/packages/backend/server/src/core/selfhost/index.ts
@@ -9,6 +9,7 @@ import {
 import { HttpAdapterHost } from '@nestjs/core';
 import type { Application, Request, Response } from 'express';
 import { static as serveStatic } from 'express';
+import isMobile from 'is-mobile';

 import { Config } from '../../fundamentals';
 import { AuthModule } from '../auth';
@@ -58,50 +59,106 @@ export class SelfhostModule implements OnModuleInit {
  ) {}

  onModuleInit() {
-    // selfhost static file location
-    // web => 'static/selfhost'
-    // admin => 'static/admin/selfhost'
-    // mobile => 'static/mobile/selfhost'
-    const staticPath = join(this.config.projectRoot, 'static');
    // in command line mode
    if (!this.adapterHost.httpAdapter) {
      return;
    }

    const app = this.adapterHost.httpAdapter.getInstance<Application>();
+    // for example, '/affine' in host [//host.com/affine]
    const basePath = this.config.server.path;
+    const staticPath = join(this.config.projectRoot, 'static');

+    // web => {
+    //   affine: 'static/index.html',
+    //   selfhost: 'static/selfhost.html'
+    // }
+    // admin => {
+    //   affine: 'static/admin/index.html',
+    //   selfhost: 'static/admin/selfhost.html'
+    // }
+    // mobile => {
+    //   affine: 'static/mobile/index.html',
+    //   selfhost: 'static/mobile/selfhost.html'
+    // }
+    // NOTE(@forehalo):
+    //   the order following routes should be respected,
+    //   otherwise the app won't work properly.
+
+    // START REGION: /admin
+    // do not allow '/index.html' url, redirect to '/'
    app.get(basePath + '/admin/index.html', (_req, res) => {
-      res.redirect(basePath + '/admin');
+      return res.redirect(basePath + '/admin');
    });
+
+    // serve all static files
    app.use(
-      basePath + '/admin',
-      serveStatic(join(staticPath, 'admin', 'selfhost'), {
+      basePath,
+      serveStatic(join(staticPath, 'admin'), {
        redirect: false,
        index: false,
+        fallthrough: true,
      })
    );

+    // fallback all unknown routes
    app.get(
      [basePath + '/admin', basePath + '/admin/*'],
      this.check.use,
      (_req, res) => {
-        res.sendFile(join(staticPath, 'admin', 'selfhost', 'index.html'));
+        res.sendFile(
+          join(
+            staticPath,
+            'admin',
+            this.config.isSelfhosted ? 'selfhost.html' : 'index.html'
+          )
+        );
      }
    );
+    // END REGION

-    app.get(basePath + '/index.html', (_req, res) => {
-      res.redirect(basePath);
-    });
+    // START REGION: /mobile
+    // serve all static files
    app.use(
      basePath,
-      serveStatic(join(staticPath, 'selfhost'), {
+      serveStatic(join(staticPath, 'mobile'), {
        redirect: false,
        index: false,
+        fallthrough: true,
      })
    );
-    app.get('*', this.check.use, (_req, res) => {
-      res.sendFile(join(staticPath, 'selfhost', 'index.html'));
+    // END REGION
+
+    // START REGION: /
+    // do not allow '/index.html' url, redirect to '/'
+    app.get(basePath + '/index.html', (_req, res) => {
+      return res.redirect(basePath);
    });
+
+    // serve all static files
+    app.use(
+      basePath,
+      serveStatic(staticPath, {
+        redirect: false,
+        index: false,
+        fallthrough: true,
+      })
+    );
+
+    // fallback all unknown routes
+    app.get([basePath, basePath + '/*'], this.check.use, (req, res) => {
+      const mobile = isMobile({
+        ua: req.headers['user-agent'] ?? undefined,
+      });
+
+      return res.sendFile(
+        join(
+          staticPath,
+          mobile ? 'mobile' : '',
+          this.config.isSelfhosted ? 'selfhost.html' : 'index.html'
+        )
+      );
+    });
+    // END REGION
  }
 }
--- a/packages/backend/server/src/fundamentals/nestjs/config.ts
+++ b/packages/backend/server/src/fundamentals/nestjs/config.ts
@@ -3,7 +3,7 @@ import { defineStartupConfig, ModuleConfig } from '../../fundamentals/config';
 export interface ServerStartupConfigurations {
  /**
   * Base url of AFFiNE server, used for generating external urls.
-   * default to be `[AFFiNE.protocol]://[AFFiNE.host][:AFFiNE.port]?[AFFiNE.path]` if not specified
+   * default to be `[AFFiNE.protocol]://[AFFiNE.host][:AFFiNE.port]/[AFFiNE.path]` if not specified
   */
  externalUrl: string;
  /**
--- a/packages/backend/server/tests/app/selfhost.e2e.ts
+++ b/packages/backend/server/tests/app/selfhost.e2e.ts
@@ -17,12 +17,17 @@ const test = ava as TestFn<{
  db: PrismaClient;
 }>;

+const mobileUAString =
+  'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Mobile Safari/537.36';
+
 function initTestStaticFiles(staticPath: string) {
  const files = {
-    'selfhost/index.html': `<!DOCTYPE html><html><body>AFFiNE</body><script src="main.js"/></html>`,
-    'selfhost/main.js': `const name = 'affine'`,
-    'admin/selfhost/index.html': `<!DOCTYPE html><html><body>AFFiNE Admin</body><script src="/admin/main.js"/></html>`,
-    'admin/selfhost/main.js': `const name = 'affine-admin'`,
+    'selfhost.html': `<!DOCTYPE html><html><body>AFFiNE</body><script src="main.a.js"/></html>`,
+    'main.a.js': `const name = 'affine'`,
+    'admin/selfhost.html': `<!DOCTYPE html><html><body>AFFiNE Admin</body><script src="/admin/main.b.js"/></html>`,
+    'admin/main.b.js': `const name = 'affine-admin'`,
+    'mobile/selfhost.html': `<!DOCTYPE html><html><body>AFFiNE mobile</body><script src="/mobile/main.c.js"/></html>`,
+    'mobile/main.c.js': `const name = 'affine-mobile'`,
  };

  for (const [filename, content] of Object.entries(files)) {
@@ -35,6 +40,7 @@ function initTestStaticFiles(staticPath: string) {
 test.before('init selfhost server', async t => {
  // @ts-expect-error override
  AFFiNE.isSelfhosted = true;
+  AFFiNE.flavor.renderer = true;
  const { app } = await createTestingApp({
    imports: [buildAppModule()],
  });
@@ -54,7 +60,7 @@ test.beforeEach(async t => {
  server._initialized = false;
 });

-test.afterEach.always(async t => {
+test.after.always(async t => {
  await t.context.app.close();
 });

@@ -70,19 +76,28 @@ test('do not allow visit index.html directly', async t => {
    .expect(302);

  t.is(res.header.location, '/admin');
+
+  res = await request(t.context.app.getHttpServer())
+    .get('/mobile/index.html')
+    .expect(302);
 });

 test('should always return static asset files', async t => {
  let res = await request(t.context.app.getHttpServer())
-    .get('/main.js')
+    .get('/main.a.js')
    .expect(200);
  t.is(res.text, "const name = 'affine'");

  res = await request(t.context.app.getHttpServer())
-    .get('/admin/main.js')
+    .get('/main.b.js')
    .expect(200);
  t.is(res.text, "const name = 'affine-admin'");

+  res = await request(t.context.app.getHttpServer())
+    .get('/main.c.js')
+    .expect(200);
+  t.is(res.text, "const name = 'affine-mobile'");
+
  await t.context.db.user.create({
    data: {
      name: 'test',
@@ -91,14 +106,19 @@ test('should always return static asset files', async t => {
  });

  res = await request(t.context.app.getHttpServer())
-    .get('/main.js')
+    .get('/main.a.js')
    .expect(200);
  t.is(res.text, "const name = 'affine'");

  res = await request(t.context.app.getHttpServer())
-    .get('/admin/main.js')
+    .get('/main.b.js')
    .expect(200);
  t.is(res.text, "const name = 'affine-admin'");
+
+  res = await request(t.context.app.getHttpServer())
+    .get('/main.c.js')
+    .expect(200);
+  t.is(res.text, "const name = 'affine-mobile'");
 });

 test('should be able to call apis', async t => {
@@ -167,3 +187,19 @@ test('should redirect to admin if initialized', async t => {

  t.is(res.header.location, '/admin');
 });
+
+test('should return mobile assets if visited by mobile', async t => {
+  await t.context.db.user.create({
+    data: {
+      name: 'test',
+      email: 'test@affine.pro',
+    },
+  });
+
+  const res = await request(t.context.app.getHttpServer())
+    .get('/')
+    .set('user-agent', mobileUAString)
+    .expect(200);
+
+  t.true(res.text.includes('AFFiNE mobile'));
+});
--- a/packages/backend/server/tests/doc/renderer.spec.ts
+++ b/packages/backend/server/tests/doc/renderer.spec.ts
@@ -0,0 +1,94 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import type { INestApplication } from '@nestjs/common';
+import { PrismaClient } from '@prisma/client';
+import type { TestFn } from 'ava';
+import ava from 'ava';
+import request from 'supertest';
+
+import { DocRendererModule } from '../../src/core/doc-renderer';
+import { createTestingApp } from '../utils';
+
+const test = ava as TestFn<{
+  app: INestApplication;
+  db: PrismaClient;
+}>;
+
+const mobileUAString =
+  'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Mobile Safari/537.36';
+
+function initTestStaticFiles(staticPath: string) {
+  const files = {
+    'main.a.js': `const name = 'affine'`,
+    'assets-manifest.json': JSON.stringify({
+      js: ['main.a.js'],
+      css: [],
+      publicPath: 'https://app.affine.pro/',
+      gitHash: '',
+      description: '',
+    }),
+    'admin/main.b.js': `const name = 'affine-admin'`,
+    'mobile/main.c.js': `const name = 'affine-mobile'`,
+    'mobile/assets-manifest.json': JSON.stringify({
+      js: ['main.c.js'],
+      css: [],
+      publicPath: 'https://app.affine.pro/',
+      gitHash: '',
+      description: '',
+    }),
+  };
+
+  for (const [filename, content] of Object.entries(files)) {
+    const filePath = path.join(staticPath, filename);
+    mkdirSync(path.dirname(filePath), { recursive: true });
+    writeFileSync(filePath, content);
+  }
+}
+
+test.before('init selfhost server', async t => {
+  const staticPath = path.join(
+    fileURLToPath(import.meta.url),
+    '../../../static'
+  );
+  initTestStaticFiles(staticPath);
+
+  const { app } = await createTestingApp({
+    imports: [DocRendererModule],
+  });
+
+  t.context.app = app;
+  t.context.db = t.context.app.get(PrismaClient);
+});
+
+test.after.always(async t => {
+  await t.context.app.close();
+});
+
+test('should render correct html', async t => {
+  const res = await request(t.context.app.getHttpServer())
+    .get('/workspace/xxxx/xxx')
+    .expect(200);
+
+  t.true(
+    res.text.includes(
+      `<script src="https://app.affine.pro/main.a.js"></script>`
+    )
+  );
+});
+
+test('should render correct mobile html', async t => {
+  const res = await request(t.context.app.getHttpServer())
+    .get('/workspace/xxxx/xxx')
+    .set('user-agent', mobileUAString)
+    .expect(200);
+
+  t.true(
+    res.text.includes(
+      `<script src="https://app.affine.pro/main.c.js"></script>`
+    )
+  );
+});
+
+test.todo('should render correct page preview');
--- a/packages/common/env/src/global.ts
+++ b/packages/common/env/src/global.ts
@@ -31,12 +31,12 @@ export type BUILD_CONFIG_TYPE = {
  // see: tools/workers
  imageProxyUrl: string;
  linkPreviewUrl: string;
-
-  // TODO(@forehalo): remove
-  isSelfHosted: boolean;
 };

 export type Environment = {
+  // Variant
+  isSelfHosted: boolean;
+
  // Device
  isLinux: boolean;
  isMacOs: boolean;
@@ -47,8 +47,10 @@ export type Environment = {
  isMobile: boolean;
  isChrome: boolean;
  isPwa: boolean;
-
  chromeVersion?: number;
+
+  // runtime configs
+  publicPath: string;
 };

 export function setupGlobal() {
@@ -56,24 +58,25 @@ export function setupGlobal() {
    return;
  }

-  let environment: Environment;
+  let environment: Environment = {
+    isLinux: false,
+    isMacOs: false,
+    isSafari: false,
+    isWindows: false,
+    isFireFox: false,
+    isChrome: false,
+    isIOS: false,
+    isPwa: false,
+    isMobile: false,
+    isSelfHosted: false,
+    publicPath: '/',
+  };

-  if (!globalThis.navigator) {
-    environment = {
-      isLinux: false,
-      isMacOs: false,
-      isSafari: false,
-      isWindows: false,
-      isFireFox: false,
-      isChrome: false,
-      isIOS: false,
-      isPwa: false,
-      isMobile: false,
-    };
-  } else {
+  if (globalThis.navigator) {
    const uaHelper = new UaHelper(globalThis.navigator);

    environment = {
+      ...environment,
      isMobile: uaHelper.isMobile,
      isLinux: uaHelper.isLinux,
      isMacOs: uaHelper.isMacOs,
@@ -96,7 +99,35 @@ export function setupGlobal() {
    }
  }

-  globalThis.environment = environment;
+  applyEnvironmentOverrides(environment);

+  globalThis.environment = environment;
  globalThis.$AFFINE_SETUP = true;
 }
+
+function applyEnvironmentOverrides(environment: Environment) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  const metaTags = document.querySelectorAll('meta');
+
+  metaTags.forEach(meta => {
+    if (!meta.name.startsWith('env:')) {
+      return;
+    }
+
+    const name = meta.name.substring(4);
+
+    // all environments should have default value
+    // so ignore non-defined overrides
+    if (name in environment) {
+      // @ts-expect-error safe
+      environment[name] =
+        // @ts-expect-error safe
+        typeof environment[name] === 'string'
+          ? meta.content
+          : JSON.parse(meta.content);
+    }
+  });
+}
--- a/packages/frontend/admin/src/index.tsx
+++ b/packages/frontend/admin/src/index.tsx
@@ -1,4 +1,5 @@
 import './global.css';
+import './setup';

 import { createRoot } from 'react-dom/client';

--- a/packages/frontend/admin/src/setup.ts
+++ b/packages/frontend/admin/src/setup.ts
@@ -0,0 +1,3 @@
+import { setupBrowser } from '@affine/core/bootstrap';
+
+await setupBrowser();
--- a/packages/frontend/core/public/fonts/BebasNeue-Light.woff
+++ b/packages/frontend/core/public/fonts/BebasNeue-Light.woff
--- a/packages/frontend/core/public/fonts/BebasNeue-Regular.woff
+++ b/packages/frontend/core/public/fonts/BebasNeue-Regular.woff
--- a/packages/frontend/core/public/fonts/Inter-Italic.woff
+++ b/packages/frontend/core/public/fonts/Inter-Italic.woff
--- a/packages/frontend/core/public/fonts/Inter-Light-BETA.woff
+++ b/packages/frontend/core/public/fonts/Inter-Light-BETA.woff
--- a/packages/frontend/core/public/fonts/Inter-LightItalic-BETA.woff
+++ b/packages/frontend/core/public/fonts/Inter-LightItalic-BETA.woff
--- a/packages/frontend/core/public/fonts/Inter-Regular.woff
+++ b/packages/frontend/core/public/fonts/Inter-Regular.woff
--- a/packages/frontend/core/public/fonts/Inter-SemiBold.woff
+++ b/packages/frontend/core/public/fonts/Inter-SemiBold.woff
--- a/packages/frontend/core/public/fonts/Inter-SemiBoldItalic.woff
+++ b/packages/frontend/core/public/fonts/Inter-SemiBoldItalic.woff
--- a/packages/frontend/core/public/fonts/Kalam-Bold.woff
+++ b/packages/frontend/core/public/fonts/Kalam-Bold.woff
--- a/packages/frontend/core/public/fonts/Kalam-Light.woff
+++ b/packages/frontend/core/public/fonts/Kalam-Light.woff
--- a/packages/frontend/core/public/fonts/Kalam-Regular.woff
+++ b/packages/frontend/core/public/fonts/Kalam-Regular.woff
--- a/packages/frontend/core/public/fonts/Lora-Bold.woff
+++ b/packages/frontend/core/public/fonts/Lora-Bold.woff
--- a/packages/frontend/core/public/fonts/Lora-BoldItalic.woff
+++ b/packages/frontend/core/public/fonts/Lora-BoldItalic.woff
--- a/packages/frontend/core/public/fonts/Lora-Italic.woff
+++ b/packages/frontend/core/public/fonts/Lora-Italic.woff
--- a/packages/frontend/core/public/fonts/Lora-Regular.woff
+++ b/packages/frontend/core/public/fonts/Lora-Regular.woff
--- a/packages/frontend/core/public/fonts/OrelegaOne-Regular.woff
+++ b/packages/frontend/core/public/fonts/OrelegaOne-Regular.woff
--- a/packages/frontend/core/public/fonts/Poppins-Italic.woff
+++ b/packages/frontend/core/public/fonts/Poppins-Italic.woff
--- a/packages/frontend/core/public/fonts/Poppins-Light.woff
+++ b/packages/frontend/core/public/fonts/Poppins-Light.woff
--- a/packages/frontend/core/public/fonts/Poppins-LightItalic.woff
+++ b/packages/frontend/core/public/fonts/Poppins-LightItalic.woff
--- a/packages/frontend/core/public/fonts/Poppins-Medium.woff
+++ b/packages/frontend/core/public/fonts/Poppins-Medium.woff
--- a/packages/frontend/core/public/fonts/Poppins-Regular.woff
+++ b/packages/frontend/core/public/fonts/Poppins-Regular.woff
--- a/packages/frontend/core/public/fonts/Poppins-SemiBold.woff
+++ b/packages/frontend/core/public/fonts/Poppins-SemiBold.woff
--- a/packages/frontend/core/public/fonts/Poppins-SemiBoldItalic.woff
+++ b/packages/frontend/core/public/fonts/Poppins-SemiBoldItalic.woff
--- a/packages/frontend/core/public/fonts/Satoshi-Bold.woff
+++ b/packages/frontend/core/public/fonts/Satoshi-Bold.woff
--- a/packages/frontend/core/public/fonts/Satoshi-BoldItalic.woff
+++ b/packages/frontend/core/public/fonts/Satoshi-BoldItalic.woff
--- a/packages/frontend/core/public/fonts/Satoshi-Italic.woff
+++ b/packages/frontend/core/public/fonts/Satoshi-Italic.woff
--- a/packages/frontend/core/public/fonts/Satoshi-Light.woff
+++ b/packages/frontend/core/public/fonts/Satoshi-Light.woff
--- a/packages/frontend/core/public/fonts/Satoshi-LightItalic.woff
+++ b/packages/frontend/core/public/fonts/Satoshi-LightItalic.woff
--- a/packages/frontend/core/public/fonts/Satoshi-Regular.woff
+++ b/packages/frontend/core/public/fonts/Satoshi-Regular.woff
--- a/packages/frontend/core/src/bootstrap/index.ts
+++ b/packages/frontend/core/src/bootstrap/index.ts
@@ -4,11 +4,12 @@ import { setupEnvironment } from './app';
 import { polyfillBrowser, polyfillElectron } from './polyfill';

 export function setupElectron() {
-  polyfillElectron();
  setupEnvironment();
+  polyfillElectron();
 }

 export async function setupBrowser() {
-  await polyfillBrowser();
  setupEnvironment();
+  __webpack_public_path__ = environment.publicPath;
+  await polyfillBrowser();
 }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/font-extension.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/font-extension.ts
@@ -5,12 +5,9 @@ import {

 export function getFontConfigExtension() {
  return FontConfigExtension(
-    BUILD_CONFIG.isSelfHosted
-      ? AffineCanvasTextFonts.map(font => ({
-          ...font,
-          // self-hosted fonts are served from /assets
-          url: '/assets/' + new URL(font.url).pathname.split('/').pop(),
-        }))
-      : AffineCanvasTextFonts
+    AffineCanvasTextFonts.map(font => ({
+      ...font,
+      url: environment.publicPath + 'fonts/' + font.url.split('/').pop(),
+    }))
  );
 }
--- a/packages/frontend/track/src/mixpanel.ts
+++ b/packages/frontend/track/src/mixpanel.ts
@@ -35,8 +35,8 @@ function createMixpanel() {
        appVersion: BUILD_CONFIG.appVersion,
        environment: BUILD_CONFIG.appBuildType,
        editorVersion: BUILD_CONFIG.editorVersion,
-        isSelfHosted: BUILD_CONFIG.isSelfHosted,
        isDesktop: BUILD_CONFIG.isElectron,
+        isSelfHosted: environment.isSelfHosted,
      });
    },
    reset() {