https://ttsam.app/_next/static/chunks/pages/dev/socket-stats-6ff2bbe896aa1700.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3581],{82023:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>s});var a=n(37876),c=n(14232);function s(){let[e,t]=(0,c.useState)(null),[n,s]=(0,c.useState)(0),[l,f]=(0,c.useState)(null);return(0,c.useEffect)(()=>{let e=()=>{try{if(!window.__ttDiag)return void f("window.__ttDiag ยังไม่พร้อม — เปิดหน้าอื่น (เช่น /dashboard) ก่อนสัก 5 วิเพื่อให้ socket boot");f(null),t(window.__ttDiag.stats())}catch(e){f(String(e))}};e();let n=setInterval(()=>{e(),s(e=>e+1)},2e3);return()=>clearInterval(n)},[]),(0,a.jsx)("div",{className:"min-h-screen bg-zinc-950 text-zinc-100 p-6 pt-12 font-mono",children:(0,a.jsxs)("div",{className:"max-w-6xl mx-auto",children:[(0,a.jsxs)("header",{className:"mb-6 flex items-center justify-between flex-wrap gap-3",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("h1",{className:"text-2xl font-bold text-pink-400",children:"\uD83D\uDCCA Socket Health Dashboard"}),(0,a.jsxs)("p",{className:"text-xs text-zinc-500 mt-1",children:["Local-only \xb7 localStorage rolling ~1000 events \xb7 refresh ทุก 2s \xb7 tick #",n]})]}),(0,a.jsxs)("div",{className:"flex gap-2 text-xs",children:[(0,a.jsx)("button",{onClick:()=>{try{var t;null==(t=navigator.clipboard)||t.writeText(JSON.stringify(e,null,2)),alert("\uD83D\uDCCB Copied stats JSON — paste ส่ง AI ได้เลย")}catch(e){alert("copy failed: "+e)}},className:"px-3 py-2 bg-pink-600 hover:bg-pink-500 rounded font-bold",children:"\uD83D\uDCCB Copy JSON"}),(0,a.jsx)("button",{onClick:()=>{confirm("Force reconnect socket?")&&window.__ttDiag.reconnect()},className:"px-3 py-2 bg-zinc-700 hover:bg-zinc-600 rounded",children:"⚡ Reconnect"}),(0,a.jsx)("button",{onClick:()=>{confirm("ล้าง localStorage log ทั้งหมด? (ไม่กระทบ live socket)")&&(window.__ttDiag.clear(),t(window.__ttDiag.stats()))},className:"px-3 py-2 bg-red-700 hover:bg-red-600 rounded",children:"\uD83D\uDDD1 Clear log"})]})]}),l&&(0,a.jsx)("div",{className:"bg-red-900/40 border border-red-700 text-red-200 p-4 rounded mb-4 text-sm",children:l}),!e&&!l&&(0,a.jsx)("div",{className:"text-zinc-500",children:"loading…"}),e&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("section",{className:"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6",children:[(0,a.jsx)(r,{label:"Events captured",value:e.timespan.events,sub:"".concat(g(e.timespan.from,e.timespan.to))}),(0,a.jsx)(r,{label:"Latency p50",value:u(e.latency.p50),sub:"avg ".concat(u(e.latency.avg)," \xb7 max ").concat(u(e.latency.max))}),(0,a.jsx)(r,{label:"Latency p95 / p99",value:"".concat(u(e.latency.p95)," / ").concat(u(e.latency.p99)),sub:"".concat(e.latency.samples," pings")}),(0,a.jsx)(r,{label:"Reconnects",value:e.reconnects.total,sub:"offline ".concat(e.network.offlineCount,"\xd7 \xb7 timeouts ").concat(e.heartbeat.timeout,"\xd7")}),(0,a.jsx)(r,{label:"CSR success rate",value:h(e.csr.rate),sub:"".concat(e.csr.recovered,"/").concat(e.csr.totalConnects," connects recovered"),accent:e.csr.rate>.5?"emerald":"amber"}),(0,a.jsx)(r,{label:"Heartbeat fail rate",value:h(e.heartbeat.failRate),sub:"ok ".concat(e.heartbeat.ok," \xb7 timeout ").concat(e.heartbeat.timeout),accent:e.heartbeat.failRate<.05?"emerald":"red"}),(0,a.jsx)(r,{label:"Connected time",value:b(e.tierMs.connected),sub:"".concat(j(e.tierMs.connected,p(e.tierMs))),accent:"emerald"}),(0,a.jsx)(r,{label:"Down time (any tier)",value:b(e.tierMs.connecting+e.tierMs.reconnecting+e.tierMs.lost),sub:"".concat(j(e.tierMs.connecting+e.tierMs.reconnecting+e.tierMs.lost,p(e.tierMs))),accent:"red"})]}),(0,a.jsxs)("div",{className:"grid md:grid-cols-2 gap-4 mb-6",children:[(0,a.jsx)(i,{title:"Latency over time (last 200 pings)",children:(0,a.jsx)(o,{series:e.latencySeries})}),(0,a.jsx)(i,{title:"Latency histogram",children:(0,a.jsx)(d,{pings:e.latency.series})})]}),(0,a.jsx)(i,{title:"Tier duration breakdown",className:"mb-6",children:(0,a.jsx)(x,{tierMs:e.tierMs})}),(0,a.jsx)(i,{title:"Recent reconnect events (last 20)",className:"mb-6",children:0===e.reconnects.last20.length?(0,a.jsx)("div",{className:"text-zinc-500 text-sm",children:"ไม่มี reconnect ใน log — socket stable \uD83D\uDC4D"}):(0,a.jsx)("ul",{className:"text-xs space-y-1",children:e.reconnects.last20.slice().reverse().map((e,t)=>(0,a.jsxs)("li",{className:"flex gap-3 items-center",children:[(0,a.jsx)("span",{className:"text-zinc-500 w-32",children:new Date(e.at).toLocaleStr

