apollo-client-devtools: Uncaught DOMException: Failed to execute 'postMessage' on 'Window' #1879

Guys, I found a solution! Disable Apollo-client-devtools and viola, no more junk spewed into the console…haha. But seriously, hugely annoying bug – I’m disabling it until this is fixed.

@barbalex but then I couldn’t get nice messages like yours

@ramyanaga This is causing a fatal issue in my app whenever we get an error from our GraphQL server (An error where the HTTP response code is 200, but the response contains an errors property). As far as I can tell, the root of the issue is that ApolloClient dispatches 1 an instance of Error (since ApolloError extends Error 2) to Redux. Error objects are not able to be sent via window.postMessage 3. I don’t believe there is anything I can do on the app side to prevent or solve this other than to not use the Apollo DevTools.

Hey guys, I am also experiencing this issue when sending encoded json as a string.

Request payload:

{
    "operationName": "submitQuestionnaire",
    "query": "mutation submitQuestionnaire($questionnaireId: Int!, $answers: [ParticipantAnswerInputType]!, $demographicAnswers: [DemographicParticipantAnswer]!) {\n  submitQuestionnaire(questionnaireId: $questionnaireId, answers: $answers, demographicAnswers: $demographicAnswers)\n}\n",
    "variables": {
        "answers": [
            {
                "questionId": 1,
                "timeout": false,
                "value": "1"
            },
            {
                "questionId": 2,
                "timeout": false,
                "value": "1"
            },
            {
                "questionId": 3,
                "timeout": false,
                "value": "2"
            },
            {
                "questionId": 4,
                "timeout": false,
                "value": "1"
            },
            {
                "questionId": 5,
                "timeout": false,
                "value": "\"PLUS\""
            },
            {
                "questionId": 6,
                "timeout": false,
                "value": "\"MINUS\""
            },
            {
                "questionId": 7,
                "timeout": false,
                "value": "\"PLUS_PLUS\""
            },
            {
                "questionId": 8,
                "timeout": false,
                "value": "\"MINUS_MINUS\""
            },
            {
                "questionId": 9,
                "timeout": false,
                "value": "1"
            },
            {
                "questionId": 10,
                "timeout": false,
                "value": "2"
            },
            {
                "questionId": 11,
                "timeout": false,
                "value": "1"
            },
            {
                "questionId": 12,
                "timeout": false,
                "value": "2"
            },
            {
                "questionId": 13,
                "timeout": false,
                "value": "\"MINUS_MINUS\""
            },
            {
                "questionId": 14,
                "timeout": false,
                "value": "\"PLUS_PLUS\""
            },
            {
                "questionId": 15,
                "timeout": false,
                "value": "\"PLUS\""
            },
            {
                "questionId": 16,
                "timeout": false,
                "value": "\"MINUS\""
            }
        ],
        "demographicAnswers": [],
        "questionnaireId": 1
    }
}

Relevant types:

type ParticipantAnswerInputType {
  questionId: Int!
  timeout: Boolean!
  value: String! # Processed with JSON.stringify
}

type DemographicParticipantAnswer {
  demographicElementId: Int!
  value: String! # Processed with JSON.stringify
}

Error Messages:

DOMException: Failed to execute 'postMessage' on 'Window': function ROOT() {} could not be cloned.
    at ApolloClient.hookLogger [as devToolsHookCb] (<anonymous>:20:14)
    at http://localhost:4202/assets/vendor.js:86772:27
    at Object.dispatch (http://localhost:4202/assets/vendor.js:78180:16)
    at QueryManager.mutate (http://localhost:4202/assets/vendor.js:86942:20)
    at ApolloClient.mutate (http://localhost:4202/assets/vendor.js:86730:34)
    at http://localhost:4202/assets/vendor.js:119155:22
    at initializePromise (http://localhost:4202/assets/vendor.js:68589:7)
    at new Promise (http://localhost:4202/assets/vendor.js:69073:33)
    at Class.mutate (http://localhost:4202/assets/vendor.js:119154:28)
    at Class.mutate (http://localhost:4202/assets/sum.bundle.js:113:27)

DOMException: Failed to execute 'postMessage' on 'Window': function ROOT() {} could not be cloned.
    at ApolloClient.hookLogger [as devToolsHookCb] (<anonymous>:20:14)
    at http://localhost:4202/assets/vendor.js:86772:27
    at Object.dispatch (http://localhost:4202/assets/vendor.js:78180:16)
    at http://localhost:4202/assets/vendor.js:86970:29
    at <anonymous>

The “JSON” field are stringified before so AFAIK this should not have any custom behaviour. I will try to set up a reproduction repo.

@tnrich yep that’s the line in particular. I’ll try adding that line to give better error messages, but ideally I’d just stringify and unstringify the object within the app. Also, are you running the most recent version of the devtools (2.0.2)? I created a test app that uses response.clone() in afterware, but I don’t seem to be having a problem

Are you trying to post objects that are not Json-serializable? If so, this is the same issue as #58