Javascript stacktrace

816 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
816
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 下一页是错误的概念
  • 下一页是错误的概念
  • 下一页,知道什么是错误以后那我们应该如何去捕获错误呢
  • 其实这里有坑,讲解决的问题的时候会讲这个
  • 最坑爹的就是这几个高级浏览器,统计到的错误全部都是 Script error ,基本等于毫无意义。 这三个表我都没有讲 line ,为什么呢,因为我们大部分的 js 都是来自跨域外部脚本,这种情况下我们的错误一定是来自第 1 行,所以 line 对我们来说意义不大。 准备下一章“为什么选错误”
  • url 和 refere 的区别是 url 里包含了当时的所有参数,包括 hash samedomain 则是用来判断当前页面是不是在 iframe 中
  • 对象不支持此属性或方法 35+ Script error. 30+
  • 这里很有意思,我们通常认为出错最多的 IE6 其实在线上的体现并不是最多 而平时量很少,大概只有 1% 的 IE7 却有不成比例的 16% 高级浏览器带来的错误跟它自身的占比也比较接近
  • Javascript stacktrace

    1. 1. javascript-stacktrace By zfcao@corp.netease.com 2013-08-14 in http://t.163.com
    2. 2. " 最大的错误就是选择了一个错误的选题 " ——亚里士多德 ——曹智峰
    3. 3. 人人都有拖延症: http://v.youku.com/v_show/id_XNTk2NDI0NDg4.html
    4. 4. 什么是错误 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:  可能是语法错误,通常是程序员造成的编码错误或错别字。  可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。  可能是由于来自服务器或用户的错误输出而导致的错误。 当然,也可能是由于许多其他不可预知的因素。 JavaScript 异常档案 : http://errors.totorojs.org/wiki/
    5. 5. 前端 vs 后端 后端 – 服务器 error log 前端 – 浏览器 (console.log ???)
    6. 6. 怎么捕获错误 Try{ XXX }catch(e){ console.error (e.stack) } But 对于延时执行(或称异步执行 ,例如通过事件、计时器等触发的代 码)代码却无能为力 )
    7. 7. 怎么捕获错误 window.onerror = function(msg , url , line){ msg : xxx, // 错误描述,比如: a is not defined url : xxx, // 出错脚本所在的 url lineNumber : 123 // 出错脚本的行数 } 可以通 置过设 returnValue=true ,或直接 return true 来阻止 器 示 信息。浏览 显 错误 但不会阻止 script debuggers 出的 框弹 调试
    8. 8. 怎么捕获错误 window.onerror 只有 行 才会触运 错误 发 onerror , 法 不会触 。语 错误 发 以下三 方式可以引种 发 onerror : • 行 ,例如无效的 象引用或安全限制运 时错误 对 • 下 ,如 片载错误 图 • 在 IE9 中, 取多媒体数据失 也会引获 败 发 <script> 不支持标签 onerror 。 定 在义 <body> 上的标签 onerror 属性相当于 window.onerror ( ,经测试 Firefox 、 Opera 支持, IE9 、 chrome 无反应 ) 。
    9. 9. 不同浏览器错误的差异 IE6 页面内脚本 同域外部脚本 跨域外部脚本 msg ✓ ✓ ✓ url ✓ (当前页) ✓ (当前页) ✓ (当前页)
    10. 10. 不同浏览器错误的差异 IE7 、 IE8 、 IE9 页面内脚本 同域外部脚本 跨域外部脚本 msg ✓ ✓ ✓ url ✓ (当前页) ✓ ✓
    11. 11. 不同浏览器错误的差异 Chrome 、 Firefox 、 Safari 页面内脚本 同域外部脚本 跨域外部脚本 msg ✓ ✓ ✗ ( Script error ) url ✓ (当前页) ✓ ✗ ( "" )
    12. 12. 外部 js 错误解决 “ “Script error.”,”“, 0 好没用的信息(浏览器出于安全考虑) 解决:当在页面中 <script> 引入外部 js 文件时,增加一个属性 crossorigin (类似于 <img> 的 CROS 属性)。服务器在接受到请求 时,在 HTTP Header 里增加一个授权字段 ( 值可以是具体的某个域 名 ) : But: 经测试,此方案尚未被浏览器实现。 已经在 Chrome 、 Firefox 的较新版本中支持。
    13. 13. 记录错误日志 1. 使用简单强大的 beacon 将错误信息传递给日志服务器 记录 try.. Catch(ex){log(ex.msg)} window.onerror = log(msg: msg, url: url, line: line) 2. 侵入式 yahoo 的 bmrg : http://velocity.oreilly.com.cn/2011/ppts/Velocity-China-BettyTso-2011.pdf
    14. 14. 微博把错误怎么了 • 错误捕获 • 分析错误 • 错误监控 • 解决错误(部分)
    15. 15. 错误捕获 同步错误: 微博是基于 task 同 步顺序执行的 ,所以在每个 task run 时进行 try catch:
    16. 16. 错误捕获 • 异步错误: • 对于通过事件、计时器、用户操作等延迟触发的代码: • ErrorCatch.js : • ErrorCatch 需在所有 task 执行之前注册,防止 window.onerror 因为没加载但却触发了错误 !!!
    17. 17. ErrorCatch.js return { pageid: window._ba_utm_s || 0, file: encodeURIComponent(url) || "", url: encodeURIComponent(location.href), message: encodeURIComponent(msg) || "", line: encodeURIComponent(line) || 0, samedomain: (top == window) } _ba_utm_s 面页 标记 id:window['_ba_utm_s'] = '170';
    18. 18. • 在开发环境中,也可以通过注入 muscula: http://www.muscula.com/
    19. 19. 错误分析 • 有多少错误 • 错误都在哪儿 • 错误在浏览器中的分布 • 都有什么错误
    20. 20. 目前遇到的困难 • 大量错误不知道如何复现 • 高级浏览器对错误信息的提示太笼统 • 后台统计系统的完善 • Qunar 强大的统计系统
    21. 21. 都有什么错误 对象不支持此属性或方法 Script error. TypeError: 'undefined' is not an object Uncaught TypeError: Cannot read property 'nodeName' of null TypeError: 'null' is not an object 物件不支援此屬性或方法 TypeError: event.target is undefined ReferenceError: Can't find variable: BdPlayer Uncaught SyntaxError: Unexpected token 晚
    22. 22. 错误在浏览器中的分布
    23. 23. 有多少错误 平均每日 223 万条错误日志。( 2013/06/19 -- 2013/07/04 )
    24. 24. 首页监控图
    25. 25. 1.window.onerror 理 步触 , 主 面与处 异 发错误 页 cdn 上的 js 跨域 ,无法捕 准 ?时 获 确错误 2. js 被 成一行后, 没有 法定位到行号?压缩 确实 办 Q&A

    ×