How to solve Uncaught (in promise) DOMException error?

Question

I am using two video tags in HTML to load the current video as well as the next video. As the current video starts to play, the next video will be hidden and preloaded. As the current video ends it will get fade out and the next video will fade in. The two video tags will work in even odd ways to play the upcoming videos while changing the video source.

The Problem When user continuously click to change the video the console returns an Uncaught (in promise) DOMException error where it points to the code where video source is getting changed.

The error could be because of continuous change in video source as there is video already playing in that source before changing it. The other hand, on every click a video play promise request, is created which could be interrupted because of continuous click as the request gets interrupted before it is resolved.

I have tried to clear both video source by empty string but the error still gets generated.

    // video source is getting changed which interrupts the promise and the error pointer
    oppositeVideoElement.pause();
    $(oppositeVideoElement).fadeOut(800, function () {
        $(oppositeVideoElement).attr('src', nextVideoSource); // line where error points
    });

// Play promise code which gets interrupted before resolve
function playPromiseForMobileVideo(videoElement, videoAboutToPlay) {
    var playPromise = videoElement.play();
    if (playPromise !== undefined) {
        console.log(playPromise);
        playPromise.then(
            function () {
                if (currentDevice == 'mobile' && mobileFirstTime) {
                    videoElement.pause();
                    mobileFirstTime = false;
                }
            }).catch(function (e) {
                if(cameFromNetwork) {
                    videoElement.load();
                    videoElement.play();
                    cameFromNetwork = false;
                    return;
                }
                videoElement.pause();
                $(videoElement).attr('src', videoAboutToPlay);
                videoElement.load();
                videoElement.play();
                console.log('catch video Element', videoElement);
            });
    }
}

Expected result: The error should get removed and stuck promise should get killed.

Actual result: The error is generated which blocks the current video to play.

Answer 1

A promise is a structure that is expected to either resolve or be rejected. When you work with promises you have to handle both, that is, you have to create a handle for the rejection just as you have to create a handle for the resolve.

When calling a method as a promise, you should always add a .catch() at the end, the catch call takes a callback which will pass an error as argument.

Example:

const method = () => {
  return new Promise((resolve, reject) => {
    reject(new Error({});
  }); 

}

method.then(...).catch(e => console.err(e.message));

If the promise fails, you have to catch the error.

If you use async/await, you use try/catch instead:

try {
  await method();
} catch (e) {
  console.error(e.message);
}