咨询WebGL页面崩溃的捕获事件：Three.js应用相关问题

嘿，针对你开发的Three.js/WebGL应用偶尔崩溃的问题，你目前用的window.onerror是基础操作，但针对WebGL和Three.js的场景，确实有不少更精准的捕获方式，分两个层面给你梳理：

一、原生JS/WebGL层面的专属事件 #

WebGL应用崩溃很多时候和上下文丢失直接相关，这时候原生提供了专门的事件来处理：

• WebGL上下文丢失/恢复事件：这是WebGL应用崩溃的高频诱因（比如浏览器资源回收、显卡驱动异常、切换浏览器标签页过久），可以直接监听WebGL上下文的状态：

  const renderer = new THREE.WebGLRenderer();
  const gl = renderer.getContext();
  
  // 监听上下文丢失，阻止默认销毁行为以便尝试恢复
  gl.addEventListener('webglcontextlost', (event) => {
    event.preventDefault();
    console.error('⚠️ WebGL上下文丢失:', event);
    // 这里可以做状态保存、给用户显示提示等操作
  });
  
  // 监听上下文恢复，重新初始化资源
  gl.addEventListener('webglcontextrestored', () => {
    console.log('✅ WebGL上下文已恢复');
    // 需要重新加载场景、材质、纹理等所有WebGL资源
  });
  

• 未捕获Promise错误监听：如果你的应用里用了异步加载（比如模型、纹理），未处理的Promise拒绝会导致静默崩溃，这个事件能帮你抓出来：

  window.addEventListener('unhandledrejection', (event) => {
    console.error('❌ 未处理的Promise拒绝:', event.reason);
    event.preventDefault(); // 避免浏览器抛出默认的控制台错误
  });
  

• 全局资源加载错误监听：window.addEventListener('error')比window.onerror能捕获更多细节，比如纹理、Shader加载失败这类容易导致崩溃的资源错误：

  window.addEventListener('error', (event) => {
    console.error('🌐 全局错误捕获:', event.error, `文件: ${event.filename} 行号: ${event.lineno}`);
    // 可以根据错误信息判断是否为WebGL相关错误
    if (event.message.includes('WebGL') || event.message.includes('THREE')) {
      // 做针对性的处理
    }
  });
  

二、Three.js自身的错误处理机制 #

Three.js本身也提供了不少内置的错误回调，能更精准地捕获渲染和加载过程中的问题：

• Renderer专属错误回调：WebGLRenderer允许你设置onError回调，专门捕获渲染阶段的WebGL错误：

  const renderer = new THREE.WebGLRenderer();
  renderer.onError = (error) => {
    console.error('🎨 Three.js渲染错误:', error);
    // 这里可以尝试重启渲染循环，或者给用户显示降级提示
  };
  

• 加载器的错误回调：所有Three.js加载器（GLTFLoader、TextureLoader、ShaderLoader等）都自带错误回调，这是捕获资源加载失败（常见崩溃原因）的关键：

  const gltfLoader = new THREE.GLTFLoader();
  gltfLoader.load(
    './models/character.gltf',
    (gltf) => { /* 加载成功后的逻辑 */ },
    (progress) => { /* 加载进度更新 */ },
    (error) => {
      console.error('📦 模型加载失败:', error);
      // 提示用户加载失败，或者切换备用模型
    }
  );
  

• 全局捕获Three.js内部错误：如果你想统一监控Three.js的所有内部错误，可以临时重写console.error来过滤和记录：

  const originalConsoleError = console.error;
  console.error = (...args) => {
    // 判断是否为Three.js相关错误
    if (args.some(arg => typeof arg === 'string' && arg.includes('THREE.'))) {
      console.log('🔍 捕获到Three.js内部错误:', args);
      // 这里可以把错误信息上报到你的日志系统
    }
    // 保留原有的控制台输出
    originalConsoleError(...args);
  };
  

把这些方法结合起来，你就能构建一个覆盖全局、WebGL上下文、Three.js渲染和资源加载的完整错误监控体系，方便你定位具体的崩溃场景。

内容的提问来源于stack exchange，提问作者Marko