Headless浏览器的隐形陷阱：为什么你的自动化工具抓不到页面早期错误？

1
2

# 从文件加载初始化脚本，在第一次导航前执行
agent-browser open --init-script ./error-capture.js http://localhost:5173

1
2
3
4
5

# 先启动浏览器，再添加初始化脚本，最后导航
agent-browser batch \
  '["open"]' \
  '["addinitscript", "window.__earlyErrors = []; window.onerror = (m,s,l,c,e) => __earlyErrors.push({type:\"sync_error\",message:m,source:s,line:l,column:c,stack:e?.stack,timestamp:new Date().toISOString()}); window.addEventListener(\"unhandledrejection\", e => {e.preventDefault(); __earlyErrors.push({type:\"unhandled_promise_rejection\",reason:e.reason?.message||String(e.reason),stack:e.reason?.stack,timestamp:new Date().toISOString()});});"]' \
  '["navigate", "http://localhost:5173"]'

1
2
3

# 对所有agent-browser命令生效，支持多个脚本用逗号分隔
export AGENT_BROWSER_INIT_SCRIPTS="./error-capture.js,./another-script.js"
agent-browser open http://localhost:5173

1
2
3
4
5

# 查看所有已添加的初始化脚本及其ID
agent-browser listinitscripts

# 移除指定ID的初始化脚本
agent-browser removeinitscript <identifier>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

// 保存为error-capture.js，放在项目根目录
window.__earlyErrors = window.__earlyErrors || [];

// 1. 捕获所有同步错误
window.onerror = function(message, source, lineno, colno, error) {
  window.__earlyErrors.push({
    type: 'sync_error',
    message: message,
    source: source,
    line: lineno,
    column: colno,
    stack: error?.stack || new Error(message).stack,
    timestamp: new Date().toISOString()
  });
  return false; // 让浏览器也能在控制台显示错误
};

// 2. 捕获所有未处理的Promise拒绝（现代框架最常见）
window.addEventListener('unhandledrejection', function(event) {
  event.preventDefault(); // 阻止浏览器默认的错误提示
  
  window.__earlyErrors.push({
    type: 'unhandled_promise_rejection',
    reason: event.reason?.message || String(event.reason),
    stack: event.reason?.stack || new Error(String(event.reason)).stack,
    timestamp: new Date().toISOString()
  });
});

// 3. 捕获所有console.error调用
const originalConsoleError = console.error;
console.error = function(...args) {
  window.__earlyErrors.push({
    type: 'console_error',
    args: args.map(arg => {
      try {
        return typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg);
      } catch (e) {
        return String(arg);
      }
    }),
    stack: new Error().stack,
    timestamp: new Date().toISOString()
  });
  
  originalConsoleError.apply(console, args);
};

// 4. 提供一个打印所有错误的工具函数
window.printEarlyErrors = function() {
  console.log('=== 捕获到的早期错误 ===');
  window.__earlyErrors.forEach((err, index) => {
    console.log(`\n错误 ${index + 1} (${err.type}):`);
    console.log(`时间: ${err.timestamp}`);
    console.log(`消息: ${err.message || err.reason}`);
    if (err.stack) {
      console.log(`堆栈:\n${err.stack}`);
    }
  });
  console.log('========================');
};

1
2
3
4
5

# 获取格式化的JSON错误列表
agent-browser eval "JSON.stringify(window.__earlyErrors, null, 2)"

# 或者直接打印到控制台
agent-browser eval "window.printEarlyErrors()"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

const { chromium } = require('playwright');

