@@ -255,6 +255,10 @@ <h1>🔥 API Degradation Scenarios</h1>
255255 < h3 > Total Requests</ h3 >
256256 < div class ="metric-value neutral " id ="totalRequests "> 0</ div >
257257 </ div >
258+ < div class ="metric-card ">
259+ < h3 > Pending</ h3 >
260+ < div class ="metric-value neutral " id ="pendingRequests "> 0</ div >
261+ </ div >
258262 < div class ="metric-card ">
259263 < h3 > Success Rate</ h3 >
260264 < div class ="metric-value success " id ="successRate "> 100%</ div >
@@ -271,6 +275,10 @@ <h3>Errors (503)</h3>
271275 < h3 > Rate Limited (429)</ h3 >
272276 < div class ="metric-value warning " id ="errors429 "> 0</ div >
273277 </ div >
278+ < div class ="metric-card ">
279+ < h3 > Other Errors</ h3 >
280+ < div class ="metric-value error " id ="otherErrors "> 0</ div >
281+ </ div >
274282 < div class ="metric-card ">
275283 < h3 > Successful (2xx)</ h3 >
276284 < div class ="metric-value success " id ="successCount "> 0</ div >
@@ -308,6 +316,13 @@ <h3>Response Distribution</h3>
308316 </ div >
309317 < span class ="count " id ="error429Percent "> 0%</ span >
310318 </ div >
319+ < div class ="error-bar ">
320+ < span class ="label "> Other Errors</ span >
321+ < div class ="bar-container ">
322+ < div class ="bar error-503 " id ="otherErrorsBar " style ="width: 0% "> </ div >
323+ </ div >
324+ < span class ="count " id ="otherErrorsPercent "> 0%</ span >
325+ </ div >
311326 </ div >
312327
313328 < div class ="log-container ">
@@ -319,9 +334,11 @@ <h3>Request Log</h3>
319334 < script >
320335 const stats = {
321336 total : 0 ,
337+ pending : 0 ,
322338 success : 0 ,
323339 error503 : 0 ,
324340 error429 : 0 ,
341+ otherErrors : 0 ,
325342 totalResponseTime : 0 ,
326343 responseTimes : [ ]
327344 } ;
@@ -330,9 +347,14 @@ <h3>Request Log</h3>
330347
331348 function updateUI ( ) {
332349 document . getElementById ( 'totalRequests' ) . textContent = stats . total ;
350+ document . getElementById ( 'pendingRequests' ) . textContent = stats . pending ;
351+ const pendingEl = document . getElementById ( 'pendingRequests' ) ;
352+ pendingEl . textContent = stats . pending ;
353+ pendingEl . className = 'metric-value ' + ( stats . pending > 0 ? 'warning' : 'neutral' ) ;
333354 document . getElementById ( 'successCount' ) . textContent = stats . success ;
334355 document . getElementById ( 'errors503' ) . textContent = stats . error503 ;
335356 document . getElementById ( 'errors429' ) . textContent = stats . error429 ;
357+ document . getElementById ( 'otherErrors' ) . textContent = stats . otherErrors ;
336358
337359 const successRate = stats . total > 0 ? ( ( stats . success / stats . total ) * 100 ) . toFixed ( 1 ) : 100 ;
338360 const successRateEl = document . getElementById ( 'successRate' ) ;
@@ -349,14 +371,17 @@ <h3>Request Log</h3>
349371 const successPercent = ( stats . success / stats . total ) * 100 ;
350372 const error503Percent = ( stats . error503 / stats . total ) * 100 ;
351373 const error429Percent = ( stats . error429 / stats . total ) * 100 ;
374+ const otherErrorsPercent = ( stats . otherErrors / stats . total ) * 100 ;
352375
353376 document . getElementById ( 'successBar' ) . style . width = successPercent + '%' ;
354377 document . getElementById ( 'error503Bar' ) . style . width = error503Percent + '%' ;
355378 document . getElementById ( 'error429Bar' ) . style . width = error429Percent + '%' ;
379+ document . getElementById ( 'otherErrorsBar' ) . style . width = otherErrorsPercent + '%' ;
356380
357381 document . getElementById ( 'successPercent' ) . textContent = successPercent . toFixed ( 0 ) + '%' ;
358382 document . getElementById ( 'error503Percent' ) . textContent = error503Percent . toFixed ( 0 ) + '%' ;
359383 document . getElementById ( 'error429Percent' ) . textContent = error429Percent . toFixed ( 0 ) + '%' ;
384+ document . getElementById ( 'otherErrorsPercent' ) . textContent = otherErrorsPercent . toFixed ( 0 ) + '%' ;
360385 }
361386 }
362387
@@ -387,6 +412,8 @@ <h3>Request Log</h3>
387412
388413 async function makeRequest ( ) {
389414 const startTime = performance . now ( ) ;
415+ stats . pending ++ ;
416+ updateUI ( ) ;
390417
391418 try {
392419 const response = await fetch ( 'https://api.example.com/data' , {
@@ -399,6 +426,7 @@ <h3>Request Log</h3>
399426 const endTime = performance . now ( ) ;
400427 const responseTime = Math . round ( endTime - startTime ) ;
401428
429+ stats . pending -- ;
402430 stats . total ++ ;
403431 stats . totalResponseTime += responseTime ;
404432 stats . responseTimes . push ( responseTime ) ;
@@ -415,11 +443,13 @@ <h3>Request Log</h3>
415443 const retryAfter = response . headers . get ( 'Retry-After' ) ;
416444 addLogEntry ( response . status , responseTime , `Rate limited. Retry after: ${ retryAfter || 'unknown' } s` ) ;
417445 } else {
446+ stats . otherErrors ++ ;
418447 addLogEntry ( response . status , responseTime , `HTTP ${ response . status } ` ) ;
419448 }
420449 } catch ( error ) {
421450 const endTime = performance . now ( ) ;
422451 const responseTime = Math . round ( endTime - startTime ) ;
452+ stats . pending -- ;
423453 stats . total ++ ;
424454 stats . totalResponseTime += responseTime ;
425455
@@ -460,9 +490,11 @@ <h3>Request Log</h3>
460490
461491 function clearStats ( ) {
462492 stats . total = 0 ;
493+ stats . pending = 0 ;
463494 stats . success = 0 ;
464495 stats . error503 = 0 ;
465496 stats . error429 = 0 ;
497+ stats . otherErrors = 0 ;
466498 stats . totalResponseTime = 0 ;
467499 stats . responseTimes = [ ] ;
468500
0 commit comments