@coze-arch/cli 0.0.6 → 0.0.7-alpha.196f15

package/lib/__templates__/taro/src/presets/h5-error-boundary.tsx

@@ -0,0 +1,391 @@
+import { View } from '@tarojs/components';
+import { Component, PropsWithChildren, useSyncExternalStore } from 'react';
+import { CircleAlert, Copy, RefreshCw, X } from 'lucide-react-taro';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Portal } from '@/components/ui/portal';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { toast } from '@/components/ui/toast';
+import { cn } from '@/lib/utils';
+import { IS_H5_ENV } from './env';
+
+type ErrorState = {
+  error: Error | null;
+};
+
+type ErrorBoundaryProps = PropsWithChildren;
+
+type ErrorReportOptions = {
+  componentStack?: string;
+  source?: string;
+};
+
+type OverlayStore = {
+  error: Error | null;
+  report: string;
+  source: string;
+  visible: boolean;
+  open: boolean;
+  timestamp: string;
+};
+
+const EMPTY_STORE: OverlayStore = {
+  error: null,
+  report: '',
+  source: '',
+  visible: false,
+  open: false,
+  timestamp: '',
+};
+
+const ERROR_ACCENT_COLOR = 'hsl(360, 100%, 45%)';
+
+let handlersInstalled = false;
+let overlayStore: OverlayStore = EMPTY_STORE;
+const listeners = new Set<() => void>();
+
+const emitChange = () => {
+  listeners.forEach(listener => listener());
+};
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+const getSnapshot = () => overlayStore;
+
+const setOverlayStore = (nextStore: OverlayStore) => {
+  overlayStore = nextStore;
+  emitChange();
+};
+
+const copyText = async (text: string) => {
+  if (typeof window === 'undefined') return false;
+
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch (error) {
+    console.warn('[H5ErrorBoundary] Clipboard API copy failed:', error);
+  }
+
+  try {
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', 'true');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    const copied = document.execCommand('copy');
+    document.body.removeChild(textarea);
+    return copied;
+  } catch (error) {
+    console.warn('[H5ErrorBoundary] Fallback copy failed:', error);
+    return false;
+  }
+};
+
+const normalizeError = (value: unknown) => {
+  if (value instanceof Error) {
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    return new Error(value);
+  }
+
+  try {
+    return new Error(JSON.stringify(value));
+  } catch {
+    return new Error(String(value));
+  }
+};
+
+const buildErrorReport = (error: Error, options: ErrorReportOptions = {}) => {
+  const lines = [
+    '[H5 Runtime Error]',
+    `Time: ${new Date().toISOString()}`,
+    options.source ? `Source: ${options.source}` : '',
+    `Name: ${error.name}`,
+    `Message: ${error.message}`,
+    error.stack ? `Stack:\n${error.stack}` : '',
+    options.componentStack ? `Component Stack:\n${options.componentStack}` : '',
+    typeof navigator !== 'undefined'
+      ? `User Agent: ${navigator.userAgent}`
+      : '',
+  ].filter(Boolean);
+
+  return lines.join('\n\n');
+};
+
+const setPanelOpen = (open: boolean) => {
+  if (!overlayStore.visible) return;
+
+  setOverlayStore({
+    ...overlayStore,
+    open,
+  });
+};
+
+export const showH5ErrorOverlay = (
+  input: unknown,
+  options: ErrorReportOptions = {},
+) => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const error = normalizeError(input);
+  const report = buildErrorReport(error, options);
+  const timestamp = new Date().toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+
+  setOverlayStore({
+    error,
+    report,
+    source: options.source || 'runtime',
+    timestamp,
+    visible: true,
+    open: false,
+  });
+
+  console.error('[H5ErrorOverlay] Showing error overlay:', error, options);
+};
+
+const handleWindowError = (event: ErrorEvent) => {
+  const error =
+    event.error || new Error(event.message || 'Unknown H5 runtime error');
+  showH5ErrorOverlay(error, { source: 'window.error' });
+};
+
+const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+  showH5ErrorOverlay(event.reason, { source: 'window.unhandledrejection' });
+};
+
+export const initializeH5ErrorHandling = () => {
+  if (!IS_H5_ENV || typeof window === 'undefined' || handlersInstalled) {
+    return;
+  }
+
+  handlersInstalled = true;
+  window.addEventListener('error', handleWindowError);
+  window.addEventListener('unhandledrejection', handleUnhandledRejection);
+};
+
+const H5ErrorOverlayHost = () => {
+  const store = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  if (!IS_H5_ENV || !store.visible) {
+    return null;
+  }
+
+  const errorName = store.error?.name || 'Error';
+
+  return (
+    <Portal>
+      <View className="pointer-events-none fixed inset-0 z-[2147483646]">
+        <View className="pointer-events-auto fixed bottom-5 left-5">
+          <Button
+            variant="outline"
+            size="icon"
+            className={cn(
+              'h-11 w-11 rounded-full shadow-md transition-transform',
+            )}
+            style={{
+              backgroundColor: 'hsl(359, 100%, 97%)',
+              borderColor: 'hsl(359, 100%, 94%)',
+              color: ERROR_ACCENT_COLOR,
+            }}
+            onClick={() => setPanelOpen(!store.open)}
+          >
+            <CircleAlert size={22} color={ERROR_ACCENT_COLOR} />
+          </Button>
+        </View>
+
+        {store.open && (
+          <View className="pointer-events-none fixed inset-0 bg-white bg-opacity-15 supports-[backdrop-filter]:backdrop-blur-md">
+            <View className="absolute inset-0 flex items-center justify-center px-4 py-4">
+              <View
+                className="w-full max-w-md"
+                style={{
+                  width:
+                    'min(calc(100vw - 32px), var(--h5-phone-width, 390px))',
+                  height: 'min(calc(100vh - 32px), 900px)',
+                }}
+              >
+                <Card
+                  className={cn(
+                    'pointer-events-auto h-full rounded-2xl border border-border bg-background text-foreground shadow-2xl',
+                  )}
+                >
+                  <View className="relative flex h-full flex-col">
+                    <CardHeader className="gap-2 p-4 pb-2">
+                      <View className="flex items-start justify-between gap-3">
+                        <View className="flex flex-wrap items-center gap-2">
+                          <Badge
+                            variant="destructive"
+                            className="border-none bg-red-500 px-3 py-1 text-xs font-medium text-white"
+                          >
+                            Runtime Error
+                          </Badge>
+                          <Badge
+                            variant="outline"
+                            className="px-3 py-1 text-xs"
+                          >
+                            {store.source}
+                          </Badge>
+                        </View>
+
+                        <View className="flex shrink-0 items-center gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 rounded-full"
+                            onClick={() => window.location.reload()}
+                          >
+                            <RefreshCw size={15} color="inherit" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 rounded-full"
+                            onClick={() => setPanelOpen(false)}
+                          >
+                            <X size={17} color="inherit" />
+                          </Button>
+                        </View>
+                      </View>
+
+                      <View className="flex items-center justify-between gap-3">
+                        <CardTitle className="text-left text-lg">
+                          {errorName}
+                        </CardTitle>
+
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="shrink-0 rounded-lg"
+                          onClick={async () => {
+                            const copied = await copyText(store.report);
+                            if (copied) {
+                              toast.success('已复制错误信息', {
+                                description: '可发送给 Agent 进行自动修复',
+                                position: 'top-center',
+                              });
+                              return;
+                            }
+
+                            toast.warning('复制失败', {
+                              description: '请直接选中文本后手动复制。',
+                              position: 'top-center',
+                            });
+                          }}
+                        >
+                          <Copy size={15} color="inherit" />
+                          <View>复制错误</View>
+                        </Button>
+                      </View>
+                    </CardHeader>
+
+                    <CardContent className="min-h-0 flex-1 overflow-hidden px-4 pb-4 pt-2">
+                      <View className="flex h-full min-h-0 flex-col gap-2">
+                        <View className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-border px-3 py-2 text-sm">
+                          <View className="flex items-center gap-2">
+                            <View className="text-muted-foreground">Error</View>
+                            <View className="font-medium text-foreground">
+                              {store.error?.name || 'Error'}
+                            </View>
+                          </View>
+                          <View className="h-4 w-px bg-border" />
+                          <View className="flex items-center gap-2">
+                            <View className="text-muted-foreground">
+                              Source
+                            </View>
+                            <View className="font-medium text-foreground">
+                              {store.source}
+                            </View>
+                          </View>
+                        </View>
+
+                        <View className="min-h-0 flex flex-1 flex-col overflow-hidden rounded-xl border border-border bg-black text-white">
+                          <View className="flex items-center justify-between border-b border-white border-opacity-10 px-3 py-3">
+                            <View className="text-xs font-medium uppercase tracking-wide text-zinc-400">
+                              Full Report
+                            </View>
+                            <Badge
+                              variant="outline"
+                              className="border-zinc-700 bg-transparent px-2 py-1 text-xs text-zinc-400"
+                            >
+                              {store.timestamp}
+                            </Badge>
+                          </View>
+
+                          <ScrollArea
+                            className="min-h-0 flex-1 w-full"
+                            orientation="both"
+                          >
+                            <View className="inline-block min-w-full whitespace-pre px-3 py-3 pb-8 font-mono text-xs leading-6 text-zinc-200">
+                              {store.report}
+                            </View>
+                          </ScrollArea>
+                        </View>
+                      </View>
+                    </CardContent>
+                  </View>
+                </Card>
+              </View>
+            </View>
+          </View>
+        )}
+      </View>
+    </Portal>
+  );
+};
+
+class H5ErrorBoundaryInner extends Component<ErrorBoundaryProps, ErrorState> {
+  static getDerivedStateFromError(error: Error): Partial<ErrorState> {
+    return { error };
+  }
+
+  state: ErrorState = {
+    error: null,
+  };
+
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    if (this.state.error && prevProps.children !== this.props.children) {
+      this.setState({ error: null });
+    }
+  }
+
+  componentDidCatch(error: Error, info: { componentStack: string }) {
+    showH5ErrorOverlay(error, {
+      source: 'React Error Boundary',
+      componentStack: info.componentStack || '',
+    });
+  }
+
+  render() {
+    return (
+      <>
+        <H5ErrorOverlayHost />
+        {this.state.error ? null : this.props.children}
+      </>
+    );
+  }
+}
+
+export const H5ErrorBoundary = ({ children }: PropsWithChildren) => {
+  if (!IS_H5_ENV) {
+    return <>{children}</>;
+  }
+
+  return <H5ErrorBoundaryInner>{children}</H5ErrorBoundaryInner>;
+};

