SyntaxError: Unexpected end of JSON input

[Stefano1964]

Expected Behavior

No errors in console

Actual Behavior

player.js:2 SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at E (player.js:2:6653)
at player.js:2:20089
E @ player.js:2
(anonymous) @ player.js:2
postMessage (async)
canUsePostMessage @ ViewSDKInterface.js:1
(anonymous) @ ViewSDKInterface.js:1
(anonymous) @ ViewSDKInterface.js:1
YBdB @ ViewSDKInterface.js:1
webpack_require @ ViewSDKInterface.js:1
(anonymous) @ ViewSDKInterface.js:1
URgk @ ViewSDKInterface.js:1
webpack_require @ ViewSDKInterface.js:1
B/eG @ ViewSDKInterface.js:1
webpack_require @ ViewSDKInterface.js:1
(anonymous) @ ViewSDKInterface.js:1
aE5D @ ViewSDKInterface.js:1
webpack_require @ ViewSDKInterface.js:1
Vu6y @ ViewSDKInterface.js:1
webpack_require @ ViewSDKInterface.js:1
window.adobe_dc_view_sdk.+Nns @ ViewSDKInterface.js:1
(anonymous) @ ViewSDKInterface.js:1

Steps to Reproduce

the error show after the script is loaded, just loaded, i dont setup anything about vimeo player at this time
if then i setup the player with config, etc, the videos are showing without any problems and no error in console

in the past i never see this error

Chrome version 102.0.5005.115
player.js version v2.17.0 loaded from here https://player.vimeo.com/api/player.js

anyway you have problem in your code if you dont check if json is valid...

[tesar-tech]

Same for me. Never had this before..

my iframe code:

<iframe id="playerded75a" width="100%" height="100%" src="https://player.vimeo.com/video/76979871?muted=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" data-ready="true"></iframe>

[rkrishnan8594]

Thanks for reporting this issue @Stefano1964 @tesar-tech. Could one of you share a CodePen or JSFiddle in which this issue is reproduced?

[Stefano1964]

@rkrishnan8594 the error show by downloading the script this way:
<script src="https://player.vimeo.com/api/player.js"></script>