async function captureAllErrors(url) {
  const browser = await chromium.launch({ headless: 'new' });
  const context = await browser.newContext();
  
  const allErrors = [];
  
  // ✅ Playwright原生错误捕获（v1.40+ 已足够应对95%的情况）
  context.on('console', msg => {
    if (msg.type() === 'error') {
      allErrors.push({
        type: 'console_error',
        message: msg.text(),
        location: msg.location(),
        stack: msg.stackTrace(),
        timestamp: new Date().toISOString()
      });
    }
  });
  
  context.on('pageerror', error => {
    allErrors.push({
      type: 'page_error',
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString()
    });
  });
  
  // ⚠️ 仅针对极端早期错误的补充（如document.write中的错误）
  // 如果你发现原生事件确实错过了某些错误，再启用这部分
  await context.addInitScript(`
    window.__earlyErrors = [];
    
    window.onerror = function(message, source, lineno, colno, error) {
      window.__earlyErrors.push({
        type: 'extreme_early_sync_error',
        message: message,
        source: source,
        line: lineno,
        column: colno,
        stack: error?.stack || new Error(message).stack,
        timestamp: new Date().toISOString()
      });
      return false;
    };
    
    window.addEventListener('unhandledrejection', function(event) {
      event.preventDefault();
      window.__earlyErrors.push({
        type: 'extreme_early_promise_rejection',
        reason: event.reason?.message || String(event.reason),
        stack: event.reason?.stack || new Error(String(event.reason)).stack,
        timestamp: new Date().toISOString()
      });
    });
  `);
  
  const page = await context.newPage();
  
  try {
    await page.goto(url, { waitUntil: 'networkidle0' });
  } catch (e) {
    allErrors.push({
      type: 'navigation_error',
      message: e.message,
      stack: e.stack,
      timestamp: new Date().toISOString()
    });
  }
  
  // 获取极端早期错误（如果启用了addInitScript）
  const earlyErrors = await page.evaluate(() => window.__earlyErrors || []);
  
  await browser.close();
  
  // 合并所有错误并按时间排序
  return [...earlyErrors, ...allErrors].sort((a, b) => 
    new Date(a.timestamp) - new Date(b.timestamp)
  );
}