package/lib/__templates__/taro/src/presets/h5-navbar.tsx

@@ -2,6 +2,7 @@ import { View, Text } from '@tarojs/components';
 import Taro, { useDidShow, usePageScroll } from '@tarojs/taro';
 import { useState, useEffect, useCallback } from 'react';
 import { ChevronLeft, House } from 'lucide-react-taro';
+import { IS_H5_ENV } from './env';
 
 interface NavConfig {
   navigationBarTitleText?: string;
@@ -144,7 +145,7 @@ export const H5NavBar = () => {
   });
 
   useEffect(() => {
-    if (TARO_ENV !== 'h5') return;
+    if (!IS_H5_ENV) return;
 
     let timer: NodeJS.Timeout | null = null;
     const observer = new MutationObserver(() => {
@@ -169,10 +170,10 @@ export const H5NavBar = () => {
   }, [updateNavState]);
 
   const shouldRender =
-    TARO_ENV === 'h5' && navState.visible && navState.navStyle !== 'custom';
+    IS_H5_ENV && navState.visible && navState.navStyle !== 'custom';
 
   useEffect(() => {
-    if (TARO_ENV !== 'h5') return;
+    if (!IS_H5_ENV) return;
     if (shouldRender) {
       document.body.classList.add('h5-navbar-visible');
     } else {

package/lib/__templates__/taro/src/presets/h5-styles.ts

@@ -3,6 +3,8 @@
  * 如无必要，请勿修改本文件
  */
 
+import { IS_H5_ENV } from './env';
+
 const H5_BASE_STYLES = `
 /* H5 端隐藏 TabBar 空图标（只隐藏没有 src 的图标） */
 .weui-tabbar__icon:not([src]),
@@ -213,7 +215,7 @@ function setupTabbarDetection() {
 }
 
 export function injectH5Styles() {
-  if (TARO_ENV !== 'h5') return;
+  if (!IS_H5_ENV) return;
 
   injectStyles();
   setupTabbarDetection();

package/lib/__templates__/taro/src/presets/index.tsx

@@ -3,15 +3,28 @@ import { PropsWithChildren } from 'react';
 import { injectH5Styles } from './h5-styles';
 import { devDebug } from './dev-debug';
 import { H5Container } from './h5-container';
+import {
+  H5ErrorBoundary,
+  initializeH5ErrorHandling,
+} from './h5-error-boundary';
+import { IS_H5_ENV } from './env';
 
 export const Preset = ({ children }: PropsWithChildren) => {
+  if (IS_H5_ENV) {
+    initializeH5ErrorHandling();
+  }
+
   useLaunch(() => {
     devDebug();
     injectH5Styles();
   });
 
-  if (TARO_ENV === 'h5') {
-    return <H5Container>{children}</H5Container>;
+  if (IS_H5_ENV) {
+    return (
+      <H5ErrorBoundary>
+        <H5Container>{children}</H5Container>
+      </H5ErrorBoundary>
+    );
   }
 
   return <>{children}</>;

package/lib/__templates__/vite/scripts/build.sh

@@ -9,9 +9,9 @@ echo "Installing dependencies..."
 pnpm install --prefer-frozen-lockfile --prefer-offline --loglevel debug --reporter=append-only
 
 echo "Building frontend with Vite..."
-npx vite build
+pnpm vite build
 
 echo "Bundling server with tsup..."
-npx tsup server/server.ts --format cjs --platform node --target node20 --outDir dist-server --no-splitting --no-minify --external vite
+pnpm tsup server/server.ts --format cjs --platform node --target node20 --outDir dist-server --no-splitting --no-minify --external vite
 
 echo "Build completed successfully!"

package/lib/__templates__/vite/scripts/dev.sh

@@ -36,4 +36,4 @@ echo "Clearing port ${PORT} before start."
 kill_port_if_listening
 echo "Starting express + Vite dev server on port ${PORT}..."
 
-PORT=$PORT npx tsx watch server/server.ts
+PORT=$PORT pnpm tsx watch server/server.ts

package/lib/cli.js

@@ -2105,7 +2105,7 @@ const EventBuilder = {
 };
 
 var name = "@coze-arch/cli";
-var version = "0.0.6";
+var version = "0.0.7-alpha.196f15";
 var description = "coze coding devtools cli";
 var license = "MIT";
 var author = "fanwenjie.fe@bytedance.com";
@@ -2332,6 +2332,37 @@ const reportError = safeRun(
   },
 );
 
+/**
+ * 上报 pnpm install 执行情况
+ */
+const reportPnpmInstall = safeRun(
+  'reportPnpmInstall',
+  (params
+
+
+
+
+
+
+
+) => {
+    reporter.sendEvent(
+      'cli_pnpm_install',
+      {
+        duration: params.duration,
+        success: params.success ? 1 : 0,
+      },
+      {
+        template: params.template,
+        skipped: String(params.skipped),
+        hasPackageJson: String(params.hasPackageJson),
+        ...(params.errorCode && { errorCode: String(params.errorCode) }),
+        ...(params.errorType && { errorType: params.errorType }),
+      },
+    );
+  },
+);
+
 /**
  * 立即上报（在 CLI 退出前调用）
  * 等待 500ms 确保设置请求完成和事件发送
@@ -3684,6 +3715,8 @@ const executeRun = async (
   options = {},
 ) => {
   const cmdStartTime = Date.now();
+  let fixDuration = 0;
+  let buildStartTime = 0;
 
   try {
     logger.info(`Running ${commandName} command...`);
@@ -3694,15 +3727,20 @@ const executeRun = async (
     // 1. 对于 build 命令，先执行 fix 以确保项目配置正确
     if (['dev', 'build'].includes(commandName)) {
       logger.info('\n🔧 Running fix command before build...\n');
+      const fixStartTime = Date.now();
       try {
         await executeFix();
         // eslint-disable-next-line @coze-arch/no-empty-catch
       } catch (e) {
         // just ignore
       }
+      fixDuration = Date.now() - fixStartTime;
       logger.info('');
     }
 
+    // 记录实际 build/dev/start 开始时间
+    buildStartTime = Date.now();
+
     // 2. 加载 .coze 配置
     const config = await loadCozeConfig();
     const commandArgs = getCommandConfig(config, commandName);
@@ -3741,6 +3779,8 @@ const executeRun = async (
     childProcess.on('close', (code, signal) => {
       logStream.end();
 
+      const buildDuration = Date.now() - buildStartTime;
+
       if (code !== 0) {
         const errorMessage = `Command exited with code ${_nullishCoalesce$1(code, () => ( 'unknown'))}${signal ? ` and signal ${signal}` : ''}`;
         logger.error(errorMessage);
@@ -3757,6 +3797,12 @@ const executeRun = async (
           args: JSON.stringify(options),
           errorCode: _nullishCoalesce$1(code, () => ( 1)),
           errorMessage,
+          categories: {
+            fixDuration: String(fixDuration),
+            buildDuration: String(buildDuration),
+            exitCode: String(_nullishCoalesce$1(code, () => ( 'unknown'))),
+            ...(signal && { signal }),
+          },
         });
         flushSlardar()
           .then(() => {
@@ -3773,6 +3819,11 @@ const executeRun = async (
         // 上报命令成功
         reportCommandComplete(commandName, true, Date.now() - cmdStartTime, {
           args: JSON.stringify(options),
+          categories: {
+            fixDuration: String(fixDuration),
+            buildDuration: String(buildDuration),
+            exitCode: '0',
+          },
         });
         // flush 由 main 函数统一处理
       }
@@ -3786,6 +3837,8 @@ const executeRun = async (
       }
       logStream.end();
 
+      const buildDuration = Date.now() - buildStartTime;
+
       // 上报错误
       reportError(error, {
         command: commandName,
@@ -3795,6 +3848,11 @@ const executeRun = async (
         args: JSON.stringify(options),
         errorCode: 1,
         errorMessage: error.message,
+        categories: {
+          fixDuration: String(fixDuration),
+          buildDuration: String(buildDuration),
+          errorType: 'child_process_error',
+        },
       });
       flushSlardar()
         .then(() => {
@@ -3810,6 +3868,8 @@ const executeRun = async (
     logger.error(`Failed to run ${commandName} command:`);
     logger.error(err.message);
 
+    const buildDuration = buildStartTime > 0 ? Date.now() - buildStartTime : 0;
+
     // 上报错误
     reportError(err, {
       command: commandName,
@@ -3819,6 +3879,11 @@ const executeRun = async (
       args: JSON.stringify(options),
       errorCode: 1,
       errorMessage: err.message,
+      categories: {
+        fixDuration: String(fixDuration),
+        buildDuration: String(buildDuration),
+        errorType: 'execution_error',
+      },
     });
     flushSlardar()
       .then(() => {
@@ -4575,6 +4640,10 @@ const parseAndValidateParams = (
     'skip-git',
     'skipDev',
     'skip-dev',
+    'skipCommit',
+    'skip-commit',
+    'force',
+    'f',
   ]);
   const userParams = parsePassThroughParams(command, knownOptions);
 
@@ -4934,15 +5003,41 @@ const installDependenciesStep = ctx => {
 
   const { skipInstall } = ctx.options;
 
-  if (!skipInstall) {
-    if (ctx.hasPackageJson) {
-      runPnpmInstall(ctx.absoluteOutputPath);
-      ctx.timer.logPhase('Dependencies installation');
-    } else {
-      logger.info(
-        '\n💡 No package.json found, skipping dependency installation',
-      );
+  // 准备埋点数据
+  const installStartTime = Date.now();
+  let installSuccess = true;
+  let installErrorCode;
+  let installErrorType;
+
+  try {
+    if (!skipInstall) {
+      if (ctx.hasPackageJson) {
+        runPnpmInstall(ctx.absoluteOutputPath);
+        ctx.timer.logPhase('Dependencies installation');
+      } else {
+        logger.info(
+          '\n💡 No package.json found, skipping dependency installation',
+        );
+      }
     }
+  } catch (error) {
+    // 捕获 pnpm install 失败的情况
+    installSuccess = false;
+    installErrorCode = 1;
+    installErrorType = 'execution_failed';
+    throw error; // 继续抛出错误,保持原有流程
+  } finally {
+    // 无论成功失败都上报埋点
+    const installDuration = Date.now() - installStartTime;
+    reportPnpmInstall({
+      duration: installDuration,
+      success: installSuccess,
+      template: ctx.templateName,
+      skipped: !!skipInstall,
+      hasPackageJson: !!ctx.hasPackageJson,
+      errorCode: installErrorCode,
+      errorType: installErrorType,
+    });
   }
 };