Next.js next/script组件onError事件如何获取真实错误对象

next/script的onError本质是绑定了原生script标签的error事件，这个事件的回调参数本身就是Event对象，官方文档的类型标注可能做了简化，导致实际拿到的和文档描述不符。以下是几种获取真实错误信息的方法：

• 从Event对象提取内置Error属性
  部分浏览器会在Event对象上挂载error属性，直接指向真实的Error实例，可以这样获取：

  import Script from 'next/script'
  
  export default function Page() {
    const handleError = (event) => {
      const realError = event.error || new Error(`脚本加载失败: ${event.target.src}`);
      console.log(realError.message);
    }
  
    return (
      <Script
        src="https://js.recurly.com/v4/recurly.js"
        onError={handleError}
      />
    )
  }
  

• 用try/catch捕获库初始化错误
  如果需要初始化第三方库，把初始化逻辑放在onLoad回调里，用try/catch包裹，能捕获加载完成后的执行错误：

  import Script from 'next/script'
  
  export default function Page() {
    const handleLoad = () => {
      try {
        const recurly = window.recurly;
        recurly.configure({ publicKey: '你的公钥' });
      } catch (error) {
        console.log('初始化错误:', error.message);
      }
    }
  
    const handleError = (event) => {
      const loadError = new Error(`加载失败: ${event.target.src}`);
      console.log(loadError.message);
    }
  
    return (
      <Script
        src="https://js.recurly.com/v4/recurly.js"
        onLoad={handleLoad}
        onError={handleError}
      />
    )
  }
  

• 手动创建script标签（绕过next/script封装）
  要是上面的方法都不满足，可以手动创建script标签，自定义错误处理逻辑，灵活性更高：

  import { useEffect } from 'react'
  
  export default function Page() {
    useEffect(() => {
      const script = document.createElement('script');
      script.src = 'https://js.recurly.com/v4/recurly.js';
      script.async = true;
  
      script.onerror = (event) => {
        const error = new Error(`脚本加载失败: ${event.target.src}`);
        console.log(error.message);
      };
  
      script.onload = () => {
        try {
          const recurly = window.recurly;
          recurly.configure({ publicKey: '你的公钥' });
        } catch (error) {
          console.log('初始化错误:', error.message);
        }
      };
  
      document.body.appendChild(script);
  
      return () => document.body.removeChild(script);
    }, []);
  
    return <div>页面内容</div>
  }
  

注意：不同浏览器对script错误事件的实现有差异，有些不会直接暴露Error对象，这时候只能基于事件里的脚本URL等信息构建自定义Error；而库的初始化错误必须通过try/catch捕获，因为这属于脚本加载完成后的执行阶段错误。

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