later, on user request there is a call to a function, but later, the errors show just after the player.js is downloaded (ExtJS code to show videos, this work without any problem, it's in place now from roundabout 1 year):

///////////////////////////////////////////////////////////////////////////////////////////////
// VIMEO VIDEO VIEWER PANEL                                                                  //
///////////////////////////////////////////////////////////////////////////////////////////////

    // https://github.com/vimeo/player.js
    var vimeowin;
    var vimeoPlayer;

    function showVimeo(videoId, title) {

        if(vimeowin) {
            vimeowin.show();
        } else {
            vimeowin = Ext.create('Ext.window.Window', {
                autoShow: true,
                layout: 'fit',
                title: 'Video',
                closeAction: 'hide',
                width: window.innerWidth - 300,
                height: window.innerHeight - 150,
                border: false,
                modal: true,
                resizable: false,
                listeners: {
                  show: function( component, eOpts ) {

                  },
                  close: function( component, eOpts ) {
                    vimeoPlayer.destroy().then(function() {
                    }).catch(function(error) {
                    });
                  }

                }
            });

        } 

        var lurl = '<div id="vimeovideoid"></div>';
        vimeowin.setHtml(lurl);
        vimeowin.setTitle('Video: ' + title);

        // https://github.com/vimeo/player.js/#embed-options
        var vimeoOptions = {
          id: videoId,
          autopause: true,
          autoplay: false,
          background: false,
          byline: false,
          color: '249cd4',
          controls: true,
          dnt: false,
          loop: false,
          responsive: false,
          muted: false,
          pip: false,
          playsinline: true,
          portrait: true,
          quality: '4K',
          speed: false,
          texttrack: 'it',
          title: true,
          transparent: false,
          //maxwidth: window.innerWidth - 300,
          //maxheight: window.innerHeight - 200,
          width: window.innerWidth - 300,
          height: window.innerHeight - 200,
        };

        vimeoPlayer = new Vimeo.Player('vimeovideoid', vimeoOptions);

        setTimeout(function () {
          vimeoPlayer.play().then(function() {
       
          }).catch(function(error) {
            console.log('Errore Vimeo', error.name);
            switch (error.name) {
              case 'PasswordError':
                // the video is password-protected and the viewer needs to enter the
                // password first
                break;

              case 'PrivacyError':
                // the video is private
                break;

              default:
                // some other error occurred
                break;
            }
          });
        }, 2000);

        vimeoPlayer.on('ended', function(data) {
          setTimeout(function () {
            vimeowin.close();
          }, 500);
        });

    }

i also tested on Edge, same problem, so it's not related to Chrome

[agilemarcus]

Thanks for reporting this issue @Stefano1964 @tesar-tech. Could one of you share a CodePen or JSFiddle in which this issue is reproduced?

The problem is that the player api is trying to JSON.parse inside an event listener for window.message but that's a global event handler that receives every postMessage call, not just vimeo player specific calls.

The player logic needs to verify the origin and e.data element before attempting to parse it as JSON. What happens is your library is trying to parse undefined when another library or the site itself uses postMessage for other purposes.

You can reproduce the problem by calling window.postMessage('test'); from the dev console in a page that has the player.js api loaded.

You can fix the problem by changing the if block in the second listener in the compiled player:

var t = E(e.data);
if (t && "ready" === t.event && c(e.origin))

to something like this:

var t = c(e.origin) && E(e.data ? e.data : "{}");
if (t && "ready" === t.event)

Which will first verify the origin, but also default e.data to an empty array in the event that you have other bugs upstream.

[Stefano1964]

@agilemarcus so you are telling me that another library that i use is sending a post message? It's possible, i use a lot of library, but the problem come out recently.
@rkrishnan8594 can you confirm?

[agilemarcus]

@agilemarcus so you are telling me that another library that i use is sending a post message? It's possible, i use a lot of library, but the problem come out recently. @rkrishnan8594 can you confirm?

@Stefano1964 yeah it's in your stack trace above...

...
(anonymous) @ player.js:2
postMessage (async)
canUsePostMessage @ ViewSDKInterface.js:1
(anonymous) @ ViewSDKInterface.js:1
...

Whatever ViewSDKInterface.js is (looks like an adobe lib) it's first checking for the ability to use postMessage, and then it's sending one out, which is then being intercepted by the vimeo player. (I'm not sure why the postMessage line missing the @ source, but that's your culprit.)

I'm working on a patch for this today because we use a lot of postMessage calls in our app and this is filling up our logs with a tremendous amount of noise. I'll post it here later as a temporary workaround until the player api is patched and pushed to production.

Until then, you could also just add this to your codebase:

console.warn = () => {};

...at the risk of losing some legitimate logging info if you rely on console.warn in your codebase. The good news is that this isn't actually an error being thrown in your application as the player api catches the error and just warns about it in the console.

[rkrishnan8594]

We're working on a fix for this error, but that's unlikely to be published until next week.

[agilemarcus]

Here's the patch I ended up writing - I feel pretty confident that the rudimentary string detection will pickup just the faulty callback in the player api and nothing else.

You just need to define it in a script block that is loaded before the import for the vimeo player.js source.

/**
 * Patch window.addEventListener to work around JSON.parse in the
 * vimeo player api.
 * @ref: <https://github.com/vimeo/player.js/issues/833>
 * @license: public domain
 */
const originalAEL = window.addEventListener;
window.addEventListener = function(type, listener, options) {
    // Get the source code of the listener function
    const source = listener.toString();
    // The handler we care about has a couple strings that should
    // uniquely detect the problematic code.
    if (
        type == "message" &&
        source.includes('player\\.vimeo\\.com\\/video') &&
        source.includes('appendVideoMetadata')
    ) {
        // return a custom handler the first checks the origin
        // before trying to parse JSON
        return originalAEL(type, function(e) {
            if ((e.origin || "").includes("https://player.vimeo.com")) {
                listener(e);
            }
        }, options);
    }
    // Otherwise just use the original addEventListener
    return originalAEL(type, listener, options);
};

[Stefano1964]

@agilemarcus this make sense, i use an adobe sdk library for displaying pdf doc (https://documentcloud.adobe.com/view-sdk/main.js), thanks a lot for the explanation and yes i did not see that it was just in the stack trace
Ok @rkrishnan8594 we can wait, its' not blocking for us