chore(trace-viewer): hide status code field for failed request (#31977)

* Hide 'Status Code:' field for interrupted requests that don't have it.
* Clear up previously selected body when showing aborted requests.
* Highlight interrupted requests in red.
This commit is contained in:
Yury Semikhatsky 2024-08-01 17:26:52 -07:00 committed by GitHub
parent 5a80ddfaf9
commit 5a83fe55bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 3 deletions

View File

@ -78,10 +78,10 @@ const RequestTab: React.FunctionComponent<{
<div className='network-request-details-header'>General</div>
<div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
<div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
<div className='network-request-details-general' style={{ display: 'flex' }}>
{resource.response.status !== -1 && <div className='network-request-details-general' style={{ display: 'flex' }}>
Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
{`${resource.response.status} ${resource.response.statusText}`}
</span></div>
</span></div>}
<div className='network-request-details-header'>Request Headers</div>
<div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
{requestBody && <div className='network-request-details-header'>Request Body</div>}
@ -118,6 +118,8 @@ const BodyTab: React.FunctionComponent<{
const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType });
}
} else {
setResponseBody(null);
}
};

View File

@ -93,7 +93,7 @@ export const NetworkTab: React.FunctionComponent<{
columnTitle={columnTitle}
columnWidths={columnWidths}
setColumnWidths={setColumnWidths}
isError={item => item.status.code >= 400}
isError={item => item.status.code >= 400 || item.status.code === -1}
isInfo={item => !!item.route}
render={(item, column) => renderCell(item, column)}
sorting={sorting}