How to track network errors
THEOplayer currently doesn't throw an error
event for all network request errors on all platforms. Sometimes you might want an event to listen for to track network related issues in your QoS/QoE dashboards. To enable this, you can use our Network API.
Web
You can use the Network API as follows to track network requests with status codes 4xx and 5xx
function httpErrorInterceptor(response) {
if (response.status >= 400 && response.status <= 599) {
var errorDetails = {
status: response.status,
fileType: response.request.type,
url: response.request.url
};
var networkErrorEvent = new CustomEvent("THEOnetworkerror", {
detail: errorDetails
});
document.dispatchEvent(networkErrorEvent);
}
}
player.network.addResponseInterceptor(httpErrorInterceptor);
document.addEventListener("THEOnetworkerror", console.log);
Android
For Android, you'll also use the Network API as you would with our Web SDK but you need to do it through JavaScript injection and pass a message to your Java environment. You need to follow these steps:
-
Make an
assets
folder, for instance underandroid/app/src/main/assets
and add a JavaScript file, sayinterceptor.js
-
Add your network interceptor code but include a line to send a message with to be able to use the event's information in your Java code
function createHttpErrorInterceptor() {
var player = THEOplayer.players[0];
var interceptor = function (response) {
if (response.status >= 400 && response.status <= 599) {
var errorDetails = {
status: response.status,
fileType: response.request.type,
url: response.request.url
};
theoplayerAndroid.sendMessage(
"THEOplayer.network.error",
JSON.stringify(errorDetails)
);
}
};
player.network.addResponseInterceptor(interceptor);
THEOplayer.HttpErrorInterceptor = interceptor;
}
function destroyHttpErrorInterceptor() {
if (THEOplayer.HttpErrorInterceptor) {
var player = THEOplayer.players[0];
player.network.removeResponseInterceptor(THEOplayer.Interceptor_404);
THEOplayer.HttpErrorInterceptor = undefined;
}
} -
Link the JavaScript file to your THEOplayer instance as follows
<com.theoplayer.android.api.THEOplayerView
android:id="@+id/theoPlayerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:jsPaths="interceptor.js"/> -
In the Java file where you configure THEOplayer add the following:
protected void onCreate(Bundle savedInstanceState) {
// Code to configure the player
// ...
// ...
CreateInterceptor();
SetSource();
}
protected void SetSource(){
// bad url to test if the network response interceptor works
String url = "https://cdn.theoplayer.com/video/elephants-dream/playlist2.m3u8";
TypedSource typedSource = TypedSource.Builder
.typedSource()
.src(url)
.type(SourceType.HLS)
.build();
SourceDescription sourceDescription = SourceDescription.Builder
.sourceDescription(typedSource)
.build();
theoPlayer.setSource(sourceDescription);
theoPlayer.play();
}
protected void HandleNetworkError(String message){
//Do something with the network error
Log.i("THEO", "Network error: " + message);
}
protected void CreateInterceptor(){
viewBinding.theoPlayerView.evaluateJavaScript("createHttpErrorInterceptor();", null);
}
protected void DestroyInterceptor(){
viewBinding.theoPlayerView.evaluateJavaScript("destroyHttpErrorInterceptor();", null);
}
iOS
On iOS, there are platform-specific constraints that prevent us from giving you the control over network call like you can on Web. Therefore, we expose an event type for this on the network object. You can set up a listener as follows
self.player.network.addEventListener(type: NetworkEventTypes.ERROR) { (everror) in
// handle the event
}