index.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Monitor SDK 测试页面</title>
  7. </head>
  8. <body>
  9. <h1>监控SDK测试页面</h1>
  10. <p>此页面用于测试打包后的监控SDK是否正常工作。</p>
  11. <!-- 引入打包后的测试函数 -->
  12. <script src="../dist/bundle-iife.js"></script>
  13. <div id="test-container">
  14. <button id="trigger-error">触发JavaScript错误</button>
  15. <button id="trigger-promise-error">触发Promise错误</button>
  16. <button id="simulate-performance-event">模拟性能事件</button>
  17. <button id="send-custom-data">发送自定义数据</button>
  18. <button id="test-functions">测试函数(test)</button>
  19. </div>
  20. <div id="result">
  21. <h3>控制台输出:</h3>
  22. <p>请打开开发者工具查看监控SDK的输出信息</p>
  23. </div>
  24. <script>
  25. // 页面加载完成后执行测试
  26. document.addEventListener("DOMContentLoaded", function () {
  27. console.log("页面已加载,监控SDK应该已经初始化");
  28. // 检查监控SDK是否已正确加载
  29. if (window.MonitorSDK && window.monitorInstance) {
  30. console.log("监控SDK已成功加载");
  31. console.log("SDK实例:", window.monitorInstance);
  32. } else {
  33. console.error("监控SDK未正确加载");
  34. }
  35. // 测试全局函数是否存在
  36. if (window.test && window.testExport) {
  37. console.log("✅ 全局函数已成功加载");
  38. // 测试函数功能
  39. console.log("test(5) =", window.test(5));
  40. console.log("testExport(5) =", window.testExport(5));
  41. } else {
  42. console.error("❌ 全局函数未找到");
  43. }
  44. // 绑定按钮事件
  45. document.getElementById("test-functions").addEventListener("click", function () {
  46. console.log("测试全局函数");
  47. if (window.test && window.testExport) {
  48. const result1 = window.test(10);
  49. const result2 = window.testExport(10);
  50. console.log("window.test(10) =", result1);
  51. console.log("window.testExport(10) =", result2);
  52. alert(`函数调用结果:\ntest(10) = ${result1}\ntestExport(10) = ${result2}`);
  53. } else {
  54. console.error("函数未定义");
  55. alert("函数未定义");
  56. }
  57. });
  58. document.getElementById("trigger-error").addEventListener("click", function () {
  59. console.log("触发JavaScript错误测试");
  60. // 触发一个JavaScript错误
  61. throw new Error("这是测试错误");
  62. });
  63. document.getElementById("trigger-promise-error").addEventListener("click", function () {
  64. console.log("触发Promise错误测试");
  65. // 触发一个Promise错误
  66. Promise.reject(new Error("这是测试Promise错误"));
  67. });
  68. document
  69. .getElementById("simulate-performance-event")
  70. .addEventListener("click", function () {
  71. console.log("模拟性能事件");
  72. // 这会触发性能监控
  73. const start = performance.now();
  74. // 模拟一些计算
  75. for (let i = 0; i < 1000000; i++) {}
  76. const end = performance.now();
  77. console.log(`模拟计算耗时: ${end - start} ms`);
  78. });
  79. document.getElementById("send-custom-data").addEventListener("click", function () {
  80. console.log("发送自定义数据");
  81. // 使用监控实例发送自定义数据
  82. if (window.monitorInstance) {
  83. window.monitorInstance.reportData({
  84. type: "custom_event",
  85. message: "自定义事件测试",
  86. timestamp: Date.now(),
  87. });
  88. }
  89. });
  90. });
  91. // 页面可见性变化事件(用于测试页面停留时间监控)
  92. document.addEventListener("visibilitychange", function () {
  93. console.log("页面可见性变化:", document.visibilityState);
  94. });
  95. </script>
  96. </body>
  97. </html>