Error handling

Available in Classic and VPC

Learn how to configure a custom error UI in the TV SDK.

errorOverride

You can render a custom error UI instead of the default error UI. Pass a render function, a React component, or a ReactNode to the errorOverride prop.

PlayerErrorInfo

The type of the error information object passed to the custom error UI is as follows.

type PlayerErrorInfo = {
    errorCode: string | null;
    errorMessage: string | null;
    errorTitle: string | null;
};

Method 1: Render function

If you pass a render function to errorOverride, you can receive error information and directly configure the UI.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    errorOverride={(info) => (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#000',
        }}>
            <Text style={{ color: '#fff', fontSize: 18 }}>
                Error: {info.errorCode}
            </Text>
            <Text style={{ color: '#aaa', fontSize: 14, marginTop: 8 }}>
                {info.errorMessage}
            </Text>
        </View>
    )}
    onBack={() => navigation.goBack()}
/>

Method 2: React component

You can pass a React component to errorOverride. The component PlayerErrorInfo is received as a prop.

function MyErrorComponent({ errorCode, errorMessage }: PlayerErrorInfo) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ color: '#fff' }}>Error: {errorCode}</Text>
            <Text style={{ color: '#aaa' }}>{errorMessage}</Text>
        </View>
    );
}

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    errorOverride={MyErrorComponent}
    onBack={() => navigation.goBack()}
/>

Method 3: ReactNode

You can directly pass a static ReactNode to errorOverride.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    errorOverride={
        <Text style={{ color: '#fff' }}>This video cannot be played</Text>
    }
    onBack={() => navigation.goBack()}
/>

Detect errors with events

You can also detect errors through the error event of onEvent.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    onEvent={(event) => {
        if (event.type === 'error') {
            console.log('Error occurrence:', event.data);
        }
    }}
    onBack={() => navigation.goBack()}
/>

Common issues

Q. Playback is not available.

• Check if accessKey is valid.
• Check if playlist contains file.
• Check if the stream URL is accessible.

Q. DRM playback failed.

• Since DRM does not work on simulators/emulators, testing on a real device is required.
• On Android TV, check Widevine; on tvOS, check FairPlay.

Q. IMA ads are not displayed.

• Check native build flags (tvOS: $RNVideoUseGoogleIMA = true; Android: RNVideo_useExoplayerIMA=true).
• After changing the flags, rebuilding the app is required.

Q. On Android TV, the D-pad does not work.

• On the emulator config.ini, check hw.keyboard = yes.
• Restart the emulator after changing the flags.