[{"data":1,"prerenderedAt":752},["ShallowReactive",2],{"navigation-zh-CN":3,"doc-zh-CN-/getting-started/quick-start":81,"surround-zh-CN-/getting-started/quick-start":747},[4,23,45,67],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":22},"开始使用","i-lucide-rocket","/getting-started","1.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"认识 TraceVista","/getting-started/introduction","1.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"5 分钟快速接入","/getting-started/quick-start","1.getting-started/2.quick-start",{"title":19,"path":20,"stem":21},"核心概念","/getting-started/concepts","1.getting-started/3.concepts",false,{"title":24,"icon":25,"path":26,"stem":27,"children":28,"page":22},"产品能力","i-lucide-blocks","/features","2.features",[29,33,37,41],{"title":30,"path":31,"stem":32},"功能总览","/features/overview","2.features/1.overview",{"title":34,"path":35,"stem":36},"性能指标与优化","/features/performance","2.features/2.performance",{"title":38,"path":39,"stem":40},"前端错误监控","/features/errors","2.features/3.errors",{"title":42,"path":43,"stem":44},"访问分析与业务事件","/features/analytics","2.features/4.analytics",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":22},"SDK 接入","i-lucide-code-xml","/sdk","3.sdk",[51,55,59,63],{"title":52,"path":53,"stem":54},"安装浏览器 SDK","/sdk/installation","3.sdk/1.installation",{"title":56,"path":57,"stem":58},"SDK 配置","/sdk/configuration","3.sdk/2.configuration",{"title":60,"path":61,"stem":62},"SDK API 参考","/sdk/api","3.sdk/3.api",{"title":64,"path":65,"stem":66},"隐私、安全与采集边界","/sdk/privacy","3.sdk/4.privacy",{"title":68,"icon":69,"path":70,"stem":71,"children":72,"page":22},"网站与额度","i-lucide-folder-cog","/account","4.account",[73,77],{"title":74,"path":75,"stem":76},"管理监控网站","/account/projects","4.account/1.projects",{"title":78,"path":79,"stem":80},"免费接收量与用量规则","/account/quota","4.account/2.quota",{"id":82,"title":15,"body":83,"description":739,"extension":740,"links":741,"meta":744,"navigation":580,"path":16,"seo":745,"stem":17,"__hash__":746},"docs_zh_cn/1.getting-started/2.quick-start.md",{"type":84,"value":85,"toc":728},"minimal",[86,90,94,97,110,114,117,137,155,161,164,174,179,183,190,265,272,277,284,432,435,439,442,457,460,464,467,551,566,569,623,627,630,692,699,724],[87,88,89],"p",{},"本指南使用 Script 标签完成最短接入。它不依赖具体前端框架，适用于普通 HTML、Vue、Nuxt、React 以及使用 History API 的单页应用。",[91,92,93],"h2",{"id":93},"准备工作",[87,95,96],{},"开始前，你需要：",[98,99,100,104,107],"ul",{},[101,102,103],"li",{},"一个可以访问的 Web 应用域名",[101,105,106],{},"TraceVista 控制台账号",[101,108,109],{},"修改页面 HTML 或应用模板的权限",[91,111,113],{"id":112},"_1-添加监控网站","1. 添加监控网站",[87,115,116],{},"登录控制台，选择“添加网站”，填写：",[98,118,119,126],{},[101,120,121,125],{},[122,123,124],"strong",{},"网站名称","：便于团队识别，例如“商城生产环境”",[101,127,128,131,132,136],{},[122,129,130],{},"网站域名","：只填写域名，例如 ",[133,134,135],"code",{},"shop.example.com","，不要包含协议、端口或路径",[87,138,139,140,143,144,147,148,150,151,154],{},"网站域名必须与用户实际打开页面时的 hostname 完全一致。协议和端口不参与比较，但 ",[133,141,142],{},"example.com","、",[133,145,146],{},"www.example.com"," 和 ",[133,149,135],{}," 会被视为三个不同域名。SDK 从其他域名、本地 ",[133,152,153],{},"localhost"," 或预览地址上报时会返回 403。",[156,157,158],"warning",{},[87,159,160],{},"本地使用 localhost 或 127.0.0.1 时，hostname 与 API Key 绑定域名不一致，上报会返回 403。这是正常的域名校验，不是 SDK 故障。",[87,162,163],{},"添加完成后，进入网站设置并复制 API Key。Key 的形式类似：",[165,166,172],"pre",{"className":167,"code":169,"language":170,"meta":171},[168],"language-text","mk_your_project_key\n","text","",[133,173,169],{"__ignoreMap":171},[156,175,176],{},[87,177,178],{},"API Key 用于浏览器数据上报，因此可以出现在前端页面里；但登录 Token 和服务端凭据绝不能放到 SDK 配置中。",[91,180,182],{"id":181},"_2-安装-sdk","2. 安装 SDK",[87,184,185,186,189],{},"把控制台提供的代码放在页面的 ",[133,187,188],{},"\u003Chead>"," 中：",[165,191,195],{"className":192,"code":193,"language":194,"meta":171,"style":171},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript\n    defer\n    src=\"https://apm.noxussj.top/monitor.min.js\"\n    data-project-key=\"mk_your_project_key\">\n\u003C/script>\n","html",[133,196,197,210,217,236,254],{"__ignoreMap":171},[198,199,202,206],"span",{"class":200,"line":201},"line",1,[198,203,205],{"class":204},"s86vT","\u003C",[198,207,209],{"class":208},"sd2Uz","script\n",[198,211,213],{"class":200,"line":212},2,[198,214,216],{"class":215},"s50WR","    defer\n",[198,218,220,223,226,229,233],{"class":200,"line":219},3,[198,221,222],{"class":215},"    src",[198,224,225],{"class":204},"=",[198,227,228],{"class":204},"\"",[198,230,232],{"class":231},"sIEYB","https://apm.noxussj.top/monitor.min.js",[198,234,235],{"class":204},"\"\n",[198,237,239,242,244,246,249,251],{"class":200,"line":238},4,[198,240,241],{"class":215},"    data-project-key",[198,243,225],{"class":204},[198,245,228],{"class":204},[198,247,248],{"class":231},"mk_your_project_key",[198,250,228],{"class":204},[198,252,253],{"class":204},">\n",[198,255,257,260,263],{"class":200,"line":256},5,[198,258,259],{"class":204},"\u003C/",[198,261,262],{"class":208},"script",[198,264,253],{"class":204},[87,266,267,268,271],{},"请将示例中的 API Key 替换为控制台显示的 Key。",[133,269,270],{},"defer"," 会让脚本在 HTML 解析完成后执行，避免阻塞页面解析。",[273,274,276],"h3",{"id":275},"nuxt-项目示例","Nuxt 项目示例",[87,278,279,280,283],{},"可以在 ",[133,281,282],{},"nuxt.config.ts"," 中声明全局脚本：",[165,285,289],{"className":286,"code":287,"language":288,"meta":171,"style":171},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n    app: {\n        head: {\n            script: [\n                {\n                    src: 'https://apm.noxussj.top/monitor.min.js',\n                    defer: true,\n                    'data-project-key': 'mk_your_project_key'\n                }\n            ]\n        }\n    }\n})\n","ts",[133,290,291,311,322,331,341,346,365,379,399,405,411,417,423],{"__ignoreMap":171},[198,292,293,297,300,304,308],{"class":200,"line":201},[198,294,296],{"class":295},"s8pZq","export",[198,298,299],{"class":295}," default",[198,301,303],{"class":302},"swgpB"," defineNuxtConfig",[198,305,307],{"class":306},"sndM8","(",[198,309,310],{"class":204},"{\n",[198,312,313,316,319],{"class":200,"line":212},[198,314,315],{"class":208},"    app",[198,317,318],{"class":204},":",[198,320,321],{"class":204}," {\n",[198,323,324,327,329],{"class":200,"line":219},[198,325,326],{"class":208},"        head",[198,328,318],{"class":204},[198,330,321],{"class":204},[198,332,333,336,338],{"class":200,"line":238},[198,334,335],{"class":208},"            script",[198,337,318],{"class":204},[198,339,340],{"class":306}," [\n",[198,342,343],{"class":200,"line":256},[198,344,345],{"class":204},"                {\n",[198,347,349,352,354,357,359,362],{"class":200,"line":348},6,[198,350,351],{"class":208},"                    src",[198,353,318],{"class":204},[198,355,356],{"class":204}," '",[198,358,232],{"class":231},[198,360,361],{"class":204},"'",[198,363,364],{"class":204},",\n",[198,366,368,371,373,377],{"class":200,"line":367},7,[198,369,370],{"class":208},"                    defer",[198,372,318],{"class":204},[198,374,376],{"class":375},"sPKOg"," true",[198,378,364],{"class":204},[198,380,382,385,388,390,392,394,396],{"class":200,"line":381},8,[198,383,384],{"class":204},"                    '",[198,386,387],{"class":208},"data-project-key",[198,389,361],{"class":204},[198,391,318],{"class":204},[198,393,356],{"class":204},[198,395,248],{"class":231},[198,397,398],{"class":204},"'\n",[198,400,402],{"class":200,"line":401},9,[198,403,404],{"class":204},"                }\n",[198,406,408],{"class":200,"line":407},10,[198,409,410],{"class":306},"            ]\n",[198,412,414],{"class":200,"line":413},11,[198,415,416],{"class":204},"        }\n",[198,418,420],{"class":200,"line":419},12,[198,421,422],{"class":204},"    }\n",[198,424,426,429],{"class":200,"line":425},13,[198,427,428],{"class":204},"}",[198,430,431],{"class":306},")\n",[87,433,434],{},"建议通过 Nuxt 运行时配置或部署变量管理不同环境的 API Key。",[91,436,438],{"id":437},"_3-产生验证数据","3. 产生验证数据",[87,440,441],{},"部署或启动网站后：",[443,444,445,448,451,454],"ol",{},[101,446,447],{},"打开一个安装了 SDK 的页面。",[101,449,450],{},"在页面间跳转一次。",[101,452,453],{},"打开浏览器开发者工具，确认 SDK 文件成功加载。",[101,455,456],{},"回到 TraceVista 控制台刷新网站数据。",[87,458,459],{},"访问数据通常会先出现；性能数据会在页面隐藏、卸载或 SDK 启动约 10 秒后提交。",[91,461,463],{"id":462},"_4-记录第一个业务事件","4. 记录第一个业务事件",[87,465,466],{},"SDK 加载后，可以通过全局对象记录关键行为：",[165,468,472],{"className":469,"code":470,"language":471,"meta":171,"style":171},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const accepted = await window.TraceVista.track('signup_completed', {\n    plan: 'free',\n    source: 'homepage'\n})\n","js",[133,473,474,515,531,545],{"__ignoreMap":171},[198,475,476,479,482,484,487,490,493,496,498,501,503,505,508,510,513],{"class":200,"line":201},[198,477,478],{"class":215},"const",[198,480,481],{"class":306}," accepted ",[198,483,225],{"class":204},[198,485,486],{"class":295}," await",[198,488,489],{"class":306}," window",[198,491,492],{"class":204},".",[198,494,495],{"class":306},"TraceVista",[198,497,492],{"class":204},[198,499,500],{"class":302},"track",[198,502,307],{"class":306},[198,504,361],{"class":204},[198,506,507],{"class":231},"signup_completed",[198,509,361],{"class":204},[198,511,512],{"class":204},",",[198,514,321],{"class":204},[198,516,517,520,522,524,527,529],{"class":200,"line":212},[198,518,519],{"class":208},"    plan",[198,521,318],{"class":204},[198,523,356],{"class":204},[198,525,526],{"class":231},"free",[198,528,361],{"class":204},[198,530,364],{"class":204},[198,532,533,536,538,540,543],{"class":200,"line":219},[198,534,535],{"class":208},"    source",[198,537,318],{"class":204},[198,539,356],{"class":204},[198,541,542],{"class":231},"homepage",[198,544,398],{"class":204},[198,546,547,549],{"class":200,"line":238},[198,548,428],{"class":204},[198,550,431],{"class":306},[87,552,553,554,557,558,561,562,565],{},"返回值为 ",[133,555,556],{},"Promise\u003Cboolean>","：",[133,559,560],{},"true"," 表示本次上报被接口接受，",[133,563,564],{},"false"," 表示未启动、被限流、额度已用完或请求失败。",[91,567,568],{"id":568},"接入检查清单",[98,570,573,583,593,599,605,611,617],{"className":571},[572],"contains-task-list",[101,574,577,582],{"className":575},[576],"task-list-item",[578,579],"input",{"disabled":580,"type":581},true,"checkbox"," 生产环境使用生产网站的 API Key",[101,584,586,588,589,592],{"className":585},[576],[578,587],{"disabled":580,"type":581}," 网站设置中的绑定域名与页面 ",[133,590,591],{},"Origin"," 的 hostname 完全一致",[101,594,596,598],{"className":595},[576],[578,597],{"disabled":580,"type":581}," SDK 地址可以通过 HTTPS 正常访问",[101,600,602,604],{"className":601},[576],[578,603],{"disabled":580,"type":581}," 页面没有重复安装 SDK",[101,606,608,610],{"className":607},[576],[578,609],{"disabled":580,"type":581}," CSP 允许加载 SDK 并向监控接口发起请求",[101,612,614,616],{"className":613},[576],[578,615],{"disabled":580,"type":581}," 测试事件中没有密码、Token、手机号等敏感数据",[101,618,620,622],{"className":619},[576],[578,621],{"disabled":580,"type":581}," 控制台能看到访问、性能或错误数据",[91,624,626],{"id":625},"没有看到数据","没有看到数据？",[87,628,629],{},"临时开启调试日志：",[165,631,633],{"className":192,"code":632,"language":194,"meta":171,"style":171},"\u003Cscript\n    defer\n    src=\"https://apm.noxussj.top/monitor.min.js\"\n    data-project-key=\"mk_your_project_key\"\n    data-debug=\"true\">\n\u003C/script>\n",[133,634,635,641,645,657,669,684],{"__ignoreMap":171},[198,636,637,639],{"class":200,"line":201},[198,638,205],{"class":204},[198,640,209],{"class":208},[198,642,643],{"class":200,"line":212},[198,644,216],{"class":215},[198,646,647,649,651,653,655],{"class":200,"line":219},[198,648,222],{"class":215},[198,650,225],{"class":204},[198,652,228],{"class":204},[198,654,232],{"class":231},[198,656,235],{"class":204},[198,658,659,661,663,665,667],{"class":200,"line":238},[198,660,241],{"class":215},[198,662,225],{"class":204},[198,664,228],{"class":204},[198,666,248],{"class":231},[198,668,235],{"class":204},[198,670,671,674,676,678,680,682],{"class":200,"line":256},[198,672,673],{"class":215},"    data-debug",[198,675,225],{"class":204},[198,677,228],{"class":204},[198,679,560],{"class":231},[198,681,228],{"class":204},[198,683,253],{"class":204},[198,685,686,688,690],{"class":200,"line":348},[198,687,259],{"class":204},[198,689,262],{"class":208},[198,691,253],{"class":204},[87,693,694,695,698],{},"然后检查控制台是否提示 Key 缺失、上报失败或额度耗尽。更多配置请阅读 ",[696,697,56],"a",{"href":57},"。",[87,700,701,702,557,705,708,709,711,712,715,716,719,720,698],{},"如果上报接口返回 403，请打开 Network 面板中该请求的 ",[122,703,704],{},"Response",[133,706,707],{},"APIKEY 与当前网站域名不匹配"," 表示绑定域名与请求 ",[133,710,591],{},"（缺失时使用 ",[133,713,714],{},"Referer","）不一致。重点检查 ",[133,717,718],{},"www","、子域名、本地地址和是否误用了其他网站的 API Key。完整排查方法见 ",[696,721,723],{"href":722},"/sdk/installation#api-key-%E4%B8%8E%E7%BB%91%E5%AE%9A%E5%9F%9F%E5%90%8D","API Key 与绑定域名",[725,726,727],"style",{},"html pre.shiki code .s86vT, html code.shiki .s86vT{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sd2Uz, html code.shiki .sd2Uz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s50WR, html code.shiki .s50WR{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sIEYB, html code.shiki .sIEYB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s8pZq, html code.shiki .s8pZq{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swgpB, html code.shiki .swgpB{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sndM8, html code.shiki .sndM8{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sPKOg, html code.shiki .sPKOg{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":171,"searchDepth":219,"depth":212,"links":729},[730,731,732,735,736,737,738],{"id":93,"depth":212,"text":93},{"id":112,"depth":212,"text":113},{"id":181,"depth":212,"text":182,"children":733},[734],{"id":275,"depth":219,"text":276},{"id":437,"depth":212,"text":438},{"id":462,"depth":212,"text":463},{"id":568,"depth":212,"text":568},{"id":625,"depth":212,"text":626},"添加监控网站、获取 API Key、安装浏览器 SDK，并确认第一条真实访问数据。","md",[742],{"label":743,"icon":47,"to":53},"SDK 完整指南",{},{"title":15,"description":739},"HU3vxHggZD",[748,750],{"title":11,"path":12,"stem":13,"description":749,"children":-1},"了解 Web 应用性能与用户体验监控平台解决什么问题、采集哪些信号，以及如何把数据转化为优化行动。",{"title":19,"path":20,"stem":21,"description":751,"children":-1},"理解监控网站、API Key、访客、会话、页面访问和四类监控数据之间的关系。",1789572467584]