proteum 2.1.0 → 2.1.2

package/client/services/router/components/router.tsx

@@ -28,6 +28,11 @@ export type TProps = { service?: ClientRouter; loaderComponent?: React.Component
 ----------------------------------*/
 
 const LogPrefix = `[router][component]`;
+const withProfiler = <T,>(callback: (runtime: (typeof import('@client/dev/profiler/runtime'))['profilerRuntime']) => T) => {
+    if (!__DEV__) return undefined as T | undefined;
+    const profilerModule = require('@client/dev/profiler/runtime') as typeof import('@client/dev/profiler/runtime');
+    return callback(profilerModule.profilerRuntime);
+};
 
 const PageLoading = ({
     clientRouter,
@@ -91,6 +96,12 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         }
 
         // Set loading state
+        const sessionId = withProfiler((runtime) =>
+            runtime.startNavigationSession({
+                path: request.path,
+                url: request.url,
+            }),
+        );
         clientRouter.runHook('page.change', request);
         window.scrollTo({ top: 0, behavior: 'smooth' });
         clientRouter.setLoading(true);
@@ -99,21 +110,25 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         // Unable to load (no connection, server error, ....)
         if (newpage === null) return;
 
-        return await changePage(newpage, data, request);
+        return await changePage(newpage, data, request, sessionId);
     };
 
-    async function changePage(newpage: Page, data?: {}, request?: ClientRequest) {
+    async function changePage(newpage: Page, data?: {}, request?: ClientRequest, sessionId?: string) {
         // Fetch API data to hydrate the page
         try {
             await newpage.preRender();
         } catch (error) {
             console.error(LogPrefix, 'Unable to fetch data:', error);
+            withProfiler((runtime) =>
+                runtime.failNavigation(error instanceof Error ? error.message : String(error), sessionId),
+            );
             clientRouter?.setLoading(false);
             return;
         }
 
         // Add additional data
         if (data) newpage.data = { ...newpage.data, ...data };
+        withProfiler((runtime) => runtime.startRenderStep(sessionId));
 
         // Add page container
         setCurrentPage((page) => {
@@ -172,6 +187,19 @@ export default ({ service: clientRouter, loaderComponent }: TProps) => {
         currentPage?.updateClient();
         // Scroll to the selected content via url hash
         restoreScroll(currentPage);
+        const routeLabel =
+            currentPage && 'path' in currentPage.route && currentPage.route.path
+                ? currentPage.route.path
+                : currentPage && 'code' in currentPage.route
+                  ? String(currentPage.route.code)
+                  : undefined;
+        withProfiler((runtime) =>
+            runtime.finishNavigation({
+                chunkId: currentPage?.chunkId,
+                routeLabel,
+                title: currentPage?.title,
+            }),
+        );
 
         // Hooks
         clientRouter.runHook('page.changed', (currentPage?.context.request || context.request) as ClientRequest);

package/client/services/router/index.tsx

@@ -21,7 +21,6 @@ import BaseRouter, {
     TErrorRoute,
     TRouteOptions,
     TRouteModule,
-    TDomainsList,
     matchRoute,
     buildUrl,
 } from '@common/router';
@@ -53,6 +52,11 @@ import appRoutes from '@generated/client/routes';
 const debug = false;
 const LogPrefix = '[router]';
 const browserWindow = window as Window & { routes?: TSsrUnresolvedRoute[]; ssr?: TBasicSSrData };
+const withProfiler = <T,>(callback: (runtime: (typeof import('@client/dev/profiler/runtime'))['profilerRuntime']) => T) => {
+    if (!__DEV__) return undefined as T | undefined;
+    const profilerModule = require('@client/dev/profiler/runtime') as typeof import('@client/dev/profiler/runtime');
+    return callback(profilerModule.profilerRuntime);
+};
 
 /*----------------------------------
 - TYPES
@@ -136,7 +140,7 @@ export default class ClientRouter<
     // Context data
     public ssrRoutes = browserWindow.routes || [];
     public ssrContext = browserWindow.ssr;
-    public domains: TDomainsList = browserWindow.ssr?.domains || ({ current: window.location.origin } as TDomainsList);
+    public currentDomain = browserWindow.ssr?.currentDomain || window.location.origin;
     public context!: TRouterContext<this, this['app']>;
 
     public setLoading!: React.Dispatch<React.SetStateAction<boolean>>;
@@ -153,7 +157,7 @@ export default class ClientRouter<
     }
 
     public url = (path: string, params: {} = {}, absolute: boolean = true) =>
-        buildUrl(path, params, this.domains, absolute);
+        buildUrl(path, params, this.currentDomain, absolute);
 
     public go(url: string | number, data: {} = {}, opt: { newTab?: boolean } = {}) {
         // Error code
@@ -321,12 +325,19 @@ export default class ClientRouter<
 
             // Create response
             debug && console.log(LogPrefix, 'Resolved request', request.path, '| Route:', route);
+            withProfiler((runtime) =>
+                runtime.completeResolveStep({
+                    chunkId: 'chunk' in route ? route.chunk : route.options.id,
+                    routeLabel: request.path,
+                }),
+            );
             const page = await this.createResponse(route, request);
 
             return page;
         }
 
         const notFoundRoute = this.errors[404];
+        withProfiler((runtime) => runtime.completeResolveStep({ routeLabel: '404' }));
         return await this.createResponse(notFoundRoute, request, { error: new Error('Page not found') });
     }
 
@@ -338,16 +349,21 @@ export default class ClientRouter<
         //throw new Error(`Failed to load route: ${route.chunk}`);
 
         debug && console.log(`Fetching route ${route.chunk} ...`, route);
+        const stepId = withProfiler((runtime) => runtime.startChunkStep(route.chunk));
         try {
             const loaded = await route.load();
             const fetched = loaded.__register(this.app);
 
             debug && console.log(`Route fetched: ${route.chunk}`, fetched);
+            withProfiler((runtime) => runtime.finishStep(stepId));
 
             if ('code' in route) return fetched as TClientPageErrorRoute<this>;
 
             return { ...(fetched as TClientPageRoute<this>), regex: route.regex, keys: route.keys };
         } catch (e) {
+            withProfiler((runtime) =>
+                runtime.finishStep(stepId, 'error', e instanceof Error ? e.message : String(e)),
+            );
             console.error(`Failed to fetch the route ${route.chunk}`, e);
             try {
                 this.app.handleUpdate();
@@ -368,6 +384,13 @@ export default class ClientRouter<
         if (!route) throw new Error(`Unable to resolve route.`);
 
         const request = new ClientRequest(location, this);
+        withProfiler((runtime) =>
+            runtime.ensureInitialSession({
+                path: request.path,
+                requestId: this.ssrContext?.request.id,
+                url: request.url,
+            }),
+        );
 
         // Restituate SSR response
         let apiData: {} = {};
@@ -385,6 +408,7 @@ export default class ClientRouter<
 
         ReactDOM.hydrate(<App context={response.context as AppPropsContext} />, document.body, () => {
             console.log(`Render complete`);
+            withProfiler((runtime) => runtime.markInitialHydrated({ chunkId: response.chunkId, title: response.title }));
 
             this.runHook('page.rendered', request);
         });

package/client/services/router/request/api.ts

@@ -24,6 +24,16 @@ import { toMultipart } from './multipart';
 ----------------------------------*/
 
 const debug = false;
+const getProfilerModule = () => {
+    if (!__DEV__) return undefined;
+    return require('@client/dev/profiler/runtime') as typeof import('@client/dev/profiler/runtime');
+};
+const withProfiler = <T>(callback: (runtime: (typeof import('@client/dev/profiler/runtime'))['profilerRuntime']) => T) => {
+    const profilerModule = getProfilerModule();
+    return profilerModule ? callback(profilerModule.profilerRuntime) : undefined;
+};
+
+type TExecuteResult<TData> = { data: TData; durationMs: number; response: Response };
 
 export type Config = {};
 
@@ -126,8 +136,54 @@ export default class ApiClient implements ApiClientService {
     ): Promise<TData> {
         /*if (options?.captcha !== undefined)
             await this.gui.captcha.check(options?.captcha);*/
+        const pendingTrace = withProfiler((runtime) =>
+            runtime.startTrace('async', {
+                label: `${method} ${path}`,
+                method,
+                path,
+            }),
+        );
+
+        try {
+            const result = await this.executeDetailed<TData>('client-async', method, path, data, options);
+            const profilerModule = getProfilerModule();
+            const traceRequestId = profilerModule?.readProfilerTraceRequestId(result.response);
+
+            if (pendingTrace && traceRequestId) {
+                await profilerModule?.profilerRuntime.attachTraceByRequestId(
+                    pendingTrace.sessionId,
+                    pendingTrace.traceId,
+                    traceRequestId,
+                );
+            } else if (pendingTrace) {
+                withProfiler((runtime) =>
+                    runtime.completeTrace(pendingTrace.traceId, {
+                        durationMs: result.durationMs,
+                        status: 'completed',
+                    }),
+                );
+            }
 
-        return await this.execute<TData>(method, path, data, options);
+            return result.data;
+        } catch (error) {
+            const profilerModule = getProfilerModule();
+            const errorResponse = (error as Error & { response?: Response }).response;
+            const traceRequestId = errorResponse ? profilerModule?.readProfilerTraceRequestId(errorResponse) : undefined;
+            if (pendingTrace && traceRequestId) {
+                await profilerModule?.profilerRuntime.attachTraceByRequestId(
+                    pendingTrace.sessionId,
+                    pendingTrace.traceId,
+                    traceRequestId,
+                );
+            }
+            withProfiler((runtime) =>
+                runtime.completeTrace(pendingTrace?.traceId, {
+                    errorMessage: error instanceof Error ? error.message : String(error),
+                    status: 'error',
+                }),
+            );
+            throw error;
+        }
     }
 
     public async fetchSync(fetchers: TFetcherList, alreadyLoadedData: {}): Promise<TObjetDonnees> {
@@ -145,23 +201,68 @@ export default class ApiClient implements ApiClientService {
         const fetchedData =
             fetchersCount === 0
                 ? {}
-                : await this.execute<TObjetDonnees>(
-                      'POST',
-                      '/api',
-                      ({ fetchers: fetchersToRun } as unknown) as TPostData,
-                  )
-                      .then((res: TObjetDonnees) => {
-                          const data: TObjetDonnees = {};
-                          for (const id in res) data[id] = res[id];
-
-                          return data;
-                      })
-                      .catch((e: Error) => {
+                : await (async () => {
+                      const pendingTrace = withProfiler((runtime) =>
+                          runtime.startTrace('navigation-data', {
+                              fetcherIds: Object.keys(fetchersToRun),
+                              label: 'Navigation data',
+                              method: 'POST',
+                              path: '/api',
+                          }),
+                      );
+
+                      try {
+                          const result = await this.executeDetailed<TObjetDonnees>(
+                              'client-navigation',
+                              'POST',
+                              '/api',
+                              ({ fetchers: fetchersToRun } as unknown) as TPostData,
+                          );
+                          const profilerModule = getProfilerModule();
+                          const traceRequestId = profilerModule?.readProfilerTraceRequestId(result.response);
+
+                          if (pendingTrace && traceRequestId) {
+                              await profilerModule?.profilerRuntime.attachTraceByRequestId(
+                                  pendingTrace.sessionId,
+                                  pendingTrace.traceId,
+                                  traceRequestId,
+                              );
+                          } else if (pendingTrace) {
+                              withProfiler((runtime) =>
+                                  runtime.completeTrace(pendingTrace.traceId, {
+                                      durationMs: result.durationMs,
+                                      status: 'completed',
+                                  }),
+                              );
+                          }
+
+                          const responseData: TObjetDonnees = {};
+                          for (const id in result.data) responseData[id] = result.data[id];
+                          return responseData;
+                      } catch (e) {
+                          const profilerModule = getProfilerModule();
+                          const errorResponse = (e as Error & { response?: Response }).response;
+                          const traceRequestId = errorResponse ? profilerModule?.readProfilerTraceRequestId(errorResponse) : undefined;
+                          if (pendingTrace && traceRequestId) {
+                              await profilerModule?.profilerRuntime.attachTraceByRequestId(
+                                  pendingTrace.sessionId,
+                                  pendingTrace.traceId,
+                                  traceRequestId,
+                              );
+                          }
+                          withProfiler((runtime) =>
+                              runtime.completeTrace(pendingTrace?.traceId, {
+                                  errorMessage: e instanceof Error ? e.message : String(e),
+                                  status: 'error',
+                              }),
+                          );
+
                           // API Error hook
-                          this.app.handleError(e);
+                          this.app.handleError(e as Error);
 
                           throw e;
-                      });
+                      }
+                  })();
 
         // Errors will be catched in the caller
 
@@ -214,21 +315,36 @@ export default class ApiClient implements ApiClientService {
     };
 
     public execute<TData = unknown>(...args: TFetcherArgs): Promise<TData> {
+        return this.executeDetailed<TData>('client-async', ...args).then((result) => result.data);
+    }
+
+    private async executeDetailed<TData = unknown>(
+        profilerOrigin: string,
+        ...args: TFetcherArgs
+    ): Promise<TExecuteResult<TData>> {
         const { url, config } = this.configure(...args);
+        const startedAt = Date.now();
+        const headers = config.headers instanceof Headers ? config.headers : new Headers(config.headers as HeadersInit);
+        const profilerHeaders = withProfiler((runtime) => runtime.getRequestHeaders(profilerOrigin)) || {};
+        for (const [key, value] of Object.entries(profilerHeaders)) headers.set(key, value);
+        config.headers = headers;
 
         console.log(`[api] Fetching`, url, config);
 
         return fetch(url, config)
             .then(async (response) => {
+                const requestDurationMs = Math.max(0, Date.now() - startedAt);
                 if (!response.ok) {
                     const errorData = await response.json();
                     console.warn(`[api] Failure:`, response.status, errorData);
-                    const error = errorFromJson(errorData);
+                    const error = errorFromJson(errorData) as Error & { durationMs?: number; response?: Response };
+                    error.durationMs = requestDurationMs;
+                    error.response = response;
                     throw error;
                 }
                 const json = (await response.json()) as TData;
                 debug && console.log(`[api] Success:`, json);
-                return json;
+                return { data: json, durationMs: requestDurationMs, response };
             })
             .catch((error) => {
                 if (error instanceof TypeError) {

package/commands/proteum/diagnostics.ts

@@ -0,0 +1,11 @@
+import { Commands } from '@server/app/commands';
+
+export default class ProteumDiagnosticsCommands extends Commands {
+    public async ping() {
+        return {
+            app: this.app.identity.identifier,
+            envProfile: this.app.env.profile,
+            services: Object.keys(this.app.getRootServices()),
+        };
+    }
+}

package/common/dev/commands.ts

@@ -0,0 +1,50 @@
+import type { TTraceSummaryValue } from './requestTrace';
+
+export type TDevCommandScope = 'app' | 'framework';
+export type TDevCommandSourceLocation = { line: number; column: number };
+export type TDevCommandExecutionStatus = 'completed' | 'error';
+
+export type TDevCommandDefinition = {
+    path: string;
+    className: string;
+    methodName: string;
+    importPath: string;
+    filepath: string;
+    sourceLocation: TDevCommandSourceLocation;
+    scope: TDevCommandScope;
+};
+
+export type TDevCommandSerializedResult = {
+    json?: unknown;
+    summary: TTraceSummaryValue;
+};
+
+export type TDevCommandExecution = {
+    command: TDevCommandDefinition;
+    startedAt: string;
+    finishedAt: string;
+    durationMs: number;
+    status: TDevCommandExecutionStatus;
+    result?: TDevCommandSerializedResult;
+    errorMessage?: string;
+};
+
+export type TDevCommandListResponse = {
+    commands: TDevCommandDefinition[];
+};
+
+export type TDevCommandRunResponse = {
+    execution: TDevCommandExecution;
+};
+
+export type TDevCommandErrorResponse = {
+    error: string;
+    execution?: TDevCommandExecution;
+};
+
+export const normalizeDevCommandPath = (value: string) =>
+    value
+        .trim()
+        .replace(/^\/+/, '')
+        .replace(/\/+$/, '')
+        .replace(/\/{2,}/g, '/');