1ing()}),(0,a.jsxs)("span",{className:m(e.to),children:["→ ",e.to]})]},t))})}),(0,a.jsx)(i,{title:"Raw JSON (paste นี้ส่ง AI)",className:"mb-6",children:(0,a.jsx)("pre",{className:"text-[10px] text-zinc-400 overflow-auto max-h-96 leading-tight",children:JSON.stringify(e,null,2)})}),(0,a.jsx)("div",{className:"text-xs text-zinc-600 mt-8",children:'\uD83D\uDCA1 Tip: เปิด /dashboard หรือ /actions ทิ้งไว้สักครู่ เพื่อให้ heartbeat สะสม latency samples \xb7 เปิด DevTools Network ทดลอง throttle "Offline" 30s ดู tier transition \xb7 ปุ่ม "⚡ Reconnect" เพื่อ trigger CSR test เอง'})]})]})})}n(35940);let l={default:"bg-zinc-900 border-zinc-800",emerald:"bg-emerald-950/40 border-emerald-800/50",amber:"bg-amber-950/40 border-amber-800/50",red:"bg-red-950/40 border-red-800/50"};function r(e){let{label:t,value:n,sub:c,accent:s="default"}=e;return(0,a.jsxs)("div",{className:"".concat(l[s]," border rounded p-4"),children:[(0,a.jsx)("div",{className:"text-[10px] text-zinc-500 uppercase tracking-wider",children:t}),(0,a.jsx)("div",{className:"text-2xl font-bold mt-1",children:null!=n?n:"—"}),c&&(0,a.jsx)("div",{className:"text-[10px] text-zinc-500 mt-1",children:c})]})}function i(e){let{title:t,children:n,className:c=""}=e;return(0,a.jsxs)("section",{className:"bg-zinc-900 border border-zinc-800 rounded p-4 ".concat(c),children:[(0,a.jsx)("h2",{className:"text-sm font-bold text-zinc-300 mb-3",children:t}),n]})}function o(e){let{series:t}=e;if(!t||t.length<2)return(0,a.jsx)("div",{className:"text-zinc-500 text-xs h-32 flex items-center justify-center",children:"ยังไม่มี samples — รอ heartbeat 5s/ping"});let n=t.map(e=>e.ts),c=t.map(e=>e.ms),s=Math.min(...n),l=Math.max(...n),r=Math.max(...c,50),i=e=>24+(e-s)/Math.max(1,l-s)*752,o=e=>136-e/r*112,d=t.map(e=>"".concat(i(e.ts).toFixed(1),",").concat(o(e.ms).toFixed(1))).join(" "),x=[0,Math.round(r/2),Math.round(r)];return(0,a.jsxs)("svg",{viewBox:"0 0 ".concat(800," ").concat(160),className:"w-full h-40",children:[x.map(e=>(0,a.jsxs)("g",{children:[(0,a.jsx)("line",{x1:24,y1:o(e),x2:776,y2:o(e),stroke:"#27272a",strokeDasharray:"2,2"}),(0,a.jsxs)("text",{x:"4",y:o(e)+3,fill:"#71717a",fontSize:"9",children:[e,"ms"]})]},e)),(0,a.jsx)("polyline",{points:d,fill:"none",stroke:"#ec4899",strokeWidth:"1.5"}),t.slice(-1).map((e,t)=>(0,a.jsx)("circle",{cx:i(e.ts),cy:o(e.ms),r:"3",fill:"#ec4899"},t))]})}function d(e){let{pings:t}=e;if(!t||0===t.length)return(0,a.jsx)("div",{className:"text-zinc-500 text-xs h-32 flex items-center justify-center",children:"ยังไม่มี samples"});let n=[{label:"0-50ms",min:0,max:50,count:0,color:"bg-emerald-500"},{label:"50-100ms",min:50,max:100,count:0,color:"bg-emerald-400"},{label:"100-200ms",min:100,max:200,count:0,color:"bg-amber-400"},{label:"200-500ms",min:200,max:500,count:0,color:"bg-orange-500"},{label:"500ms+",min:500,max:1/0,count:0,color:"bg-red-500"}];for(let e of t){let t=n.find(t=>e>=t.min&&e<t.max);t&&t.count++}let c=Math.max(...n.map(e=>e.count),1);return(0,a.jsx)("div",{className:"space-y-2",children:n.map(e=>(0,a.jsxs)("div",{className:"flex items-center gap-2 text-xs",children:[(0,a.jsx)("span",{className:"w-20 text-zinc-400",children:e.label}),(0,a.jsx)("div",{className:"flex-1 bg-zinc-800 rounded h-5 overflow-hidden",children:(0,a.jsx)("div",{className:"".concat(e.color," h-full transition-all"),style:{width:"".concat(e.count/c*100,"%")}})}),(0,a.jsx)("span",{className:"w-12 text-right text-zinc-300",children:e.count})]},e.label))})}function x(e){let{tierMs:t}=e,n=p(t);if(0===n)return(0,a.jsx)("div",{className:"text-zinc-500 text-xs",children:"ยังไม่มี state transitions"});let c=[{key:"connected",label:"Connected",color:"bg-emerald-500"},{key:"connecting",label:"Connecting",color:"bg-amber-400"},{key:"reconnecting",label:"Reconnecting",color:"bg-orange-500"},{key:"lost",label:"Lost",color:"bg-red-500"}];return(0,a.jsxs)("div",{children:[(0,a.jsx)("div",{className:"flex h-8 rounded overflow-hidden mb-3",children:c.map(e=>{let c=t[e.key]/n*100;return 0===c?null:(0,a.jsx)("div",{className:e.color,style:{width:"".concat(c,"%")},title:"".concat(e.label,": ").concat(b(t[e.key]))},e.key)})}),(0,a.jsx)("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-2 text-xs",children:c.map(e=>(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("span",{className:"w-3 h-3 rounded ".concat(e.color)}),(0,a.jsx)("span",{className:"text-zinc-400",children:e.label}),(0,a.jsxs)("span",{className:"text-zinc-200 ml-auto",children:[b(t[e.key])," (",j(t[e.key],n),")"]})]},e.key))})]})}let m=e=>({connected:"text-emerald-400",connecting:"text-amber-400",reconnecting:"text-orange-400",lost:"text-red-400"})[e]||"text-zinc-400",u=e=>null==e?"—":"".concat(Math.round(e),"ms"),h=e=>null==e?"—":"".concat((100*e).toFixed(1),"%"),b=e=>null==e||e<1e3?"".concat(e||0,"ms"):e<6e4?"".concat((e/1e3).toFixed(1),"s"):e<36e5?"".concat((e/6e4).toFixed(1),"m"):"".concat((e/36e5).toFixed(1),"h"),g=(e,t)=>{if(!e)return"no data";let n=new Date(t)-new Date(e);return"last ".concat(b(n))},p=e=>(e.connected||0)+(e.connecting||0)+(e.reconnecting||0)+(e.lost||0),j=(e,t)=>t?"".concat((e/t*100).toFixed(1),"%"):"—";s.disableSidebar=!0}

1,82252:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/dev/socket-stats",function(){return n(82023)}])}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=82252)),_N_E=e.O()}]);