Skip to content
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

Document PerformanceResourceTiming.responseStatus #22584

Merged
merged 1 commit into from
Nov 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions files/en-us/web/api/performanceresourcetiming/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ The interface also supports the following properties which are listed in the ord
- : A {{domxref("DOMHighResTimeStamp")}} immediately before the browser starts requesting the resource from the server.
- {{domxref('PerformanceResourceTiming.responseStart')}} {{ReadOnlyInline}}
- : A {{domxref("DOMHighResTimeStamp")}} immediately after the browser receives the first byte of the response from the server.
- {{domxref('PerformanceResourceTiming.responseStatus')}} {{experimental_inline}} {{ReadOnlyInline}}
- : A number representing the HTTP response status code returned when fetching the resource.
- {{domxref('PerformanceResourceTiming.responseEnd')}} {{ReadOnlyInline}}
- : A {{domxref("DOMHighResTimeStamp")}} immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
- {{domxref('PerformanceResourceTiming.transferSize')}} {{ReadOnlyInline}}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
---
title: PerformanceResourceTiming.responseStatus
slug: Web/API/PerformanceResourceTiming/responseStatus
page-type: web-api-instance-property
tags:
- API
- Property
- Reference
- Web Performance
- Experimental
browser-compat: api.PerformanceResourceTiming.responseStatus
---

{{APIRef("Performance API")}} {{SeeCompatTable}}

The **`responseStatus`** read-only property represents the HTTP response status code returned when fetching the resource.

This property maps to {{domxref("Response.status")}} from the [Fetch API](/en-US/docs/Web/API/Fetch_API).

## Value

The `responseStatus` property can have the following values:

- A number indicating the [HTTP response status code](/en-US/docs/Web/HTTP/Status) returned when fetching the resource.
- `0` if the [CORS](/en-US/docs/Web/HTTP/CORS) check fails.
- `0` for cross-origin {{HTMLElement("iframe")}} objects.

## Examples

### Checking if a cache was hit

The `responseStatus` property can be used to check for cached resources with a {{HTTPStatus("304")}} `Not Modified` response status code.

Using a {{domxref("PerformanceObserver")}}:

```js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.responseStatus === 304) {
console.log(`${entry.name} was loaded from cache`);
}
});
});

observer.observe({ type: "resource", buffered: true });
```

Or using {{domxref("Performance.getEntriesByType()")}}, which only shows `resource` performance entries present in the browser's performance timeline at the time you call this method:

```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
if (entry.responseStatus === 304) {
console.log(`${entry.name} was loaded from cache`);
}
});
```

Alternatively, if `responseStatus` is not available, you can check if the {{domxref("PerformanceResourceTiming.transferSize", "transferSize")}} property returned `0`.

### Cross-origin response status codes

If the value of the `responseStatus` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin response status codes, the [CORS](/en-US/docs/Web/HTTP/CORS) {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see response status codes, the cross-origin resource should send:

```http
Access-Control-Allow-Origin: https://developer.mozilla.org
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- [HTTP response status code](/en-US/docs/Web/HTTP/Status)
- {{domxref("Response.status")}}
- [CORS](/en-US/docs/Web/HTTP/CORS)
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ This would log a JSON object like so:
"secureConnectionStart": 110.80000001192093,
"requestStart": 117.30000001192093,
"responseStart": 120.40000000596046,
"responseStatus": 200,
"responseEnd": 122.40000000596046,
"transferSize": 0,
"encodedBodySize": 880,
Expand Down