Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/network-debugger/src/core/fetch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export function fetchProxyFactory(fetchFn: typeof fetch, mainProcess: MainProces
}
requestDetail.requestData = options?.body

requestDetail.loadCallFrames()

const result = fetchFn(request as string | Request, options)
.then(fetchResponseHandlerFactory(requestDetail, mainProcess))
.catch(fetchErrorHandlerFactory(requestDetail, mainProcess))
Expand Down Expand Up @@ -80,8 +82,11 @@ async function handleEventStreamResponse(
let buffer = ''
const allChunks: Uint8Array[] = []

// Send initial response info
mainProcess.sendRequest('updateRequest', requestDetail)
// Send responseReceived first (type: EventSource) so DevTools knows this is an SSE request
mainProcess.send({
type: 'eventSourceResponseReceived',
data: requestDetail
})

try {
while (true) {
Expand Down
30 changes: 30 additions & 0 deletions packages/network-debugger/src/fork/module/network/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,36 @@ export const networkPlugin = createPlugin('network', ({ devtool, core }) => {
endRequest(request)
})

// Handle SSE response received - send responseReceived with type: EventSource before streaming messages
useHandler<RequestDetail>('eventSourceResponseReceived', ({ data }) => {
const request = new RequestDetail(data)
requests[request.id] = request
devtool.updateTimestamp()
const headers = new RequestHeaderPipe(request.responseHeaders)
const contentType = headers.getHeader('content-type') || 'text/event-stream'

devtool.send({
method: 'Network.responseReceived',
params: {
requestId: request.id,
frameId,
loaderId,
timestamp: devtool.timestamp,
type: 'EventSource',
response: {
url: request.url,
status: request.responseStatusCode,
statusText: request.responseStatusCode === 200 ? 'OK' : '',
headers: request.responseHeaders,
connectionReused: false,
encodedDataLength: 0,
charset: 'utf-8',
mimeType: toMimeType(contentType)
}
}
})
})

useHandler<{
id: string
rawData: Array<number>
Expand Down