-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
[WebProfiler] added support for window.fetch calls in ajax section #19576
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,7 @@ | |
<thead> | ||
<tr> | ||
<th>Method</th> | ||
<th>Type</th> | ||
<th>Status</th> | ||
<th>URL</th> | ||
<th>Time</th> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -124,6 +124,10 @@ | |
methodCell.textContent = request.method; | ||
row.appendChild(methodCell); | ||
|
||
var typeCell = document.createElement('td'); | ||
typeCell.textContent = request.type; | ||
row.appendChild(typeCell); | ||
|
||
var statusCodeCell = document.createElement('td'); | ||
var statusCode = document.createElement('span'); | ||
if (request.statusCode < 300) { | ||
|
@@ -235,6 +239,45 @@ | |
} | ||
|
||
{% if excluded_ajax_paths is defined %} | ||
|
||
if (window.fetch && window.fetch.polyfill === undefined) { | ||
var oldFetch = window.fetch; | ||
window.fetch = function () { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what about using There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. absolutly, fixed |
||
var promise = oldFetch.apply(this, arguments); | ||
if (!arguments[0].match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) { | ||
var method = 'GET'; | ||
if (arguments[1] && arguments[1].method !== undefined) { | ||
method = arguments[1].method; | ||
} | ||
|
||
var stackElement = { | ||
loading: true, | ||
error: false, | ||
url: arguments[0], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you need to match the URL against the excluded ajax paths before adding it in the request stack |
||
method: method, | ||
type: 'fetch', | ||
start: new Date() | ||
}; | ||
|
||
requestStack.push(stackElement); | ||
promise.then(function (r) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what if the promise gets rejected ? The stack element should not stay in loading state in this case |
||
stackElement.duration = new Date() - stackElement.start; | ||
stackElement.loading = false; | ||
stackElement.error = r.status < 200 || r.status >= 400; | ||
stackElement.statusCode = r.status; | ||
stackElement.profile = r.headers.get('x-debug-token'); | ||
stackElement.profilerUrl = r.headers.get('x-debug-token-link'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this compatible with CORS restriction or will it log a security warning ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @romainneutron any ideas? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm gonna try this PR |
||
Sfjs.renderAjaxRequests(); | ||
}, function (e){ | ||
stackElement.loading = false; | ||
stackElement.error = true; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what about adding a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah was thinking about that too, but was bit afraid of the extra effort. i see what i can do. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. well, the extra work is mainly about figuring out the display. Adding the type property is not hard (it should just be done in both place initializing a stackElement) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i added type to stackElement and to display |
||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what about adding the error content as a property and display this error in the toolbar? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. its a good idea, but maybe we can put this in another PR since its also not implemented for XHR, afaik, and it would need some more adjustments in how we render the table. |
||
Sfjs.renderAjaxRequests(); | ||
} | ||
|
||
return promise; | ||
}; | ||
} | ||
if (window.XMLHttpRequest && XMLHttpRequest.prototype.addEventListener) { | ||
var proxied = XMLHttpRequest.prototype.open; | ||
|
||
|
@@ -258,6 +301,7 @@ | |
error: false, | ||
url: url, | ||
method: method, | ||
type: 'xhr', | ||
start: new Date() | ||
}; | ||
|
||
|
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
extra blank line here