JavaScript 错误 - Throw、Try 和 Catch

错误一定会发生

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

 

JavaScript 抛出错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

 

JavaScript 测试和捕捉

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

 

语法

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

 

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

 

实例

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

throw "empty"
throw "not a number"
throw "too high"
throw "too low"

onerror监听错误

我们不可能对所有的代码都使用try-catch来防止错误的出现，好在浏览器提供了onerror，可以用来全局监听所有的错误。

语法

?
1
window.onerror = function(message, source, lineno, colno, error) { ... }


函数参数：


    

  • message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
    • 

  • source：发生错误的脚本URL（字符串）
    • 

  • lineno：发生错误的行号（数字）
    • 

  • colno：发生错误的列号（数字）
    • 

  • error：Error对象（对象）
    • 



实例


<script>
window.onerror = function (msg, url, lineNo, columnNo, error) {
  var message = [
    'Message: ' + msg,
    'URL: ' + url,
    'Line: ' + lineNo,
    'Column: ' + columnNo,
    'Error object: ' + JSON.stringify(error)
    ].join(' - ');


  alert(message);


  return false;


};
function myFunction()
{
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
}
</script>


<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>


Fundebug JavaScript监控插件


Fundebug是前端JavaScript错误实时监控平台，经过大量兼容性调试，Fundebug的JavaScript监控插件已经能够在各种主流浏览器中自动捕获错误，并且可以获取最全面的错误信息，帮助开发者更快的Debug。


典型的，比如因为不同的平台报错信息不同，需要进行一个聚合。Fundebg的错误智能聚合技术可以将大量看似不同实则相同的错误很好的整合。


 


同样的代码产生的同一个错误，在不同浏览器上的报错信息是各不相同的。


name不同的错误可能是同一个错误：


例如SyntaxError与ReferenceError；message不同的错误可能是同一个错误，


例如can not find variable fundebug与fundebug is not defined。并且，同一个错误在不同浏览器下的lineNumber，columnNumber，stack，与url都有可能不同。


 


使用方法


一行代码接入插件：


<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="API-KEY"></script>


支持多种框架：AngularJS、Angular1、Angular2、Vue、React等等。


 






		

		
posted @ 
 
curationFE 
阅读(808) 
评论(0) 
编辑 
收藏 
举报


	

	
	








    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 后端思维之高并发处理方案
    

· 理解Rust引用及其生命周期标识（下）
    

· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
    

· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
    

· 软件产品开发中常见的10个问题及处理方法
    



    

    阅读排行：
    

 ·          2025成都.NET开发者Connect圆满结束
        

 ·          后端思维之高并发处理方案
        

 ·          千万级大表的优化技巧
        

 ·          在 VS Code 中，一键安装 MCP Server！
        

 ·          10年+ .NET Coder 心语 ── 继承的思维：从思维模式到架构设计的深度解析
        



    

    







	

	


	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示