// 使用示例
captureAllErrors('http://localhost:5173').then(errors => {
  console.log('捕获到的所有错误：');
  console.log(JSON.stringify(errors, null, 2));
  
  if (errors.length > 0) {
    console.log(`\n总共发现 ${errors.length} 个错误`);
    process.exit(1);
  } else {
    console.log('\n没有发现任何错误');
    process.exit(0);
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

const puppeteer = require('puppeteer-core');

async function captureAllErrors(url) {
  const browser = await puppeteer.launch({
    headless: 'new',
    executablePath: '/usr/bin/google-chrome', // 根据你的系统调整
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();
  
  // ✅ 关键：在导航之前添加评估脚本
  await page.evaluateOnNewDocument(() => {
    window.__earlyErrors = [];
    
    window.onerror = function(message, source, lineno, colno, error) {
      window.__earlyErrors.push({
        type: 'sync_error',
        message: message,
        source: source,
        line: lineno,
        column: colno,
        stack: error?.stack || new Error(message).stack,
        timestamp: new Date().toISOString()
      });
      return false;
    };
    
    window.addEventListener('unhandledrejection', function(event) {
      event.preventDefault();
      window.__earlyErrors.push({
        type: 'unhandled_promise_rejection',
        reason: event.reason?.message || String(event.reason),
        stack: event.reason?.stack || new Error(String(event.reason)).stack,
        timestamp: new Date().toISOString()
      });
    });
  });
  
  // 同时使用CDP协议捕获所有错误（终极保障）
  const client = await page.createCDPSession();
  await client.send('Runtime.enable');
  
  const cdpErrors = [];
  
  client.on('Runtime.consoleAPICalled', event => {
    if (event.type === 'error') {
      cdpErrors.push({
        type: 'cdp_console_error',
        args: event.args.map(arg => arg.value || arg.description),
        stack: event.stackTrace?.callFrames || [],
        timestamp: new Date(event.timestamp).toISOString()
      });
    }
  });
  
  client.on('Runtime.exceptionThrown', event => {
    cdpErrors.push({
      type: 'cdp_exception',
      message: event.exceptionDetails.exception?.description || event.exceptionDetails.text,
      stack: event.exceptionDetails.stackTrace?.callFrames || [],
      timestamp: new Date().toISOString()
    });
  });
  
  client.on('Runtime.unhandledPromiseRejection', event => {
    cdpErrors.push({
      type: 'cdp_unhandled_rejection',
      reason: event.reason?.description || String(event.reason),
      timestamp: new Date().toISOString()
    });
  });

  try {
    await page.goto(url, { waitUntil: 'networkidle0' });
  } catch (e) {
    cdpErrors.push({
      type: 'navigation_error',
      message: e.message,
      stack: e.stack,
      timestamp: new Date().toISOString()
    });
  }
  
  // 获取早期错误
  const earlyErrors = await page.evaluate(() => window.__earlyErrors);
  
  await browser.close();
  
  // 合并所有错误
  return [...earlyErrors, ...cdpErrors];
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v126.runtime.Runtime;
import org.openqa.selenium.devtools.v126.runtime.model.ConsoleAPICalled;
import org.openqa.selenium.devtools.v126.runtime.model.ExceptionThrown;

import java.util.ArrayList;
import java.util.List;

public class ErrorCapture {
    public static void main(String[] args) {
        ChromeOptions options = new ChromeOptions();
        options.addArguments("--headless=new");
        
        ChromeDriver driver = new ChromeDriver(options);
        DevTools devTools = driver.getDevTools();
        devTools.createSession();
        
        // 启用Runtime域
        devTools.send(Runtime.enable());
        
        List<Object> allErrors = new ArrayList<>();
        
        // 捕获控制台错误
        devTools.addListener(Runtime.consoleAPICalled(), event -> {
            if (event.getType().equals(ConsoleAPICalled.Type.ERROR)) {
                System.out.println("Console error: " + event.getArgs());
                allErrors.add(event);
            }
        });
        
        // 捕获JavaScript异常
        devTools.addListener(Runtime.exceptionThrown(), event -> {
            ExceptionThrown.ExceptionDetails details = event.getExceptionDetails();
            System.out.println("Exception thrown: " + details.getException().get().getDescription());
            allErrors.add(event);
        });
        
        // 导航到页面
        driver.get("http://localhost:5173");
        
        driver.quit();
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 全局早期错误捕获器 - 必须放在所有其他脚本之前 -->
  <script>
    window.__earlyErrors = window.__earlyErrors || [];
    
    window.onerror = function(message, source, lineno, colno, error) {
      window.__earlyErrors.push({
        type: 'sync_error',
        message: message,
        source: source,
        line: lineno,
        column: colno,
        stack: error?.stack || new Error(message).stack,
        timestamp: new Date().toISOString()
      });
      return false;
    };
    
    window.addEventListener('unhandledrejection', function(event) {
      event.preventDefault();
      window.__earlyErrors.push({
        type: 'unhandled_promise_rejection',
        reason: event.reason?.message || String(event.reason),
        stack: event.reason?.stack || new Error(String(event.reason)).stack,
        timestamp: new Date().toISOString()
      });
    });
    
    const originalConsoleError = console.error;
    console.error = function(...args) {
      window.__earlyErrors.push({
        type: 'console_error',
        args: args.map(arg => {
          try {
            return typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg);
          } catch (e) {
            return String(arg);
          }
        }),
        stack: new Error().stack,
        timestamp: new Date().toISOString()
      });
      originalConsoleError.apply(console, args);
    };
  </script>

  <!-- 以下是原来的内容 -->
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- 框架注入的内容 -->
</head>
<body>
  <!-- 应用内容 -->
</body>
</html>

1
2
3
4

export function handleError({ error, event }) {
  console.error('SvelteKit全局错误:', error);
  // 上报到日志系统
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

'use client';

export default function GlobalError({ error, reset }) {
  console.error('Next.js全局错误:', error);
  // 上报到日志系统
  
  return (
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    console.error('Vue全局错误:', error, info);
    // 上报到日志系统
  };

  nuxtApp.hook('vue:error', (error, instance, info) => {
    console.error('Nuxt Vue错误:', error, info);
    // 上报到日志系统
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    console.error('React错误边界捕获到错误:', error, errorInfo);
    // 上报到日志系统
  }

  render() {
    return this.props.children;
  }
}

1
2
3
4
5
6

const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error('Vue全局错误:', err, info);
  // 上报到日志系统
};

1
2
3
4
5
6
7
8

# agent-browser
agent-browser run --headless=false http://localhost:5173

# Puppeteer
const browser = await puppeteer.launch({ headless: false });

# Playwright
const browser = await chromium.launch({ headless: false });

1
2
3
4
5

# 构建项目并检查警告和错误
npm run build

# 预览构建结果（这会暴露很多开发模式下看不到的问题）
npm run preview

1
2

# 启动Chrome时添加这些参数
chrome --headless=new --enable-logging --v=1 --log-level=0 http://localhost:5173