fix: use secure websocket (#5297)

This reverts commit 992ed89a89, reversing
changes made to d272d7922d.

.github/helm/affine/charts/graphql/templates/monitoring.yaml

@@ -1,13 +0,0 @@
-{{- if .Values.global.gke.enabled -}}
-apiVersion: monitoring.googleapis.com/v1
-kind: PodMonitoring
-metadata:
-  name: "{{ .Chart.Name }}-monitoring"
-spec:
-  selector:
-    matchLabels:
-      app.kubernetes.io/name: "{{ include "graphql.name" . }}"
-  endpoints:
-    - port: {{ .Values.service.port }}
-      interval: 30s
-{{- end }}

.github/helm/affine/charts/sync/templates/monitoring.yaml

@@ -1,13 +0,0 @@
-{{- if .Values.global.gke.enabled -}}
-apiVersion: monitoring.googleapis.com/v1
-kind: PodMonitoring
-metadata:
-  name: "{{ .Chart.Name }}-monitoring"
-spec:
-  selector:
-    matchLabels:
-      app.kubernetes.io/name: "{{ include "sync.name" . }}"
-  endpoints:
-    - port: {{ .Values.service.port }}
-      interval: 30s
-{{- end }}

.github/workflows/deploy.yml

@@ -35,7 +35,7 @@ jobs:
   build-core:
     name: Build @affine/core
     runs-on: ubuntu-latest
-
+    environment: ${{ github.event.inputs.flavor }}
     steps:
       - uses: actions/checkout@v4
       - name: Setup Node.js
@@ -52,6 +52,10 @@ jobs:
           SHOULD_REPORT_TRACE: true
           TRACE_REPORT_ENDPOINT: ${{ secrets.TRACE_REPORT_ENDPOINT }}
           CAPTCHA_SITE_KEY: ${{ secrets.CAPTCHA_SITE_KEY }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       - name: Upload core artifact
         uses: actions/upload-artifact@v3
         with:

.github/workflows/nightly-build.yml

@@ -70,8 +70,8 @@ jobs:
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-          NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           RELEASE_VERSION: ${{ needs.set-build-version.outputs.version }}
 
       - name: Upload core artifact

.github/workflows/release-desktop-app.yml

@@ -40,6 +40,7 @@ env:
 jobs:
   before-make:
     runs-on: ubuntu-latest
+    environment: ${{ github.event.inputs.build-type || (github.ref_type == 'tag' && contains(github.ref, 'canary') && 'canary') }}
     outputs:
       RELEASE_VERSION: ${{ steps.get-canary-version.outputs.RELEASE_VERSION }}
     steps:
@@ -65,6 +66,7 @@ jobs:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           RELEASE_VERSION: ${{ github.event.inputs.version || steps.get-canary-version.outputs.RELEASE_VERSION }}
           SKIP_PLUGIN_BUILD: 'true'
 

nx.json

@@ -56,7 +56,7 @@
           "env": "SENTRY_AUTH_TOKEN"
         },
         {
-          "env": "NEXT_PUBLIC_SENTRY_DSN"
+          "env": "SENTRY_DSN"
         },
         {
           "env": "DISTRIBUTION"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affine/monorepo",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "private": true,
   "author": "toeverything",
   "license": "MIT",

packages/backend/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine/server",
   "private": true,
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "description": "Affine Node.js server",
   "type": "module",
   "bin": {
@@ -39,6 +39,9 @@
     "@node-rs/jsonwebtoken": "^0.2.3",
     "@opentelemetry/api": "^1.7.0",
     "@opentelemetry/core": "^1.18.1",
+    "@opentelemetry/exporter-prometheus": "^0.45.1",
+    "@opentelemetry/exporter-zipkin": "^1.18.1",
+    "@opentelemetry/host-metrics": "^0.33.2",
     "@opentelemetry/instrumentation": "^0.45.1",
     "@opentelemetry/instrumentation-graphql": "^0.36.0",
     "@opentelemetry/instrumentation-http": "^0.45.1",

packages/backend/server/src/app.ts

@@ -3,7 +3,6 @@ import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { CacheModule } from './cache';
 import { ConfigModule } from './config';
-import { MetricsModule } from './metrics';
 import { BusinessModules } from './modules';
 import { AuthModule } from './modules/auth';
 import { PrismaModule } from './prisma';
@@ -16,7 +15,6 @@ const BasicModules = [
   ConfigModule.forRoot(),
   CacheModule,
   StorageModule.forRoot(),
-  MetricsModule,
   SessionModule,
   RateLimiterModule,
   AuthModule,

packages/backend/server/src/graphql.module.ts

@@ -8,14 +8,13 @@ import { fileURLToPath } from 'url';
 
 import { Config } from './config';
 import { GQLLoggerPlugin } from './graphql/logger-plugin';
-import { Metrics } from './metrics/metrics';
 
 @Global()
 @Module({
   imports: [
     GraphQLModule.forRootAsync<ApolloDriverConfig>({
       driver: ApolloDriver,
-      useFactory: (config: Config, metrics: Metrics) => {
+      useFactory: (config: Config) => {
         return {
           ...config.graphql,
           path: `${config.path}/graphql`,
@@ -31,10 +30,10 @@ import { Metrics } from './metrics/metrics';
             req,
             res,
           }),
-          plugins: [new GQLLoggerPlugin(metrics)],
+          plugins: [new GQLLoggerPlugin()],
         };
       },
-      inject: [Config, Metrics],
+      inject: [Config],
     }),
   ],
 })

packages/backend/server/src/graphql/logger-plugin.ts

@@ -7,40 +7,39 @@ import { Plugin } from '@nestjs/apollo';
 import { Logger } from '@nestjs/common';
 import { Response } from 'express';
 
-import { Metrics } from '../metrics/metrics';
+import { metrics } from '../metrics/metrics';
 import { ReqContext } from '../types';
 
 @Plugin()
 export class GQLLoggerPlugin implements ApolloServerPlugin {
   protected logger = new Logger(GQLLoggerPlugin.name);
 
-  constructor(private readonly metrics: Metrics) {}
-
   requestDidStart(
     reqContext: GraphQLRequestContext<ReqContext>
   ): Promise<GraphQLRequestListener<GraphQLRequestContext<ReqContext>>> {
     const res = reqContext.contextValue.req.res as Response;
     const operation = reqContext.request.operationName;
 
-    this.metrics.gqlRequest(1, { operation });
-    const timer = this.metrics.gqlTimer({ operation });
+    metrics().gqlRequest.add(1, { operation });
+    const start = Date.now();
 
     return Promise.resolve({
       willSendResponse: () => {
-        const costInMilliseconds = timer() * 1000;
+        const costInMilliseconds = Date.now() - start;
         res.setHeader(
           'Server-Timing',
           `gql;dur=${costInMilliseconds};desc="GraphQL"`
         );
+        metrics().gqlTimer.record(costInMilliseconds, { operation });
         return Promise.resolve();
       },
       didEncounterErrors: () => {
-        this.metrics.gqlError(1, { operation });
-        const costInMilliseconds = timer() * 1000;
+        const costInMilliseconds = Date.now() - start;
         res.setHeader(
           'Server-Timing',
           `gql;dur=${costInMilliseconds};desc="GraphQL ${operation}"`
         );
+        metrics().gqlTimer.record(costInMilliseconds, { operation });
         return Promise.resolve();
       },
     });

packages/backend/server/src/index.ts

@@ -1,22 +1,9 @@
 /// <reference types="./global.d.ts" />
-import { MetricExporter } from '@google-cloud/opentelemetry-cloud-monitoring-exporter';
-import { TraceExporter } from '@google-cloud/opentelemetry-cloud-trace-exporter';
+import { start as startAutoMetrics } from './metrics';
+startAutoMetrics();
+
 import { NestFactory } from '@nestjs/core';
 import type { NestExpressApplication } from '@nestjs/platform-express';
-import {
-  CompositePropagator,
-  W3CBaggagePropagator,
-  W3CTraceContextPropagator,
-} from '@opentelemetry/core';
-import gql from '@opentelemetry/instrumentation-graphql';
-import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
-import ioredis from '@opentelemetry/instrumentation-ioredis';
-import { NestInstrumentation } from '@opentelemetry/instrumentation-nestjs-core';
-import socketIO from '@opentelemetry/instrumentation-socket.io';
-import { PeriodicExportingMetricReader } from '@opentelemetry/sdk-metrics';
-import { NodeSDK } from '@opentelemetry/sdk-node';
-import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-node';
-import { PrismaInstrumentation } from '@prisma/instrumentation';
 import cookieParser from 'cookie-parser';
 import { static as staticMiddleware } from 'express';
 import graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress.mjs';
@@ -28,35 +15,6 @@ import { serverTimingAndCache } from './middleware/timing';
 import { RedisIoAdapter } from './modules/sync/redis-adapter';
 
 const { NODE_ENV, AFFINE_ENV } = process.env;
-
-if (NODE_ENV === 'production') {
-  const traceExporter = new TraceExporter();
-  const tracing = new NodeSDK({
-    traceExporter,
-    metricReader: new PeriodicExportingMetricReader({
-      exporter: new MetricExporter(),
-    }),
-    spanProcessor: new BatchSpanProcessor(traceExporter),
-    textMapPropagator: new CompositePropagator({
-      propagators: [
-        new W3CBaggagePropagator(),
-        new W3CTraceContextPropagator(),
-      ],
-    }),
-    instrumentations: [
-      new NestInstrumentation(),
-      new ioredis.IORedisInstrumentation(),
-      new socketIO.SocketIoInstrumentation({ traceReserved: true }),
-      new gql.GraphQLInstrumentation({ mergeItems: true }),
-      new HttpInstrumentation(),
-      new PrismaInstrumentation(),
-    ],
-    serviceName: 'affine-cloud',
-  });
-
-  tracing.start();
-}
-
 const app = await NestFactory.create<NestExpressApplication>(AppModule, {
   cors: true,
   rawBody: true,

packages/backend/server/src/metrics/controller.ts

@@ -1,18 +0,0 @@
-import { Controller, Get, Res } from '@nestjs/common';
-import type { Response } from 'express';
-import { register } from 'prom-client';
-
-import { PrismaService } from '../prisma';
-
-@Controller()
-export class MetricsController {
-  constructor(private readonly prisma: PrismaService) {}
-
-  @Get('/metrics')
-  async index(@Res() res: Response): Promise<void> {
-    res.header('Content-Type', register.contentType);
-    const prismaMetrics = await this.prisma.$metrics.prometheus();
-    const appMetrics = await register.metrics();
-    res.send(appMetrics + prismaMetrics);
-  }
-}

packages/backend/server/src/metrics/index.ts

@@ -1,13 +1,3 @@
-import { Global, Module } from '@nestjs/common';
-
-import { MetricsController } from '../metrics/controller';
-import { Metrics } from './metrics';
-
-@Global()
-@Module({
-  providers: [Metrics],
-  exports: [Metrics],
-  controllers: [MetricsController],
-})
-export class MetricsModule {}
-export { Metrics };
+export * from './metrics';
+export { start } from './opentelemetry';
+export * from './utils';

packages/backend/server/src/metrics/metrics.ts

@@ -1,31 +1,76 @@
-import { Injectable, OnModuleDestroy } from '@nestjs/common';
-import { register } from 'prom-client';
+import opentelemetry, { Attributes, Observable } from '@opentelemetry/api';
 
-import { metricsCreator } from './utils';
+interface AsyncMetric {
+  ob: Observable;
+  get value(): any;
+  get attrs(): Attributes | undefined;
+}
 
-@Injectable()
-export class Metrics implements OnModuleDestroy {
-  onModuleDestroy(): void {
-    register.clear();
+let _metrics: ReturnType<typeof createBusinessMetrics> | undefined = undefined;
+
+export function getMeter(name = 'business') {
+  return opentelemetry.metrics.getMeter(name);
+}
+
+function createBusinessMetrics() {
+  const meter = getMeter();
+  const asyncMetrics: AsyncMetric[] = [];
+
+  function createGauge(name: string) {
+    let value: any;
+    let attrs: Attributes | undefined;
+    const ob = meter.createObservableGauge(name);
+    asyncMetrics.push({
+      ob,
+      get value() {
+        return value;
+      },
+      get attrs() {
+        return attrs;
+      },
+    });
+
+    return (newValue: any, newAttrs?: Attributes) => {
+      value = newValue;
+      attrs = newAttrs;
+    };
   }
 
-  socketIOEventCounter = metricsCreator.counter('socket_io_counter', ['event']);
-  socketIOEventTimer = metricsCreator.timer('socket_io_timer', ['event']);
-  socketIOConnectionGauge = metricsCreator.gauge(
-    'socket_io_connection_counter'
+  const metrics = {
+    socketIOConnectionGauge: createGauge('socket_io_connection'),
+
+    gqlRequest: meter.createCounter('gql_request'),
+    gqlError: meter.createCounter('gql_error'),
+    gqlTimer: meter.createHistogram('gql_timer'),
+
+    jwstCodecMerge: meter.createCounter('jwst_codec_merge'),
+    jwstCodecDidnotMatch: meter.createCounter('jwst_codec_didnot_match'),
+    jwstCodecFail: meter.createCounter('jwst_codec_fail'),
+
+    authCounter: meter.createCounter('auth'),
+    authFailCounter: meter.createCounter('auth_fail'),
+
+    docHistoryCounter: meter.createCounter('doc_history_created'),
+    docRecoverCounter: meter.createCounter('doc_history_recovered'),
+  };
+
+  meter.addBatchObservableCallback(
+    result => {
+      asyncMetrics.forEach(metric => {
+        result.observe(metric.ob, metric.value, metric.attrs);
+      });
+    },
+    asyncMetrics.map(({ ob }) => ob)
   );
 
-  gqlRequest = metricsCreator.counter('gql_request', ['operation']);
-  gqlError = metricsCreator.counter('gql_error', ['operation']);
-  gqlTimer = metricsCreator.timer('gql_timer', ['operation']);
-
-  jwstCodecMerge = metricsCreator.counter('jwst_codec_merge');
-  jwstCodecDidnotMatch = metricsCreator.counter('jwst_codec_didnot_match');
-  jwstCodecFail = metricsCreator.counter('jwst_codec_fail');
-
-  authCounter = metricsCreator.counter('auth');
-  authFailCounter = metricsCreator.counter('auth_fail', ['reason']);
-
-  docHistoryCounter = metricsCreator.counter('doc_history_created');
-  docRecoverCounter = metricsCreator.counter('doc_history_recovered');
+  return metrics;
 }
+
+export function registerBusinessMetrics() {
+  if (!_metrics) {
+    _metrics = createBusinessMetrics();
+  }
+
+  return _metrics;
+}
+export const metrics = registerBusinessMetrics;

packages/backend/server/src/metrics/opentelemetry.ts

@@ -0,0 +1,127 @@
+import { MetricExporter } from '@google-cloud/opentelemetry-cloud-monitoring-exporter';
+import { TraceExporter } from '@google-cloud/opentelemetry-cloud-trace-exporter';
+import {
+  CompositePropagator,
+  W3CBaggagePropagator,
+  W3CTraceContextPropagator,
+} from '@opentelemetry/core';
+import { PrometheusExporter } from '@opentelemetry/exporter-prometheus';
+import { ZipkinExporter } from '@opentelemetry/exporter-zipkin';
+import { HostMetrics } from '@opentelemetry/host-metrics';
+import { Instrumentation } from '@opentelemetry/instrumentation';
+import { GraphQLInstrumentation } from '@opentelemetry/instrumentation-graphql';
+import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
+import { IORedisInstrumentation } from '@opentelemetry/instrumentation-ioredis';
+import { NestInstrumentation } from '@opentelemetry/instrumentation-nestjs-core';
+import { SocketIoInstrumentation } from '@opentelemetry/instrumentation-socket.io';
+import {
+  ConsoleMetricExporter,
+  MetricReader,
+  PeriodicExportingMetricReader,
+} from '@opentelemetry/sdk-metrics';
+import { NodeSDK } from '@opentelemetry/sdk-node';
+import {
+  BatchSpanProcessor,
+  ConsoleSpanExporter,
+  SpanExporter,
+} from '@opentelemetry/sdk-trace-node';
+import { PrismaInstrumentation } from '@prisma/instrumentation';
+
+import { registerBusinessMetrics } from './metrics';
+
+abstract class OpentelemetryFactor {
+  abstract getMetricReader(): MetricReader;
+  abstract getSpanExporter(): SpanExporter;
+
+  getInstractions(): Instrumentation[] {
+    return [
+      new NestInstrumentation(),
+      new IORedisInstrumentation(),
+      new SocketIoInstrumentation({ traceReserved: true }),
+      new GraphQLInstrumentation({ mergeItems: true }),
+      new HttpInstrumentation(),
+      new PrismaInstrumentation(),
+    ];
+  }
+
+  create() {
+    const traceExporter = this.getSpanExporter();
+    return new NodeSDK({
+      traceExporter,
+      metricReader: this.getMetricReader(),
+      spanProcessor: new BatchSpanProcessor(traceExporter),
+      textMapPropagator: new CompositePropagator({
+        propagators: [
+          new W3CBaggagePropagator(),
+          new W3CTraceContextPropagator(),
+        ],
+      }),
+      instrumentations: this.getInstractions(),
+      serviceName: 'affine-cloud',
+    });
+  }
+}
+
+class GCloudOpentelemetryFactor extends OpentelemetryFactor {
+  override getMetricReader(): MetricReader {
+    return new PeriodicExportingMetricReader({
+      exportIntervalMillis: 30000,
+      exportTimeoutMillis: 10000,
+      exporter: new MetricExporter(),
+    });
+  }
+
+  override getSpanExporter(): SpanExporter {
+    return new TraceExporter();
+  }
+}
+
+class LocalOpentelemetryFactor extends OpentelemetryFactor {
+  override getMetricReader(): MetricReader {
+    return new PrometheusExporter();
+  }
+
+  override getSpanExporter(): SpanExporter {
+    return new ZipkinExporter();
+  }
+}
+
+class DebugOpentelemetryFactor extends OpentelemetryFactor {
+  override getMetricReader(): MetricReader {
+    return new PeriodicExportingMetricReader({
+      exporter: new ConsoleMetricExporter(),
+    });
+  }
+
+  override getSpanExporter(): SpanExporter {
+    return new ConsoleSpanExporter();
+  }
+}
+
+function createSDK() {
+  let factor: OpentelemetryFactor | null = null;
+  if (process.env.NODE_ENV === 'production') {
+    factor = new GCloudOpentelemetryFactor();
+  } else if (process.env.DEBUG_METRICS) {
+    factor = new DebugOpentelemetryFactor();
+  } else {
+    factor = new LocalOpentelemetryFactor();
+  }
+
+  return factor?.create();
+}
+
+function registerCustomMetrics() {
+  const host = new HostMetrics({ name: 'instance-host-metrics' });
+  host.start();
+}
+
+export function start() {
+  const sdk = createSDK();
+
+  if (sdk) {
+    sdk.start();
+    registerCustomMetrics();
+    registerBusinessMetrics();
+  }
+}

packages/backend/server/src/metrics/utils.ts

@@ -1,99 +1,11 @@
-import { Counter, Gauge, register, Summary } from 'prom-client';
+import { Attributes } from '@opentelemetry/api';
 
-function getOr<T>(name: string, or: () => T): T {
-  return (register.getSingleMetric(name) as T) || or();
-}
-
-type LabelValues<T extends string> = Partial<Record<T, string | number>>;
-type MetricsCreator<T extends string> = (
-  value: number,
-  labels: LabelValues<T>
-) => void;
-type TimerMetricsCreator<T extends string> = (
-  labels: LabelValues<T>
-) => () => number;
-
-export const metricsCreatorGenerator = () => {
-  const counterCreator = <T extends string>(
-    name: string,
-    labelNames?: T[]
-  ): MetricsCreator<T> => {
-    const counter = getOr(
-      name,
-      () =>
-        new Counter({
-          name,
-          help: name,
-          ...(labelNames ? { labelNames } : {}),
-        })
-    );
-
-    return (value: number, labels: LabelValues<T>) => {
-      counter.inc(labels, value);
-    };
-  };
-
-  const gaugeCreator = <T extends string>(
-    name: string,
-    labelNames?: T[]
-  ): MetricsCreator<T> => {
-    const gauge = getOr(
-      name,
-      () =>
-        new Gauge({
-          name,
-          help: name,
-          ...(labelNames ? { labelNames } : {}),
-        })
-    );
-
-    return (value: number, labels: LabelValues<T>) => {
-      gauge.set(labels, value);
-    };
-  };
-
-  const timerCreator = <T extends string>(
-    name: string,
-    labelNames?: T[]
-  ): TimerMetricsCreator<T> => {
-    const summary = getOr(
-      name,
-      () =>
-        new Summary({
-          name,
-          help: name,
-          ...(labelNames ? { labelNames } : {}),
-        })
-    );
-
-    return (labels: LabelValues<T>) => {
-      const now = process.hrtime();
-
-      return () => {
-        const delta = process.hrtime(now);
-        const value = delta[0] + delta[1] / 1e9;
-
-        summary.observe(labels, value);
-        return value;
-      };
-    };
-  };
-
-  return {
-    counter: counterCreator,
-    gauge: gaugeCreator,
-    timer: timerCreator,
-  };
-};
-
-export const metricsCreator = metricsCreatorGenerator();
+import { getMeter } from './metrics';
 
 export const CallTimer = (
   name: string,
-  labels: Record<string, any> = {}
+  attrs?: Attributes
 ): MethodDecorator => {
-  const timer = metricsCreator.timer(name, Object.keys(labels));
-
   // @ts-expect-error allow
   return (
     _target,
@@ -106,19 +18,27 @@ export const CallTimer = (
     }
 
     desc.value = function (...args: any[]) {
-      const endTimer = timer(labels);
+      const timer = getMeter().createHistogram(name, {
+        description: `function call time costs of ${name}`,
+      });
+      const start = Date.now();
+
+      const end = () => {
+        timer.record(Date.now() - start, attrs);
+      };
+
       let result: any;
       try {
         result = originalMethod.apply(this, args);
       } catch (e) {
-        endTimer();
+        end();
         throw e;
       }
 
       if (result instanceof Promise) {
-        return result.finally(endTimer);
+        return result.finally(end);
       } else {
-        endTimer();
+        end();
         return result;
       }
     };
@@ -129,10 +49,8 @@ export const CallTimer = (
 
 export const CallCounter = (
   name: string,
-  labels: Record<string, any> = {}
+  attrs?: Attributes
 ): MethodDecorator => {
-  const count = metricsCreator.counter(name, Object.keys(labels));
-
   // @ts-expect-error allow
   return (
     _target,
@@ -145,7 +63,11 @@ export const CallCounter = (
     }
 
     desc.value = function (...args: any[]) {
-      count(1, labels);
+      const count = getMeter().createCounter(name, {
+        description: `function call counter of ${name}`,
+      });
+
+      count.add(1, attrs);
       return originalMethod.apply(this, args);
     };
 

packages/backend/server/src/modules/auth/next-auth.controller.ts

@@ -23,7 +23,7 @@ import type { AuthAction, CookieOption, NextAuthOptions } from 'next-auth';
 import { AuthHandler } from 'next-auth/core';
 
 import { Config } from '../../config';
-import { Metrics } from '../../metrics/metrics';
+import { metrics } from '../../metrics';
 import { PrismaService } from '../../prisma/service';
 import { SessionService } from '../../session';
 import { AuthThrottlerGuard, Throttle } from '../../throttler';
@@ -46,7 +46,6 @@ export class NextAuthController {
     private readonly authService: AuthService,
     @Inject(NextAuthOptionsProvide)
     private readonly nextAuthOptions: NextAuthOptions,
-    private readonly metrics: Metrics,
     private readonly session: SessionService
   ) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -90,7 +89,7 @@ export class NextAuthController {
       res.redirect(`/signin${query}`);
       return;
     }
-    this.metrics.authCounter(1, {});
+    metrics().authCounter.add(1);
     const [action, providerId] = req.url // start with request url
       .slice(BASE_URL.length) // make relative to baseUrl
       .replace(/\?.*/, '') // remove query part, use only path part
@@ -127,7 +126,7 @@ export class NextAuthController {
     const options = this.nextAuthOptions;
     if (req.method === 'POST' && action === 'session') {
       if (typeof req.body !== 'object' || typeof req.body.data !== 'object') {
-        this.metrics.authFailCounter(1, { reason: 'invalid_session_data' });
+        metrics().authFailCounter.add(1, { reason: 'invalid_session_data' });
         throw new BadRequestException(`Invalid new session data`);
       }
       const user = await this.updateSession(req, req.body.data);
@@ -210,7 +209,7 @@ export class NextAuthController {
 
     if (redirect?.endsWith('api/auth/error?error=AccessDenied')) {
       this.logger.log(`Early access redirect headers: ${req.headers}`);
-      this.metrics.authFailCounter(1, {
+      metrics().authFailCounter.add(1, {
         reason: 'no_early_access_permission',
       });
       if (

packages/backend/server/src/modules/doc/history.ts

@@ -6,7 +6,7 @@ import { Cron, CronExpression } from '@nestjs/schedule';
 import type { Snapshot } from '@prisma/client';
 
 import { Config } from '../../config';
-import { Metrics } from '../../metrics';
+import { metrics } from '../../metrics';
 import { PrismaService } from '../../prisma';
 import { SubscriptionStatus } from '../payment/service';
 import { Permission } from '../workspaces/types';
@@ -16,8 +16,7 @@ export class DocHistoryManager {
   private readonly logger = new Logger(DocHistoryManager.name);
   constructor(
     private readonly config: Config,
-    private readonly db: PrismaService,
-    private readonly metrics: Metrics
+    private readonly db: PrismaService
   ) {}
 
   @OnEvent('doc:manager:snapshot:beforeUpdate')
@@ -69,7 +68,7 @@ export class DocHistoryManager {
           // safe to ignore
           // only happens when duplicated history record created in multi processes
         });
-      this.metrics.docHistoryCounter(1, {});
+      metrics().docHistoryCounter.add(1, {});
       this.logger.log(
         `History created for ${snapshot.id} in workspace ${snapshot.workspaceId}.`
       );
@@ -183,7 +182,7 @@ export class DocHistoryManager {
     //  which is not the solution in CRDT.
     //  let user revert in client and update the data in sync system
     //    `await this.db.snapshot.update();`
-    this.metrics.docRecoverCounter(1, {});
+    metrics().docRecoverCounter.add(1, {});
 
     return history.timestamp;
   }

packages/backend/server/src/modules/doc/manager.ts

@@ -19,7 +19,7 @@ import {
 
 import { Cache } from '../../cache';
 import { Config } from '../../config';
-import { Metrics } from '../../metrics/metrics';
+import { metrics } from '../../metrics/metrics';
 import { PrismaService } from '../../prisma';
 import { mergeUpdatesInApplyWay as jwstMergeUpdates } from '../../storage';
 
@@ -70,7 +70,6 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     private readonly automation: boolean,
     private readonly db: PrismaService,
     private readonly config: Config,
-    private readonly metrics: Metrics,
     private readonly cache: Cache,
     private readonly event: EventEmitter2
   ) {}
@@ -126,13 +125,13 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
       this.config.doc.manager.experimentalMergeWithJwstCodec &&
       updates.length < 100 /* avoid overloading */
     ) {
-      this.metrics.jwstCodecMerge(1, {});
+      metrics().jwstCodecMerge.add(1);
       const yjsResult = Buffer.from(encodeStateAsUpdate(doc));
       let log = false;
       try {
         const jwstResult = jwstMergeUpdates(updates);
         if (!compare(yjsResult, jwstResult)) {
-          this.metrics.jwstCodecDidnotMatch(1, {});
+          metrics().jwstCodecDidnotMatch.add(1);
           this.logger.warn(
             `jwst codec result doesn't match yjs codec result for: ${guid}`
           );
@@ -143,7 +142,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
           }
         }
       } catch (e) {
-        this.metrics.jwstCodecFail(1, {});
+        metrics().jwstCodecFail.add(1);
         this.logger.warn(`jwst apply update failed for ${guid}: ${e}`);
         log = true;
       } finally {

packages/backend/server/src/modules/sync/events/events.gateway.ts

@@ -11,8 +11,8 @@ import {
 import { Server, Socket } from 'socket.io';
 import { encodeStateAsUpdate, encodeStateVector } from 'yjs';
 
-import { Metrics } from '../../../metrics/metrics';
-import { CallCounter, CallTimer } from '../../../metrics/utils';
+import { metrics } from '../../../metrics';
+import { CallTimer } from '../../../metrics/utils';
 import { DocID } from '../../../utils/doc';
 import { Auth, CurrentUser } from '../../auth';
 import { DocManager } from '../../doc';
@@ -68,8 +68,7 @@ export const GatewayErrorWrapper = (): MethodDecorator => {
 const SubscribeMessage = (event: string) =>
   applyDecorators(
     GatewayErrorWrapper(),
-    CallCounter('socket_io_counter', { event }),
-    CallTimer('socket_io_timer', { event }),
+    CallTimer('socket_io_event_duration', { event }),
     RawSubscribeMessage(event)
   );
 
@@ -97,7 +96,6 @@ export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
   constructor(
     private readonly docManager: DocManager,
-    private readonly metric: Metrics,
     private readonly permissions: PermissionService
   ) {}
 
@@ -106,12 +104,12 @@ export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
 
   handleConnection() {
     this.connectionCount++;
-    this.metric.socketIOConnectionGauge(this.connectionCount, {});
+    metrics().socketIOConnectionGauge(this.connectionCount);
   }
 
   handleDisconnect() {
     this.connectionCount--;
-    this.metric.socketIOConnectionGauge(this.connectionCount, {});
+    metrics().socketIOConnectionGauge(this.connectionCount);
   }
 
   @Auth()

packages/backend/server/src/modules/workspaces/controller.ts

@@ -4,14 +4,13 @@ import {
   ForbiddenException,
   Get,
   Inject,
-  Logger,
   NotFoundException,
   Param,
   Res,
 } from '@nestjs/common';
 import type { Response } from 'express';
-import format from 'pretty-time';
 
+import { CallTimer } from '../../metrics';
 import { PrismaService } from '../../prisma';
 import { StorageProvide } from '../../storage';
 import { DocID } from '../../utils/doc';
@@ -23,8 +22,6 @@ import { Permission } from './types';
 
 @Controller('/api/workspaces')
 export class WorkspacesController {
-  private readonly logger = new Logger('WorkspacesController');
-
   constructor(
     @Inject(StorageProvide) private readonly storage: Storage,
     private readonly permission: PermissionService,
@@ -37,6 +34,7 @@ export class WorkspacesController {
   //
   // NOTE: because graphql can't represent a File, so we have to use REST API to get blob
   @Get('/:id/blobs/:name')
+  @CallTimer('doc_controller', { method: 'get_blob' })
   async blob(
     @Param('id') workspaceId: string,
     @Param('name') name: string,
@@ -61,13 +59,13 @@ export class WorkspacesController {
   @Get('/:id/docs/:guid')
   @Auth()
   @Publicable()
+  @CallTimer('doc_controller', { method: 'get_doc' })
   async doc(
     @CurrentUser() user: UserType | undefined,
     @Param('id') ws: string,
     @Param('guid') guid: string,
     @Res() res: Response
   ) {
-    const start = process.hrtime();
     const docId = new DocID(guid, ws);
     if (
       // if a user has the permission
@@ -104,11 +102,11 @@ export class WorkspacesController {
 
     res.setHeader('content-type', 'application/octet-stream');
     res.send(update);
-    this.logger.debug(`workspaces doc api: ${format(process.hrtime(start))}`);
   }
 
   @Get('/:id/docs/:guid/histories/:timestamp')
   @Auth()
+  @CallTimer('doc_controller', { method: 'get_history' })
   async history(
     @CurrentUser() user: UserType,
     @Param('id') ws: string,

packages/backend/server/tests/auth.spec.ts

@@ -5,7 +5,6 @@ import test from 'ava';
 
 import { ConfigModule } from '../src/config';
 import { GqlModule } from '../src/graphql.module';
-import { MetricsModule } from '../src/metrics';
 import { AuthModule } from '../src/modules/auth';
 import { AuthResolver } from '../src/modules/auth/resolver';
 import { AuthService } from '../src/modules/auth/service';
@@ -40,7 +39,6 @@ test.beforeEach(async () => {
       PrismaModule,
       GqlModule,
       AuthModule,
-      MetricsModule,
       RateLimiterModule,
     ],
   }).compile();

packages/backend/server/tests/doc.spec.ts

@@ -10,7 +10,6 @@ import { Doc as YDoc, encodeStateAsUpdate } from 'yjs';
 
 import { CacheModule } from '../src/cache';
 import { Config, ConfigModule } from '../src/config';
-import { MetricsModule } from '../src/metrics';
 import { DocManager, DocModule } from '../src/modules/doc';
 import { PrismaModule, PrismaService } from '../src/prisma';
 import { flushDB } from './utils';
@@ -19,7 +18,6 @@ const createModule = () => {
   return Test.createTestingModule({
     imports: [
       PrismaModule,
-      MetricsModule,
       CacheModule,
       EventEmitterModule.forRoot(),
       ConfigModule.forRoot(),

packages/backend/server/tests/history.spec.ts

@@ -6,7 +6,6 @@ import test from 'ava';
 import * as Sinon from 'sinon';
 
 import { ConfigModule } from '../src/config';
-import { MetricsModule } from '../src/metrics';
 import { DocHistoryManager } from '../src/modules/doc';
 import { PrismaModule, PrismaService } from '../src/prisma';
 import { flushDB } from './utils';
@@ -20,12 +19,7 @@ let db: PrismaService;
 test.beforeEach(async () => {
   await flushDB();
   m = await Test.createTestingModule({
-    imports: [
-      PrismaModule,
-      MetricsModule,
-      ScheduleModule.forRoot(),
-      ConfigModule.forRoot(),
-    ],
+    imports: [PrismaModule, ScheduleModule.forRoot(), ConfigModule.forRoot()],
     providers: [DocHistoryManager],
   }).compile();
 

packages/backend/server/tests/mailer.e2e.ts

@@ -12,7 +12,6 @@ import ava, { type TestFn } from 'ava';
 
 import { ConfigModule } from '../src/config';
 import { GqlModule } from '../src/graphql.module';
-import { MetricsModule } from '../src/metrics';
 import { AuthModule } from '../src/modules/auth';
 import { AuthService } from '../src/modules/auth/service';
 import { PrismaModule } from '../src/prisma';
@@ -44,7 +43,6 @@ test.beforeEach(async t => {
       PrismaModule,
       GqlModule,
       AuthModule,
-      MetricsModule,
       RateLimiterModule,
     ],
   }).compile();

packages/backend/server/tests/prometheus-metrics.spec.ts

@@ -1,78 +0,0 @@
-import { Test, TestingModule } from '@nestjs/testing';
-import test from 'ava';
-import { register } from 'prom-client';
-
-import { MetricsModule } from '../src/metrics';
-import { Metrics } from '../src/metrics/metrics';
-import { PrismaModule } from '../src/prisma';
-
-let metrics: Metrics;
-let module: TestingModule;
-
-test.beforeEach(async () => {
-  module = await Test.createTestingModule({
-    imports: [MetricsModule, PrismaModule],
-  }).compile();
-
-  metrics = module.get(Metrics);
-});
-
-test.afterEach.always(async () => {
-  await module.close();
-});
-
-test('should be able to increment counter', async t => {
-  metrics.socketIOEventCounter(1, { event: 'client-handshake' });
-  const socketIOCounterMetric = register.getSingleMetric('socket_io_counter');
-  t.truthy(socketIOCounterMetric);
-
-  t.truthy(
-    JSON.stringify((await socketIOCounterMetric!.get()).values) ===
-      '[{"value":1,"labels":{"event":"client-handshake"}}]'
-  );
-  t.pass();
-});
-
-test('should be able to timer', async t => {
-  let minimum: number;
-  {
-    const endTimer = metrics.socketIOEventTimer({ event: 'client-handshake' });
-    const a = performance.now();
-    await new Promise(resolve => setTimeout(resolve, 50));
-    const b = performance.now();
-    minimum = b - a;
-    endTimer();
-  }
-
-  let maximum: number;
-  {
-    const a = performance.now();
-    const endTimer = metrics.socketIOEventTimer({ event: 'client-handshake' });
-    await new Promise(resolve => setTimeout(resolve, 100));
-    endTimer();
-    const b = performance.now();
-    maximum = b - a;
-  }
-
-  const socketIOTimerMetric = register.getSingleMetric('socket_io_timer');
-  t.truthy(socketIOTimerMetric);
-
-  const observations = (await socketIOTimerMetric!.get()).values;
-
-  for (const observation of observations) {
-    if (
-      observation.labels.event === 'client-handshake' &&
-      'quantile' in observation.labels
-    ) {
-      t.truthy(
-        observation.value >= minimum / 1000,
-        'observation.value should be greater than minimum'
-      );
-      t.truthy(
-        observation.value <= maximum / 1000,
-        'observation.value should be less than maximum'
-      );
-    }
-  }
-  t.pass();
-});

packages/backend/storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affine/storage",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "engines": {
     "node": ">= 10.16.0 < 11 || >= 11.8.0"
   },

packages/common/cmdk/package.json

@@ -8,5 +8,5 @@
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/common/debug/package.json

@@ -9,5 +9,5 @@
     "@types/debug": "^4.1.9",
     "vitest": "0.34.6"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/common/env/package.json

@@ -27,5 +27,5 @@
   "dependencies": {
     "lit": "^3.0.2"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/common/infra/package.json

@@ -107,5 +107,5 @@
       "optional": true
     }
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/common/infra/src/blocksuite/initialization/index.ts

@@ -3,6 +3,7 @@ import type { Page, PageMeta, Workspace } from '@blocksuite/store';
 import type { createStore, WritableAtom } from 'jotai/vanilla';
 import { nanoid } from 'nanoid';
 
+import { checkWorkspaceCompatibility, MigrationPoint } from '..';
 import { migratePages } from '../migration/blocksuite';
 
 export async function initEmptyPage(page: Page, title?: string) {
@@ -244,46 +245,48 @@ export async function buildShowcaseWorkspace(
       {} as Record<string, string>
     );
   });
-  await Promise.all(
-    data.map(async ([id, promise, newId]) => {
-      const { default: template } = await promise;
-      let json = JSON.stringify(template);
-      Object.entries(idMap).forEach(([oldId, newId]) => {
-        json = json.replaceAll(oldId, newId);
-      });
-      json = JSON.parse(json);
-      await workspace
-        .importPageSnapshot(structuredClone(json), newId)
-        .catch(error => {
-          console.error('error importing page', id, error);
-        });
-      const page = workspace.getPage(newId);
-      assertExists(page);
-      await page.load();
-      workspace.schema.upgradePage(
-        0,
-        {
-          'affine:note': 1,
-          'affine:bookmark': 1,
-          'affine:database': 2,
-          'affine:divider': 1,
-          'affine:image': 1,
-          'affine:list': 1,
-          'affine:code': 1,
-          'affine:page': 2,
-          'affine:paragraph': 1,
-          'affine:surface': 3,
-        },
-        page.spaceDoc
-      );
 
-      // The showcase building will create multiple pages once, and may skip the version writing.
-      // https://github.com/toeverything/blocksuite/blob/master/packages/store/src/workspace/page.ts#L662
-      if (!workspace.meta.blockVersions) {
-        await migratePages(workspace.doc, workspace.schema);
-      }
-    })
-  );
+  // Import page one by one to prevent workspace meta race condition problem.
+  for (const [id, promise, newId] of data) {
+    const { default: template } = await promise;
+    let json = JSON.stringify(template);
+    Object.entries(idMap).forEach(([oldId, newId]) => {
+      json = json.replaceAll(oldId, newId);
+    });
+    json = JSON.parse(json);
+    await workspace
+      .importPageSnapshot(structuredClone(json), newId)
+      .catch(error => {
+        console.error('error importing page', id, error);
+      });
+    const page = workspace.getPage(newId);
+    assertExists(page);
+    await page.load();
+    workspace.schema.upgradePage(
+      0,
+      {
+        'affine:note': 1,
+        'affine:bookmark': 1,
+        'affine:database': 2,
+        'affine:divider': 1,
+        'affine:image': 1,
+        'affine:list': 1,
+        'affine:code': 1,
+        'affine:page': 2,
+        'affine:paragraph': 1,
+        'affine:surface': 3,
+      },
+      page.spaceDoc
+    );
+  }
+
+  // The showcase building will create multiple pages once, and may skip the version writing.
+  // https://github.com/toeverything/blocksuite/blob/master/packages/store/src/workspace/page.ts#L662
+  const compatibilityResult = checkWorkspaceCompatibility(workspace);
+  if (compatibilityResult === MigrationPoint.BlockVersion) {
+    await migratePages(workspace.doc, workspace.schema);
+  }
+
   Object.entries(pageMetas).forEach(([oldId, meta]) => {
     const newId = idMap[oldId];
     workspace.setPageMeta(newId, meta);

packages/common/infra/src/blocksuite/migration/blocksuite.ts

@@ -20,13 +20,18 @@ export async function migratePages(
   const meta = rootDoc.getMap('meta') as YMap<unknown>;
   const versions = meta.get('blockVersions') as YMap<number>;
   const oldVersions = versions?.toJSON() ?? {};
+
   spaces.forEach((space: YDoc) => {
-    try {
-      schema.upgradePage(0, oldVersions, space);
-    } catch (e) {
-      console.error(`page ${space.guid} upgrade failed`, e);
-    }
+    schema.upgradePage(0, oldVersions, space);
   });
+  schema.upgradeWorkspace(rootDoc);
+
+  // Hard code to upgrade page version to 2.
+  // Let e2e to ensure the data version is correct.
+  const pageVersion = meta.get('pageVersion');
+  if (typeof pageVersion !== 'number' || pageVersion < 2) {
+    meta.set('pageVersion', 2);
+  }
 
   const newVersions = getLatestVersions(schema);
   meta.set('blockVersions', new YMap(Object.entries(newVersions)));

packages/common/infra/src/blocksuite/migration/fixing.ts

@@ -43,3 +43,25 @@ export function guidCompatibilityFix(rootDoc: YDoc) {
   });
   return changed;
 }
+
+/**
+ * Hard code to fix workspace version to be compatible with legacy data.
+ * Let e2e to ensure the data version is correct.
+ */
+export function fixWorkspaceVersion(rootDoc: YDoc) {
+  const meta = rootDoc.getMap('meta') as YMap<unknown>;
+
+  /**
+   * It doesn't matter to upgrade workspace version from 1 or undefined to 2.
+   * Blocksuite just set the value, do nothing else.
+   */
+  const workspaceVersion = meta.get('workspaceVersion');
+  if (typeof workspaceVersion !== 'number' || workspaceVersion < 2) {
+    meta.set('workspaceVersion', 2);
+
+    const pageVersion = meta.get('pageVersion');
+    if (typeof pageVersion !== 'number') {
+      meta.set('pageVersion', 1);
+    }
+  }
+}

packages/common/infra/src/blocksuite/migration/workspace.ts

@@ -58,15 +58,25 @@ export function checkWorkspaceCompatibility(
     return MigrationPoint.SubDoc;
   }
 
-  // Sometimes, blocksuite will not write blockVersions to meta.
-  // Just fix it when user open the workspace.
-  const blockVersions = workspace.meta.blockVersions;
-  if (!blockVersions) {
+  const hasVersion = workspace.meta.hasVersion;
+  if (!hasVersion) {
     return MigrationPoint.BlockVersion;
   }
 
+  // TODO: Catch compatibility error from blocksuite to show upgrade page.
+  // Temporarily follow the check logic of blocksuite.
+  if ((workspace.meta.pages?.length ?? 0) <= 1) {
+    try {
+      workspace.meta.validateVersion(workspace);
+    } catch (e) {
+      console.info('validateVersion error', e);
+      return MigrationPoint.BlockVersion;
+    }
+  }
+
   // From v2, we depend on blocksuite to check and migrate data.
-  for (const [flavour, version] of Object.entries(blockVersions)) {
+  const blockVersions = workspace.meta.blockVersions;
+  for (const [flavour, version] of Object.entries(blockVersions ?? {})) {
     const schema = workspace.schema.flavourSchemaMap.get(flavour);
     if (schema?.version !== version) {
       return MigrationPoint.BlockVersion;

packages/common/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affine/sdk",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "type": "module",
   "scripts": {
     "build": "vite build",

packages/common/y-indexeddb/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@toeverything/y-indexeddb",
   "type": "module",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "description": "IndexedDB database adapter for Yjs",
   "repository": "toeverything/AFFiNE",
   "author": "toeverything",

packages/common/y-provider/package.json

@@ -1,7 +1,7 @@
 {
   "name": "y-provider",
   "type": "module",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "description": "Yjs provider protocol for multi document support",
   "exports": {
     ".": "./src/index.ts"

packages/frontend/component/package.json

@@ -85,5 +85,5 @@
     "vitest": "0.34.6",
     "yjs": "^13.6.10"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/frontend/component/src/components/block-suite-editor/index.tsx

@@ -7,14 +7,12 @@ import type { CSSProperties, ReactElement } from 'react';
 import {
   memo,
   Suspense,
-  useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react';
-import type { FallbackProps } from 'react-error-boundary';
-import { ErrorBoundary } from 'react-error-boundary';
+import { type Map as YMap } from 'yjs';
 
 import { Skeleton } from '../../ui/skeleton';
 import {
@@ -77,6 +75,67 @@ const useBlockElementById = (
   return blockElement;
 };
 
+/**
+ * TODO: Define error to unexpected state together in the future.
+ */
+export class NoPageRootError extends Error {
+  constructor(public page: Page) {
+    super('Page root not found when render editor!');
+
+    // Log info to let sentry collect more message
+    const hasExpectSpace = Array.from(page.doc.spaces.values()).some(
+      doc => page.spaceDoc.guid === doc.guid
+    );
+    const blocks = page.spaceDoc.getMap('blocks') as YMap<YMap<any>>;
+    const havePageBlock = Array.from(blocks.values()).some(
+      block => block.get('sys:flavour') === 'affine:page'
+    );
+    console.info(
+      'NoPageRootError current data: %s',
+      JSON.stringify({
+        expectPageId: page.id,
+        expectGuid: page.spaceDoc.guid,
+        hasExpectSpace,
+        blockSize: blocks.size,
+        havePageBlock,
+      })
+    );
+  }
+}
+
+/**
+ * TODO: Defined async cache to support suspense, instead of reflect symbol to provider persistent error cache.
+ */
+const PAGE_LOAD_KEY = Symbol('PAGE_LOAD');
+const PAGE_ROOT_KEY = Symbol('PAGE_ROOT');
+function usePageRoot(page: Page) {
+  let load$ = Reflect.get(page, PAGE_LOAD_KEY);
+  if (!load$) {
+    load$ = page.load();
+    Reflect.set(page, PAGE_LOAD_KEY, load$);
+  }
+  use(load$);
+
+  if (!page.root) {
+    let root$: Promise<void> | undefined = Reflect.get(page, PAGE_ROOT_KEY);
+    if (!root$) {
+      root$ = new Promise((resolve, reject) => {
+        const disposable = page.slots.rootAdded.once(() => {
+          resolve();
+        });
+        window.setTimeout(() => {
+          disposable.dispose();
+          reject(new NoPageRootError(page));
+        }, 20 * 1000);
+      });
+      Reflect.set(page, PAGE_ROOT_KEY, root$);
+    }
+    use(root$);
+  }
+
+  return page.root;
+}
+
 const BlockSuiteEditorImpl = ({
   mode,
   page,
@@ -86,9 +145,8 @@ const BlockSuiteEditorImpl = ({
   onModeChange,
   style,
 }: EditorProps): ReactElement => {
-  if (!page.loaded) {
-    use(page.waitForLoaded());
-  }
+  usePageRoot(page);
+
   assertExists(page, 'page should not be null');
   const editorRef = useRef<EditorContainer | null>(null);
   if (editorRef.current === null) {
@@ -176,27 +234,7 @@ const BlockSuiteEditorImpl = ({
   );
 };
 
-const BlockSuiteErrorFallback = (
-  props: FallbackProps & ErrorBoundaryProps
-): ReactElement => {
-  return (
-    <div>
-      <h1>Sorry.. there was an error</h1>
-      <div>{props.error.message}</div>
-      <button
-        data-testid="error-fallback-reset-button"
-        onClick={() => {
-          props.onReset?.();
-          props.resetErrorBoundary();
-        }}
-      >
-        Try again
-      </button>
-    </div>
-  );
-};
-
-export const BlockSuiteFallback = memo(function BlockSuiteFallback() {
+export const EditorLoading = memo(function EditorLoading() {
   return (
     <div className={blockSuiteEditorStyle}>
       <Skeleton
@@ -210,21 +248,12 @@ export const BlockSuiteFallback = memo(function BlockSuiteFallback() {
 });
 
 export const BlockSuiteEditor = memo(function BlockSuiteEditor(
-  props: EditorProps & ErrorBoundaryProps
+  props: EditorProps
 ): ReactElement {
   return (
-    <ErrorBoundary
-      fallbackRender={useCallback(
-        (fallbackProps: FallbackProps) => (
-          <BlockSuiteErrorFallback {...fallbackProps} onReset={props.onReset} />
-        ),
-        [props.onReset]
-      )}
-    >
-      <Suspense fallback={<BlockSuiteFallback />}>
-        <BlockSuiteEditorImpl key={props.page.id} {...props} />
-      </Suspense>
-    </ErrorBoundary>
+    <Suspense fallback={<EditorLoading />}>
+      <BlockSuiteEditorImpl key={props.page.id} {...props} />
+    </Suspense>
   );
 });
 

packages/frontend/component/src/components/page-detail-skeleton/index.tsx

@@ -1,4 +1,4 @@
-import { BlockSuiteFallback } from '../block-suite-editor';
+import { EditorLoading } from '../block-suite-editor';
 import {
   pageDetailSkeletonStyle,
   pageDetailSkeletonTitleStyle,
@@ -8,7 +8,7 @@ export const PageDetailSkeleton = () => {
   return (
     <div className={pageDetailSkeletonStyle}>
       <div className={pageDetailSkeletonTitleStyle} />
-      <BlockSuiteFallback />
+      <EditorLoading />
     </div>
   );
 };

packages/frontend/core/.webpack/config.ts

@@ -351,6 +351,8 @@ export const createConfiguration: (
         'process.env.CAPTCHA_SITE_KEY': JSON.stringify(
           process.env.CAPTCHA_SITE_KEY
         ),
+        'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN),
+        'process.env.BUILD_TYPE': JSON.stringify(process.env.BUILD_TYPE),
         runtimeConfig: JSON.stringify(runtimeConfig),
       }),
       new CopyPlugin({

packages/frontend/core/package.json

@@ -2,7 +2,7 @@
   "name": "@affine/core",
   "type": "module",
   "private": true,
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "scripts": {
     "build": "yarn -T run build-core",
     "dev": "yarn -T run dev-core",
@@ -45,6 +45,8 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@react-hookz/web": "^23.1.0",
+    "@sentry/integrations": "^7.83.0",
+    "@sentry/react": "^7.83.0",
     "@toeverything/components": "^0.0.46",
     "@toeverything/theme": "^0.7.20",
     "@vanilla-extract/css": "^1.13.0",

packages/frontend/core/project.json

@@ -38,7 +38,7 @@
           "env": "SENTRY_AUTH_TOKEN"
         },
         {
-          "env": "NEXT_PUBLIC_SENTRY_DSN"
+          "env": "SENTRY_DSN"
         },
         {
           "env": "DISTRIBUTION"

packages/frontend/core/src/bootstrap/setup.ts

@@ -6,7 +6,15 @@ import {
   rootWorkspacesMetadataAtom,
   workspaceAdaptersAtom,
 } from '@affine/workspace/atom';
+import * as Sentry from '@sentry/react';
 import type { createStore } from 'jotai/vanilla';
+import { useEffect } from 'react';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
 
 import { WorkspaceAdapters } from '../adapters/workspace';
 import { performanceLogger } from '../shared';
@@ -51,6 +59,33 @@ export async function setup(store: ReturnType<typeof createStore>) {
   performanceSetupLogger.info('setup global');
   setupGlobal();
 
+  if (window.SENTRY_RELEASE || environment.isDebug) {
+    // https://docs.sentry.io/platforms/javascript/guides/react/#configure
+    Sentry.init({
+      dsn: process.env.SENTRY_DSN,
+      environment: process.env.BUILD_TYPE ?? 'development',
+      integrations: [
+        new Sentry.BrowserTracing({
+          routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+            useEffect,
+            useLocation,
+            useNavigationType,
+            createRoutesFromChildren,
+            matchRoutes
+          ),
+        }),
+        new Sentry.Replay(),
+      ],
+      // Set tracesSampleRate to 1.0 to capture 100%
+      // of transactions for performance monitoring.
+      tracesSampleRate: 1.0,
+    });
+    Sentry.setTags({
+      appVersion: runtimeConfig.appVersion,
+      editorVersion: runtimeConfig.editorVersion,
+    });
+  }
+
   performanceSetupLogger.info('get root workspace meta');
   // do not read `rootWorkspacesMetadataAtom` before migration
   await store.get(rootWorkspacesMetadataAtom);

packages/frontend/core/src/components/affine/affine-error-boundary.tsx

@@ -1,191 +0,0 @@
-import type {
-  QueryParamError,
-  Unreachable,
-  WorkspaceNotFoundError,
-} from '@affine/env/constant';
-import { PageNotFoundError } from '@affine/env/constant';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { Button } from '@toeverything/components/button';
-import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-  getCurrentStore,
-} from '@toeverything/infra/atom';
-import { useAtomValue } from 'jotai/react';
-import { Provider } from 'jotai/react';
-import type { ErrorInfo, ReactElement, ReactNode } from 'react';
-import type React from 'react';
-import { Component, useEffect } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-
-import {
-  RecoverableError,
-  type SessionFetchErrorRightAfterLoginOrSignUp,
-} from '../../unexpected-application-state/errors';
-import {
-  errorDescription,
-  errorDetailStyle,
-  errorDivider,
-  errorImage,
-  errorLayout,
-  errorRetryButton,
-  errorTitle,
-} from './affine-error-boundary.css';
-import errorBackground from './error-status.assets.svg';
-
-export type AffineErrorBoundaryProps = React.PropsWithChildren & {
-  height?: number | string;
-};
-
-type AffineError =
-  | QueryParamError
-  | Unreachable
-  | WorkspaceNotFoundError
-  | PageNotFoundError
-  | Error
-  | SessionFetchErrorRightAfterLoginOrSignUp;
-
-interface AffineErrorBoundaryState {
-  error: AffineError | null;
-  canRetryRecoveredError: boolean;
-}
-
-export const DumpInfo = () => {
-  const location = useLocation();
-  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
-  const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
-  const currentPageId = useAtomValue(currentPageIdAtom);
-  const path = location.pathname;
-  const query = useParams();
-  useEffect(() => {
-    console.info('DumpInfo', {
-      path,
-      query,
-      currentWorkspaceId,
-      currentPageId,
-      metadata,
-    });
-  }, [path, query, currentWorkspaceId, currentPageId, metadata]);
-  return null;
-};
-
-export class AffineErrorBoundary extends Component<
-  AffineErrorBoundaryProps,
-  AffineErrorBoundaryState
-> {
-  override state: AffineErrorBoundaryState = {
-    error: null,
-    canRetryRecoveredError: true,
-  };
-
-  private readonly handleRecoverableRetry = () => {
-    if (this.state.error instanceof RecoverableError) {
-      if (this.state.error.canRetry()) {
-        this.state.error.retry();
-        this.setState({
-          error: null,
-          canRetryRecoveredError: this.state.error.canRetry(),
-        });
-      } else {
-        document.location.reload();
-      }
-    }
-  };
-
-  private readonly handleRefresh = () => {
-    this.setState({ error: null });
-  };
-
-  static getDerivedStateFromError(
-    error: AffineError
-  ): AffineErrorBoundaryState {
-    return {
-      error,
-      canRetryRecoveredError:
-        error instanceof RecoverableError ? error.canRetry() : true,
-    };
-  }
-
-  override componentDidCatch(error: AffineError, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  override render(): ReactNode {
-    if (this.state.error) {
-      let errorDetail: ReactElement | null = null;
-      const error = this.state.error;
-      if (error instanceof PageNotFoundError) {
-        errorDetail = (
-          <>
-            <h1>Sorry.. there was an error</h1>
-            <>
-              <span> Page error </span>
-              <span>
-                Cannot find page {error.pageId} in workspace{' '}
-                {error.workspace.id}
-              </span>
-            </>
-          </>
-        );
-      } else if (error instanceof RecoverableError) {
-        const retryButtonDesc = this.state.canRetryRecoveredError
-          ? 'Refetch'
-          : 'Reload';
-        errorDetail = (
-          <>
-            <h1 className={errorTitle}>Sorry.. there was an error</h1>
-            <span className={errorDescription}> {error.message} </span>
-            <span className={errorDescription}>
-              If you are still experiencing this issue, please{' '}
-              <a
-                style={{ color: 'var(--affine-primary-color)' }}
-                href="https://community.affine.pro"
-                target="__blank"
-              >
-                contact us through the community.
-              </a>
-            </span>
-            <Button
-              className={errorRetryButton}
-              onClick={this.handleRecoverableRetry}
-              type="primary"
-            >
-              {retryButtonDesc}
-            </Button>
-          </>
-        );
-      } else {
-        errorDetail = (
-          <>
-            <h1 className={errorTitle}>Sorry.. there was an error</h1>
-            <code className={errorDescription}>
-              {error.message ?? error.toString()}
-            </code>
-            <Button
-              onClick={this.handleRefresh}
-              className={errorRetryButton}
-              type="primary"
-            >
-              Refresh
-            </Button>
-          </>
-        );
-      }
-      return (
-        <div className={errorLayout} style={{ height: this.props.height }}>
-          <div className={errorDetailStyle}>{errorDetail}</div>
-          <span className={errorDivider} />
-          <div
-            className={errorImage}
-            style={{ backgroundImage: `url(${errorBackground})` }}
-          />
-          <Provider key="JotaiProvider" store={getCurrentStore()}>
-            <DumpInfo />
-          </Provider>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const viewport = style({
+  height: '100%',
+  width: '100%',
+});

packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx

@@ -0,0 +1,53 @@
+import { getCurrentStore } from '@toeverything/infra/atom';
+import { Provider } from 'jotai/react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import * as styles from './affine-error-fallback.css';
+import {
+  ERROR_REFLECT_KEY,
+  type FallbackProps,
+} from './error-basic/fallback-creator';
+import { DumpInfo } from './error-basic/info-logger';
+import { AnyErrorFallback } from './error-fallbacks/any-error-fallback';
+import { NoPageRootFallback } from './error-fallbacks/no-page-root-fallback';
+import { PageNotFoundDetail } from './error-fallbacks/page-not-found-fallback';
+import { RecoverableErrorFallback } from './error-fallbacks/recoverable-error-fallback';
+
+/**
+ * Register all fallback components here.
+ * If have new one just add it to the set.
+ */
+const fallbacks = new Set([
+  PageNotFoundDetail,
+  RecoverableErrorFallback,
+  NoPageRootFallback,
+]);
+
+function getErrorFallbackComponent(error: any): FC<FallbackProps> {
+  for (const Component of fallbacks) {
+    const ErrorConstructor = Reflect.get(Component, ERROR_REFLECT_KEY);
+    if (ErrorConstructor && error instanceof ErrorConstructor) {
+      return Component as FC<FallbackProps>;
+    }
+  }
+  return AnyErrorFallback;
+}
+
+export interface AffineErrorFallbackProps extends FallbackProps {
+  height?: number | string;
+}
+
+export const AffineErrorFallback: FC<AffineErrorFallbackProps> = props => {
+  const { error, resetError, height } = props;
+  const Component = useMemo(() => getErrorFallbackComponent(error), [error]);
+
+  return (
+    <div className={styles.viewport} style={{ height }}>
+      <Component error={error} resetError={resetError} />
+      <Provider key="JotaiProvider" store={getCurrentStore()}>
+        <DumpInfo error={error} />
+      </Provider>
+    </div>
+  );
+};

packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/500-status.assets.svg

@@ -0,0 +1,43 @@
+<svg width="490" height="242" viewBox="0 0 490 242" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.5098 155.545C16.4625 163.027 18.0723 169.655 21.3393 175.432C24.6064 181.208 29.1282 185.73 34.9047 188.997C40.6812 192.264 47.3337 193.898 54.8621 193.898C63.2428 193.898 70.6765 191.838 77.1632 187.719C83.65 183.599 88.7399 177.989 92.4331 170.886C96.1263 163.784 97.9965 155.735 98.0439 146.739C98.0912 137.364 96.1026 129.196 92.078 122.236C88.1007 115.228 82.7977 109.807 76.1689 105.972C69.5875 102.089 62.3905 100.148 54.578 100.148C48.7541 100.148 43.4274 101.166 38.5979 103.202C33.7683 105.19 29.5306 107.866 25.8848 111.227H25.3166L32.703 51H93.2143" stroke="black" stroke-width="2"/>
+  <ellipse cx="94.4026" cy="50.8894" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <ellipse cx="16.4026" cy="155.889" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <ellipse cx="32.4026" cy="50.8894" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <ellipse cx="25.4026" cy="110.889" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <path d="M151.592 59.1235L275.951 183.342" stroke="#E3E2E4"/>
+  <rect x="151.626" y="59.1582" width="124.291" height="124.149" stroke="#E3E2E4"/>
+  <path d="M275.573 121.465C276.129 117.824 276.417 114.095 276.417 110.299C276.417 69.7024 243.469 36.792 202.826 36.792C162.183 36.792 129.235 69.7024 129.235 110.299C129.235 150.897 162.183 183.807 202.826 183.807C206.465 183.807 210.041 183.543 213.539 183.034" stroke="#E3E2E4"/>
+  <path d="M213.539 182.964C217.184 183.519 220.917 183.807 224.717 183.807C265.36 183.807 298.308 150.897 298.308 110.299C298.308 69.7024 265.36 36.792 224.717 36.792C184.074 36.792 151.126 69.7024 151.126 110.299C151.126 114.095 151.414 117.824 151.97 121.465" stroke="#E3E2E4"/>
+  <path d="M151.434 121.465C150.924 124.958 150.66 128.531 150.66 132.166C150.66 172.763 183.608 205.673 224.251 205.673C264.894 205.673 297.842 172.763 297.842 132.166C297.842 91.5686 264.894 58.6582 224.251 58.6582C220.613 58.6582 217.036 58.922 213.539 59.4314" stroke="#E3E2E4"/>
+  <path d="M213.539 59.4314C210.041 58.922 206.465 58.6582 202.826 58.6582C162.183 58.6582 129.235 91.5686 129.235 132.166C129.235 172.763 162.183 205.673 202.826 205.673C243.469 205.673 276.417 172.763 276.417 132.166C276.417 128.531 276.153 124.958 275.643 121.465" stroke="#E3E2E4"/>
+  <path d="M275.951 59.1235L151.592 183.342" stroke="#E3E2E4"/>
+  <path d="M151.126 121.465H275.951" stroke="#E3E2E4"/>
+  <path d="M213.539 58.6582V183.807" stroke="#E3E2E4"/>
+  <ellipse cx="275.951" cy="121.465" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="275.951" cy="59.1233" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="275.951" cy="183.807" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="151.592" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="213.539" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="213.539" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="151.592" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="151.592" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="213.539" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <path d="M338.583 59.1235L462.943 183.342" stroke="#E3E2E4"/>
+  <rect x="338.617" y="59.1582" width="124.291" height="124.149" stroke="#E3E2E4"/>
+  <path d="M462.565 121.465C463.12 117.824 463.408 114.095 463.408 110.299C463.408 69.7024 430.46 36.792 389.817 36.792C349.174 36.792 316.226 69.7024 316.226 110.299C316.226 150.897 349.174 183.807 389.817 183.807C393.456 183.807 397.033 183.543 400.53 183.034" stroke="#E3E2E4"/>
+  <path d="M400.53 182.964C404.175 183.519 407.908 183.807 411.708 183.807C452.351 183.807 485.299 150.897 485.299 110.299C485.299 69.7024 452.351 36.792 411.708 36.792C371.065 36.792 338.117 69.7024 338.117 110.299C338.117 114.095 338.405 117.824 338.961 121.465" stroke="#E3E2E4"/>
+  <path d="M338.425 121.465C337.915 124.958 337.651 128.531 337.651 132.166C337.651 172.763 370.599 205.673 411.242 205.673C451.886 205.673 484.833 172.763 484.833 132.166C484.833 91.5686 451.886 58.6582 411.242 58.6582C407.604 58.6582 404.027 58.922 400.53 59.4314" stroke="#E3E2E4"/>
+  <path d="M400.53 59.4314C397.033 58.922 393.456 58.6582 389.817 58.6582C349.174 58.6582 316.226 91.5686 316.226 132.166C316.226 172.763 349.174 205.673 389.817 205.673C430.46 205.673 463.408 172.763 463.408 132.166C463.408 128.531 463.144 124.958 462.634 121.465" stroke="#E3E2E4"/>
+  <path d="M462.943 59.1235L338.583 183.342" stroke="#E3E2E4"/>
+  <path d="M338.117 121.465H462.943" stroke="#E3E2E4"/>
+  <path d="M400.53 58.6582V183.807" stroke="#E3E2E4"/>
+  <ellipse cx="462.942" cy="121.465" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="462.942" cy="59.1233" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="462.942" cy="183.807" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="338.583" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="400.53" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="400.53" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="338.583" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="338.583" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="400.53" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+</svg>

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts

@@ -6,6 +6,7 @@ export const errorLayout = style({
   alignItems: 'center',
   height: '100%',
   width: '100%',
+  gap: '20px',
 });
 
 export const errorDetailStyle = style({
@@ -24,15 +25,15 @@ export const errorImage = style({
   height: '178px',
   maxWidth: '400px',
   flexGrow: 1,
+  backgroundSize: 'cover',
 });
 
 export const errorDescription = style({
   marginTop: '24px',
 });
 
-export const errorRetryButton = style({
+export const errorFooter = style({
   marginTop: '24px',
-  width: '94px',
 });
 
 export const errorDivider = style({

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx

@@ -0,0 +1,106 @@
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+  useState,
+} from 'react';
+
+import imageUrlFor404 from '../error-assets/404-status.assets.svg';
+import imageUrlFor500 from '../error-assets/500-status.assets.svg';
+import * as styles from './error-detail.css';
+
+export enum ErrorStatus {
+  NotFound = 404,
+  Unexpected = 500,
+}
+
+export interface ErrorDetailProps extends PropsWithChildren {
+  status?: ErrorStatus;
+  direction?: 'column' | 'row';
+  title: string;
+  description: ReactNode | Array<ReactNode>;
+  buttonText?: string;
+  onButtonClick?: () => void | Promise<void>;
+  resetError?: () => void;
+  withoutImage?: boolean;
+}
+
+const imageMap = new Map([
+  [ErrorStatus.NotFound, imageUrlFor404],
+  [ErrorStatus.Unexpected, imageUrlFor500],
+]);
+
+/**
+ * TODO: Unify with NotFoundPage.
+ */
+export const ErrorDetail: FC<ErrorDetailProps> = props => {
+  const {
+    status = ErrorStatus.Unexpected,
+    direction = 'row',
+    description,
+    onButtonClick,
+    resetError,
+    withoutImage,
+  } = props;
+  const descriptions = Array.isArray(description) ? description : [description];
+  const [isBtnLoading, setBtnLoading] = useState(false);
+  const t = useAFFiNEI18N();
+
+  const onBtnClick = useAsyncCallback(async () => {
+    try {
+      setBtnLoading(true);
+      await onButtonClick?.();
+      resetError?.(); // Only reset when retry success.
+    } finally {
+      setBtnLoading(false);
+    }
+  }, [onButtonClick, resetError]);
+
+  return (
+    <div className={styles.errorLayout} style={{ flexDirection: direction }}>
+      <div className={styles.errorDetailStyle}>
+        <h1 className={styles.errorTitle}>{props.title}</h1>
+        {descriptions.map((item, i) => (
+          <p key={i} className={styles.errorDescription}>
+            {item}
+          </p>
+        ))}
+        <div className={styles.errorFooter}>
+          <Button
+            type="primary"
+            onClick={onBtnClick}
+            loading={isBtnLoading}
+            size="extraLarge"
+          >
+            {props.buttonText ?? t['com.affine.error.retry']()}
+          </Button>
+        </div>
+      </div>
+      {withoutImage ? null : (
+        <div
+          className={styles.errorImage}
+          style={{ backgroundImage: `url(${imageMap.get(status)})` }}
+        />
+      )}
+    </div>
+  );
+};
+
+export function ContactUS() {
+  return (
+    <Trans>
+      If you are still experiencing this issue, please{' '}
+      <a
+        style={{ color: 'var(--affine-primary-color)' }}
+        href="https://community.affine.pro"
+        target="__blank"
+      >
+        contact us through the community.
+      </a>
+    </Trans>
+  );
+}

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/fallback-creator.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+
+export interface FallbackProps<T extends Error = Error> {
+  error: T;
+  resetError: () => void;
+}
+
+export const ERROR_REFLECT_KEY = Symbol('ERROR_REFLECT_KEY');
+
+export function createErrorFallback<T extends Error>(
+  ErrorConstructor: abstract new (...args: any[]) => T,
+  Component: FC<FallbackProps<T>>
+): FC<FallbackProps<T>> {
+  Reflect.set(Component, ERROR_REFLECT_KEY, ErrorConstructor);
+  return Component;
+}

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx

@@ -0,0 +1,31 @@
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import {
+  currentPageIdAtom,
+  currentWorkspaceIdAtom,
+} from '@toeverything/infra/atom';
+import { useAtomValue } from 'jotai/react';
+import { useEffect } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+
+export interface DumpInfoProps {
+  error: any;
+}
+
+export const DumpInfo = (_props: DumpInfoProps) => {
+  const location = useLocation();
+  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
+  const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
+  const currentPageId = useAtomValue(currentPageIdAtom);
+  const path = location.pathname;
+  const query = useParams();
+  useEffect(() => {
+    console.info('DumpInfo', {
+      path,
+      query,
+      currentWorkspaceId,
+      currentPageId,
+      metadata,
+    });
+  }, [path, query, currentWorkspaceId, currentPageId, metadata]);
+  return null;
+};

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx

@@ -0,0 +1,26 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { type FC, useCallback } from 'react';
+
+import { ErrorDetail } from '../error-basic/error-detail';
+import type { FallbackProps } from '../error-basic/fallback-creator';
+
+/**
+ * TODO: Support reload and retry two reset actions in page error and area error.
+ */
+export const AnyErrorFallback: FC<FallbackProps> = props => {
+  const { error } = props;
+  const t = useAFFiNEI18N();
+
+  const reloadPage = useCallback(() => {
+    document.location.reload();
+  }, []);
+
+  return (
+    <ErrorDetail
+      title={t['com.affine.error.unexpected-error.title']()}
+      resetError={reloadPage}
+      buttonText={t['com.affine.error.reload']()}
+      description={error.message ?? error.toString()}
+    />
+  );
+};

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx

@@ -0,0 +1,21 @@
+import { NoPageRootError } from '@affine/component/block-suite-editor';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+import { ContactUS, ErrorDetail } from '../error-basic/error-detail';
+import { createErrorFallback } from '../error-basic/fallback-creator';
+
+export const NoPageRootFallback = createErrorFallback(
+  NoPageRootError,
+  props => {
+    const { resetError } = props;
+    const t = useAFFiNEI18N();
+
+    return (
+      <ErrorDetail
+        title={t['com.affine.error.no-page-root.title']()}
+        description={<ContactUS />}
+        resetError={resetError}
+      />
+    );
+  }
+);

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx

@@ -0,0 +1,30 @@
+import { PageNotFoundError } from '@affine/env/constant';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useCallback } from 'react';
+
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '../../../../hooks/use-navigate-helper';
+import { ErrorDetail, ErrorStatus } from '../error-basic/error-detail';
+import { createErrorFallback } from '../error-basic/fallback-creator';
+
+export const PageNotFoundDetail = createErrorFallback(PageNotFoundError, () => {
+  const t = useAFFiNEI18N();
+  const { jumpToIndex } = useNavigateHelper();
+
+  const onBtnClick = useCallback(
+    () => jumpToIndex(RouteLogic.REPLACE),
+    [jumpToIndex]
+  );
+
+  return (
+    <ErrorDetail
+      title={t['com.affine.notFoundPage.title']()}
+      description={t['404.hint']()}
+      buttonText={t['404.back']()}
+      onButtonClick={onBtnClick}
+      status={ErrorStatus.NotFound}
+    />
+  );
+});

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx

@@ -0,0 +1,41 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useCallback, useMemo, useState } from 'react';
+
+import { RecoverableError } from '../../../../unexpected-application-state/errors';
+import { ContactUS, ErrorDetail } from '../error-basic/error-detail';
+import { createErrorFallback } from '../error-basic/fallback-creator';
+
+export const RecoverableErrorFallback = createErrorFallback(
+  RecoverableError,
+  props => {
+    const { error, resetError } = props;
+    const t = useAFFiNEI18N();
+    const [count, rerender] = useState(0);
+
+    const canRetry = error.canRetry();
+    const buttonDesc = useMemo(() => {
+      if (canRetry) {
+        return t['com.affine.error.refetch']();
+      }
+      return t['com.affine.error.reload']();
+    }, [canRetry, t]);
+    const onRetry = useCallback(async () => {
+      if (canRetry) {
+        rerender(count + 1);
+        await error.retry();
+      } else {
+        document.location.reload();
+      }
+    }, [error, count, canRetry]);
+
+    return (
+      <ErrorDetail
+        title={t['com.affine.error.unexpected-error.title']()}
+        resetError={resetError}
+        buttonText={buttonDesc}
+        onButtonClick={onRetry}
+        description={[error.message, <ContactUS key="contact-us" />]}
+      />
+    );
+  }
+);

packages/frontend/core/src/components/affine/affine-error-boundary/error-status.assets.svg

@@ -0,0 +1,25 @@
+<svg width="402" height="178" viewBox="0 0 402 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M93.7434 129.308H1L71.7965 15.1021V167.142" stroke="#121212" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" />
+  <ellipse cx="71.4426" cy="14.7483" rx="3.89381" ry="3.88938" fill="#121212" />
+  <ellipse cx="93.3894" cy="129.308" rx="3.89381" ry="3.88938" fill="#121212" />
+  <path d="M140.357 27.1235L264.717 151.342" stroke="#E3E2E4" />
+  <rect x="140.392" y="27.1582" width="124.291" height="124.149" stroke="#E3E2E4" />
+  <path d="M264.339 89.4652C264.895 85.8242 265.183 82.0954 265.183 78.2995C265.183 37.7024 232.235 4.79199 191.592 4.79199C150.948 4.79199 118 37.7024 118 78.2995C118 118.897 150.948 151.807 191.592 151.807C195.23 151.807 198.807 151.543 202.304 151.034" stroke="#E3E2E4" />
+  <path d="M202.304 150.964C205.949 151.519 209.682 151.807 213.483 151.807C254.126 151.807 287.074 118.897 287.074 78.2995C287.074 37.7024 254.126 4.79199 213.483 4.79199C172.839 4.79199 139.892 37.7024 139.892 78.2995C139.892 82.0955 140.18 85.8242 140.735 89.4652" stroke="#E3E2E4" />
+  <path d="M140.2 89.4652C139.69 92.9584 139.426 96.5312 139.426 100.166C139.426 140.763 172.374 173.673 213.017 173.673C253.66 173.673 286.608 140.763 286.608 100.166C286.608 59.5686 253.66 26.6582 213.017 26.6582C209.378 26.6582 205.801 26.922 202.304 27.4314" stroke="#E3E2E4" />
+  <path d="M202.304 27.4314C198.807 26.922 195.23 26.6582 191.592 26.6582C150.948 26.6582 118 59.5686 118 100.166C118 140.763 150.948 173.673 191.592 173.673C232.235 173.673 265.183 140.763 265.183 100.166C265.183 96.5312 264.919 92.9584 264.409 89.4652" stroke="#E3E2E4" />
+  <path d="M264.717 27.1235L140.357 151.342" stroke="#E3E2E4" />
+  <path d="M139.892 89.4653H264.717" stroke="#E3E2E4" />
+  <path d="M202.304 26.6582V151.807" stroke="#E3E2E4" />
+  <ellipse cx="264.717" cy="89.4651" rx="3.72614" ry="3.7219" fill="#121212" />
+  <ellipse cx="264.717" cy="27.1233" rx="3.72614" ry="3.7219" fill="#121212" />
+  <ellipse cx="264.717" cy="151.807" rx="3.72614" ry="3.7219" fill="#121212" />
+  <ellipse cx="140.357" cy="151.807" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="202.304" cy="89.4651" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="202.304" cy="27.1233" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="140.357" cy="89.4651" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="140.357" cy="27.1233" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="202.304" cy="151.807" rx="3.72613" ry="3.7219" fill="#121212" />
+  <path d="M401 127.187H308.257L379.053 12.9805V165.02" stroke="#121212" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" />
+  <ellipse cx="379.407" cy="127.187" rx="3.89381" ry="3.88938" fill="#121212" />
+</svg>

packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx

@@ -0,0 +1,34 @@
+import { ErrorBoundary } from '@sentry/react';
+import type { FC, PropsWithChildren } from 'react';
+import { useCallback } from 'react';
+
+import { AffineErrorFallback } from './affine-error-fallback';
+import { type FallbackProps } from './error-basic/fallback-creator';
+
+export { type FallbackProps } from './error-basic/fallback-creator';
+
+export interface AffineErrorBoundaryProps extends PropsWithChildren {
+  height?: number | string;
+}
+
+/**
+ * TODO: Unify with SWRErrorBoundary
+ */
+export const AffineErrorBoundary: FC<AffineErrorBoundaryProps> = props => {
+  const fallbackRender = useCallback(
+    (fallbackProps: FallbackProps) => {
+      return <AffineErrorFallback {...fallbackProps} height={props.height} />;
+    },
+    [props.height]
+  );
+
+  const onError = useCallback((error: Error, componentStack: string) => {
+    console.error('Uncaught error:', error, componentStack);
+  }, []);
+
+  return (
+    <ErrorBoundary fallback={fallbackRender} onError={onError}>
+      {props.children}
+    </ErrorBoundary>
+  );
+};

packages/frontend/core/src/components/affine/any-error-boundary/index.tsx

@@ -1,11 +0,0 @@
-import type { ReactElement } from 'react';
-import type { FallbackProps } from 'react-error-boundary';
-
-export const AnyErrorBoundary = (props: FallbackProps): ReactElement => {
-  return (
-    <div>
-      <p>Something went wrong:</p>
-      <p>{props.error.toString()}</p>
-    </div>
-  );
-};

packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx

@@ -29,7 +29,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 
 import { openSettingModalAtom } from '../../../atoms';
 import type { CheckedUser } from '../../../hooks/affine/use-current-user';
@@ -39,7 +38,7 @@ import { useMemberCount } from '../../../hooks/affine/use-member-count';
 import { type Member, useMembers } from '../../../hooks/affine/use-members';
 import { useRevokeMemberPermission } from '../../../hooks/affine/use-revoke-member-permission';
 import { useUserSubscription } from '../../../hooks/use-subscription';
-import { AnyErrorBoundary } from '../any-error-boundary';
+import { AffineErrorBoundary } from '../affine-error-boundary';
 import * as style from './style.css';
 import type { WorkspaceSettingDetailProps } from './types';
 
@@ -356,10 +355,10 @@ export const MembersPanel = (props: MembersPanelProps): ReactElement | null => {
     return <MembersPanelLocal />;
   }
   return (
-    <ErrorBoundary FallbackComponent={AnyErrorBoundary}>
+    <AffineErrorBoundary>
       <Suspense>
         <CloudWorkspaceMembersPanel {...props} />
       </Suspense>
-    </ErrorBoundary>
+    </AffineErrorBoundary>
   );
 };

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -140,7 +140,9 @@ export const AffineSharePage = (props: ShareMenuProps) => {
             lineHeight: '20px',
           }}
           value={
-            isSharedPage ? sharingUrl : `${runtimeConfig.serverUrlPrefix}/...`
+            isSharedPage
+              ? sharingUrl
+              : `${location.protocol}//${location.hostname}/...`
           }
           readOnly
         />

packages/frontend/core/src/components/affine/share-page-modal/share-menu/use-share-url.ts

@@ -19,8 +19,11 @@ export const generateUrl = ({
   // to generate a public url like https://affine.app/share/123/456
   // or https://affine.app/share/123/456?mode=edgeless
 
+  const { protocol, hostname, port } = window.location;
   const url = new URL(
-    `${runtimeConfig.serverUrlPrefix}/${urlType}/${workspaceId}/${pageId}`
+    `${protocol}//${hostname}${
+      port ? `:${port}` : ''
+    }/${urlType}/${workspaceId}/${pageId}`
   );
   return url.toString();
 };

packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts

@@ -19,6 +19,7 @@ export const upgradeTips = style({
   fontStyle: 'normal',
   fontWeight: '400',
   lineHeight: '20px',
+  textAlign: 'center',
 });
 
 const rotate = keyframes({

packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx

@@ -44,7 +44,7 @@ interface WorkspaceUpgradeProps {
 export const WorkspaceUpgrade = function WorkspaceUpgrade(
   props: WorkspaceUpgradeProps
 ) {
-  const [upgradeState, , upgradeWorkspace, newWorkspaceId] =
+  const [upgradeState, error, upgradeWorkspace, newWorkspaceId] =
     useUpgradeWorkspace(props.migration);
   const t = useAFFiNEI18N();
 
@@ -75,7 +75,7 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade(
       <div className={styles.upgradeBox}>
         <AffineShapeIcon width={180} height={180} />
         <p className={styles.upgradeTips}>
-          {t[UPGRADE_TIPS_KEYS[upgradeState]]()}
+          {error ? error.message : t[UPGRADE_TIPS_KEYS[upgradeState]]()}
         </p>
         <Button
           data-testid="upgrade-workspace-button"

packages/frontend/core/src/pages/workspace/detail-page.tsx

@@ -110,7 +110,6 @@ export const DetailPage = (): ReactElement => {
   const currentSyncEngineStatus = useCurrentSyncEngineStatus();
   const currentPageId = useAtomValue(currentPageIdAtom);
   const [page, setPage] = useState<Page | null>(null);
-  const [pageLoaded, setPageLoaded] = useState<boolean>(false);
 
   // load page by current page id
   useEffect(() => {
@@ -155,30 +154,7 @@ export const DetailPage = (): ReactElement => {
     return;
   }, [currentSyncEngineStatus, navigate, page]);
 
-  // wait for page to be loaded
-  useEffect(() => {
-    if (page) {
-      if (!page.isEmpty) {
-        setPageLoaded(true);
-      } else {
-        setPageLoaded(false);
-        // call waitForLoaded to trigger load
-        page
-          .load(() => {})
-          .catch(() => {
-            // do nothing
-          });
-        return page.slots.ready.on(() => {
-          setPageLoaded(true);
-        }).dispose;
-      }
-    } else {
-      setPageLoaded(false);
-    }
-    return;
-  }, [page]);
-
-  if (!currentPageId || !page || !pageLoaded) {
+  if (!currentPageId || !page) {
     return <PageDetailSkeleton key="current-page-is-null" />;
   }
 
@@ -215,8 +191,9 @@ export const Component = () => {
     }
   }, [params, setContentLayout, setCurrentPageId, setCurrentWorkspaceId]);
 
+  // Add a key to force rerender when page changed, to avoid error boundary persisting.
   return (
-    <AffineErrorBoundary>
+    <AffineErrorBoundary key={params.pageId}>
       <DetailPage />
     </AffineErrorBoundary>
   );

packages/frontend/core/src/pages/workspace/index.tsx

@@ -8,6 +8,7 @@ import {
 import type { MigrationPoint } from '@toeverything/infra/blocksuite';
 import {
   checkWorkspaceCompatibility,
+  fixWorkspaceVersion,
   guidCompatibilityFix,
 } from '@toeverything/infra/blocksuite';
 import { useSetAtom } from 'jotai';
@@ -54,6 +55,7 @@ export const loader: LoaderFunction = async args => {
   workspaceLoaderLogger.info('workspace loaded');
 
   guidCompatibilityFix(workspace.doc);
+  fixWorkspaceVersion(workspace.doc);
   return checkWorkspaceCompatibility(workspace);
 };
 
@@ -73,7 +75,7 @@ export const Component = (): ReactElement => {
 
   const migration = useLoaderData() as MigrationPoint | undefined;
   return (
-    <AffineErrorBoundary height="100vh">
+    <AffineErrorBoundary key={params.workspaceId} height="100vh">
       <WorkspaceLayout migration={migration}>
         <Outlet />
       </WorkspaceLayout>

packages/frontend/core/src/router.ts

@@ -1,5 +1,6 @@
+import * as Sentry from '@sentry/react';
 import type { RouteObject } from 'react-router-dom';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter as reactRouterCreateBrowserRouter } from 'react-router-dom';
 
 export const routes = [
   {
@@ -70,6 +71,9 @@ export const routes = [
   },
 ] satisfies [RouteObject, ...RouteObject[]];
 
+const createBrowserRouter = Sentry.wrapCreateBrowserRouter(
+  reactRouterCreateBrowserRouter
+);
 export const router = createBrowserRouter(routes, {
   future: {
     v7_normalizeFormMethod: true,

packages/frontend/core/src/unexpected-application-state/errors.ts

@@ -5,7 +5,7 @@ export abstract class RecoverableError extends Error {
     return this.ttl > 0;
   }
 
-  abstract retry(): void;
+  abstract retry(): void | Promise<void>;
 }
 
 // the first session request failed after login or signup succeed.
@@ -24,8 +24,6 @@ export class SessionFetchErrorRightAfterLoginOrSignUp extends RecoverableError {
     }
     try {
       this.onRetry();
-    } catch (e) {
-      console.error('Retry error', e);
     } finally {
       this.ttl--;
     }

packages/frontend/electron/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine/electron",
   "private": true,
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "author": "toeverything",
   "repository": {
     "url": "https://github.com/toeverything/AFFiNE",

packages/frontend/graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affine/graphql",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "description": "Autogenerated GraphQL client for affine.pro",
   "license": "MIT",
   "type": "module",

packages/frontend/hooks/package.json

@@ -62,5 +62,5 @@
       "optional": true
     }
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/frontend/i18n/package.json

@@ -36,5 +36,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/frontend/i18n/src/resources/en.json

@@ -676,7 +676,7 @@
   "com.affine.new_edgeless": "New Edgeless",
   "com.affine.new_import": "Import",
   "com.affine.notFoundPage.backButton": "Back Home",
-  "com.affine.notFoundPage.title": "404 - Page Not Found",
+  "com.affine.notFoundPage.title": "Page Not Found",
   "com.affine.onboarding.title1": "Hyper merged whiteboard and docs",
   "com.affine.onboarding.title2": "Intuitive & robust block-based editing",
   "com.affine.onboarding.videoDescription1": "Easily switch between Page mode for structured document creation and Whiteboard mode for the freeform visual expression of creative ideas.",
@@ -950,6 +950,13 @@
   "com.affine.workspaceType.offline": "Available Offline",
   "com.affine.write_with_a_blank_page": "Write with a blank page",
   "com.affine.yesterday": "Yesterday",
+  "com.affine.error.retry": "Refresh",
+  "com.affine.error.refetch": "Refetch",
+  "com.affine.error.reload": "Reload",
+  "com.affine.error.page-not-found.title": "Refresh",
+  "com.affine.error.unexpected-error.title": "Something is wrong...",
+  "com.affine.error.contact.description": "If you are still experiencing this issue, please <1>contact us through the community.</1>",
+  "com.affine.error.no-page-root.title": "Page content is missing",
   "core": "core",
   "dark": "Dark",
   "emptyAllPages": "Click on the <1>$t(New Page)</1> button to create your first page.",

packages/frontend/native/package.json

@@ -58,5 +58,5 @@
     "test": "ava",
     "version": "napi version"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/frontend/templates/package.json

@@ -7,5 +7,5 @@
     "./v1/*.json": "./v1/*.json",
     "./preloading.json": "./preloading.json"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/frontend/workspace/package.json

@@ -48,5 +48,5 @@
     "vitest": "0.34.6",
     "ws": "^8.14.2"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/frontend/workspace/src/affine/download.ts

@@ -17,8 +17,7 @@ export async function downloadBinaryFromCloud(
     return cached;
   }
   const response = await fetchWithTraceReport(
-    runtimeConfig.serverUrlPrefix +
-      `/api/workspaces/${rootGuid}/docs/${pageGuid}`,
+    `/api/workspaces/${rootGuid}/docs/${pageGuid}`,
     {
       priority: 'high',
     }

packages/frontend/workspace/src/affine/gql.ts

@@ -19,9 +19,7 @@ import useSWRMutation from 'swr/mutation';
 
 setupGlobal();
 
-export const fetcher = gqlFetcherFactory(
-  runtimeConfig.serverUrlPrefix + '/graphql'
-);
+export const fetcher = gqlFetcherFactory('/graphql');
 
 /**
  * A `useSWR` wrapper for sending graphql queries

packages/frontend/workspace/src/blob/storage/affine-cloud.ts

@@ -20,15 +20,13 @@ export const createAffineCloudBlobStorage = (
         ? key
         : `/api/workspaces/${workspaceId}/blobs/${key}`;
 
-      return fetchWithTraceReport(runtimeConfig.serverUrlPrefix + suffix).then(
-        async res => {
-          if (!res.ok) {
-            // status not in the range 200-299
-            return undefined;
-          }
-          return await res.blob();
+      return fetchWithTraceReport(suffix).then(async res => {
+        if (!res.ok) {
+          // status not in the range 200-299
+          return undefined;
         }
-      );
+        return await res.blob();
+      });
     },
     set: async (key, value) => {
       const {

packages/frontend/workspace/src/providers/awareness/affine/index.ts

@@ -24,13 +24,13 @@ export function createAffineAwarenessProvider(
   const socket = getIoManager().socket('/');
 
   const awarenessBroadcast = ({
-    workspaceId,
+    workspaceId: remoteWorkspaceId,
     awarenessUpdate,
   }: {
     workspaceId: string;
     awarenessUpdate: string;
   }) => {
-    if (workspaceId !== workspaceId) {
+    if (remoteWorkspaceId !== workspaceId) {
       return;
     }
     applyAwarenessUpdate(

packages/frontend/workspace/src/providers/utils/affine-io.ts

@@ -7,9 +7,16 @@ export function getIoManager(): Manager {
   if (ioManager) {
     return ioManager;
   }
-  ioManager = new Manager(runtimeConfig.serverUrlPrefix + '/', {
-    autoConnect: false,
-    transports: ['websocket'],
-  });
+  const { protocol, hostname, port } = window.location;
+  ioManager = new Manager(
+    `${protocol === 'https:' ? 'wss' : 'ws'}://${hostname}${
+      port ? `:${port}` : ''
+    }/`,
+    {
+      autoConnect: false,
+      transports: ['websocket'],
+      secure: location.protocol === 'https:',
+    }
+  );
   return ioManager;
 }

packages/plugins/copilot/package.json

@@ -38,5 +38,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

packages/plugins/hello-world/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "description": "Hello world plugin",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "scripts": {
     "dev": "af dev",
     "build": "af build"

packages/plugins/image-preview/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@affine/image-preview-plugin",
   "type": "module",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "description": "Image preview plugin",
   "affinePlugin": {
     "release": true,

packages/plugins/outline/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "description": "Outline plugin",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "scripts": {
     "dev": "af dev",
     "build": "af build"

packages/plugins/vue-hello-world/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "description": "Vue hello world plugin",
-  "version": "0.10.3-beta.2",
+  "version": "0.10.3",
   "scripts": {
     "dev": "af dev",
     "build": "af build"

tests/affine-cloud/package.json

@@ -9,5 +9,5 @@
     "@affine-test/kit": "workspace:*",
     "@playwright/test": "^1.39.0"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-desktop-cloud/package.json

@@ -11,5 +11,5 @@
     "@types/fs-extra": "^11.0.2",
     "fs-extra": "^11.1.1"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-desktop/package.json

@@ -12,5 +12,5 @@
     "fs-extra": "^11.1.1",
     "playwright": "^1.39.0"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-legacy/0.6.1-beta.1/package.json

@@ -18,5 +18,5 @@
     "http-proxy-middleware": "^3.0.0-beta.1",
     "serve": "^14.2.1"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-legacy/0.7.0-canary.18/package.json

@@ -18,5 +18,5 @@
     "http-proxy-middleware": "^3.0.0-beta.1",
     "serve": "^14.2.1"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-legacy/0.8.0-canary.7/package.json

@@ -18,5 +18,5 @@
     "http-proxy-middleware": "^3.0.0-beta.1",
     "serve": "^14.2.1"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-legacy/0.8.4/package.json

@@ -18,5 +18,5 @@
     "http-proxy-middleware": "^3.0.0-beta.1",
     "serve": "^14.2.1"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-local/package.json

@@ -9,5 +9,5 @@
     "@affine-test/kit": "workspace:*",
     "@playwright/test": "^1.39.0"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-migration/package.json

@@ -13,5 +13,5 @@
     "@blocksuite/store": "0.0.0-20231122113751-6bf81eb3-nightly",
     "@playwright/test": "^1.39.0"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/affine-plugin/package.json

@@ -9,5 +9,5 @@
     "@affine-test/kit": "workspace:*",
     "@playwright/test": "^1.39.0"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }

tests/fixtures/package.json

@@ -3,5 +3,5 @@
   "exports": {
     "./*": "./*"
   },
-  "version": "0.10.3-beta.2"
+  "version": "0.10.3"
 }