InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest'

[RealAlphabet]

There is a logic error in the default XHR loader code of HLS.
response can be null if the request failed.

Also in accordance with the specification.

Note: When setting responseType to a particular value, the author should make sure that the server is actually sending a response compatible with that format. If the server returns data that is not compatible with the responseType that was set, the value of response will be null.

InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').
    at t.readystatechange (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:351569)

Here is the line corresponding to the error.

hls.js/src/utils/xhr-loader.ts

Line 202 in a58ce98

((useResponse && xhr.response) || xhr.responseText !== null)

[RealAlphabet]

After a long time debugging and reading the logs of the users for whom the error was triggered I noticed other errors such as :

RangeError: Array buffer allocation failed
    at new ArrayBuffer (<anonymous>)
    at new Uint8Array (<anonymous>)
    at _t (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:25511)
    at e.bufferFragmentData (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:122074)
    at e._handleTransmuxComplete (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:215672)
    at e.handleTransmuxComplete (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:196369)
    at e.onWorkerMessage (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:195871)
    at Worker.onwmsg (https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.0/hls.min.js:1:192471)

Then I found an interesting information in the specification, here it is.
https://xhr.spec.whatwg.org/#the-response-attribute

5. If this’s response type is "arraybuffer", then set this’s response object to a new ArrayBuffer object representing this’s received bytes. If this throws an exception, then set this’s response object to failure and return null.

Allocating an ArrayBuffer object is not guaranteed to succeed. [ECMASCRIPT]

I think that both errors are closely related to the same problem, namely that the user does not have enough free memory on his device, or a memory allocation bug.

[robwalch]

Hi @RealAlphabet,

Is this something you can still reproduce? Have you tried catching the exception, and/or taken steps to reduce memory usage?

[DarkHelmet67]

Hi @robwalch
I found the same error with hls.js v1.5.6 while working on content steering
These are some additional details on the issue

No problem when responseType: "text"

The problem is this line of code is executed even when `responseType: "json"`, bypassing the guard in the line above

It seems to be fixed with this PR #6842 on 1.6.0 milestone

[robwalch]

Thank you Luca.

Are you looking for this fix in a patch to 1.5?

[robwalch]

A fix has been released in patch v1.5.18 (cherry-picked from #6842).

• Fix null XHR response handling #6842