Erreur de demande de Chrome: TypeError: Conversion d'une structure circulaire en JSON

J'ai ce qui suit ...

chrome.extension.sendRequest({
  req: "getDocument",
  docu: pagedoc,
  name: 'name'
}, function(response){
  var efjs = response.reply;
});

qui appelle ce qui suit ..

case "getBrowserForDocumentAttribute":
  alert("ZOMG HERE");
  sendResponse({
    reply: getBrowserForDocumentAttribute(request.docu,request.name)
  });
  break;

Cependant, mon code n'atteint jamais "ZOMG ICI" mais génère plutôt l'erreur suivante lors de l'exécution chrome.extension.sendRequest

 Uncaught TypeError: Converting circular structure to JSON
 chromeHidden.JSON.stringify
 chrome.Port.postMessage
 chrome.initExtension.chrome.extension.sendRequest
 suggestQuery

Quelqu'un at-il une idée de ce qui cause cela?

Cela signifie que l'objet que vous passez dans la demande (je suppose que c'est le cas pagedoc) a une référence circulaire, quelque chose comme:

var a = {};
a.b = a;

JSON.stringify ne peut pas convertir des structures comme celle-ci.

NB : Ce serait le cas des nœuds DOM, qui ont des références circulaires, même s'ils ne sont pas attachés à l'arborescence DOM. Chaque nœud a un ownerDocumentqui fait référence documentdans la plupart des cas. documenta une référence à l'arbre DOM au moins à travers document.bodyet document.body.ownerDocumentrenvoie à documentnouveau, ce qui est seulement une des multiples références circulaires dans l'arbre DOM.

Selon les documents JSON de Mozilla , JSON.Stringifya un deuxième paramètre censorqui peut être utilisé pour filtrer / ignorer les éléments enfants lors de l'analyse de l'arborescence. Cependant, vous pouvez peut-être éviter les références circulaires.

Dans Node.js, nous ne pouvons pas. Nous pouvons donc faire quelque chose comme ceci:

function censor(censor) {
  var i = 0;

  return function(key, value) {
    if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value) 
      return '[Circular]'; 

    if(i >= 29) // seems to be a harded maximum of 30 serialized objects?
      return '[Unknown]';

    ++i; // so we know we aren't using the original object anymore

    return value;  
  }
}

var b = {foo: {bar: null}};

b.foo.bar = b;

console.log("Censoring: ", b);

console.log("Result: ", JSON.stringify(b, censor(b)));

Le résultat:

Censoring:  { foo: { bar: [Circular] } }
Result: {"foo":{"bar":"[Circular]"}}

Malheureusement, il semble y avoir un maximum de 30 itérations avant de supposer automatiquement qu'il est circulaire. Sinon, cela devrait fonctionner. J'ai même utilisé areEquivalent d'ici , mais JSON.Stringifyjette toujours l'exception après 30 itérations. Pourtant, c'est assez bon pour obtenir une représentation décente de l'objet à un niveau supérieur, si vous en avez vraiment besoin. Peut-être que quelqu'un peut améliorer cela? Dans Node.js pour un objet de requête HTTP, j'obtiens:

{
"limit": null,
"size": 0,
"chunks": [],
"writable": true,
"readable": false,
"_events": {
    "pipe": [null, null],
    "error": [null]
},
"before": [null],
"after": [],
"response": {
    "output": [],
    "outputEncodings": [],
    "writable": true,
    "_last": false,
    "chunkedEncoding": false,
    "shouldKeepAlive": true,
    "useChunkedEncodingByDefault": true,
    "_hasBody": true,
    "_trailer": "",
    "finished": false,
    "socket": {
        "_handle": {
            "writeQueueSize": 0,
            "socket": "[Unknown]",
            "onread": "[Unknown]"
        },
        "_pendingWriteReqs": "[Unknown]",
        "_flags": "[Unknown]",
        "_connectQueueSize": "[Unknown]",
        "destroyed": "[Unknown]",
        "bytesRead": "[Unknown]",
        "bytesWritten": "[Unknown]",
        "allowHalfOpen": "[Unknown]",
        "writable": "[Unknown]",
        "readable": "[Unknown]",
        "server": "[Unknown]",
        "ondrain": "[Unknown]",
        "_idleTimeout": "[Unknown]",
        "_idleNext": "[Unknown]",
        "_idlePrev": "[Unknown]",
        "_idleStart": "[Unknown]",
        "_events": "[Unknown]",
        "ondata": "[Unknown]",
        "onend": "[Unknown]",
        "_httpMessage": "[Unknown]"
    },
    "connection": "[Unknown]",
    "_events": "[Unknown]",
    "_headers": "[Unknown]",
    "_headerNames": "[Unknown]",
    "_pipeCount": "[Unknown]"
},
"headers": "[Unknown]",
"target": "[Unknown]",
"_pipeCount": "[Unknown]",
"method": "[Unknown]",
"url": "[Unknown]",
"query": "[Unknown]",
"ended": "[Unknown]"
}

J'ai créé un petit module Node.js pour le faire ici: https://github.com/ericmuyser/stringy N'hésitez pas à améliorer / contribuer!

Une approche consiste à retirer l'objet et les fonctions de l'objet principal. Et stringify la forme plus simple

function simpleStringify (object){
    var simpleObject = {};
    for (var prop in object ){
        if (!object.hasOwnProperty(prop)){
            continue;
        }
        if (typeof(object[prop]) == 'object'){
            continue;
        }
        if (typeof(object[prop]) == 'function'){
            continue;
        }
        simpleObject[prop] = object[prop];
    }
    return JSON.stringify(simpleObject); // returns cleaned up JSON
};

J'utilise normalement le paquetage circulaire-json npm pour résoudre ce problème.

// Felix Kling's example
var a = {};
a.b = a;
// load circular-json module
var CircularJSON = require('circular-json');
console.log(CircularJSON.stringify(a));
//result
{"b":"~"}

Remarque: circular-json est obsolète, j'utilise maintenant flat (du créateur de CircularJSON):

// ESM
import {parse, stringify} from 'flatted/esm';

// CJS
const {parse, stringify} = require('flatted/cjs');

const a = [{}];
a[0].a = a;
a.push(a);

stringify(a); // [["1","0"],{"a":"0"}]

sur: https://www.npmjs.com/package/flatted

Basé sur la réponse de zainengineer ... Une autre approche consiste à faire une copie complète de l'objet et à supprimer les références circulaires et à filtrer le résultat.

function cleanStringify(object) {
    if (object && typeof object === 'object') {
        object = copyWithoutCircularReferences([object], object);
    }
    return JSON.stringify(object);

    function copyWithoutCircularReferences(references, object) {
        var cleanObject = {};
        Object.keys(object).forEach(function(key) {
            var value = object[key];
            if (value && typeof value === 'object') {
                if (references.indexOf(value) < 0) {
                    references.push(value);
                    cleanObject[key] = copyWithoutCircularReferences(references, value);
                    references.pop();
                } else {
                    cleanObject[key] = '###_Circular_###';
                }
            } else if (typeof value !== 'function') {
                cleanObject[key] = value;
            }
        });
        return cleanObject;
    }
}

// Example

var a = {
    name: "a"
};

var b = {
    name: "b"
};

b.a = a;
a.b = b;

console.log(cleanStringify(a));
console.log(cleanStringify(b));

Il ne s'agit peut-être pas d'une réponse connexe, mais ce lien Détection et correction des références circulaires en JavaScript peut être utile pour détecter les objets qui provoquent une dépendance circulaire.

Je résous ce problème sur NodeJS comme ceci:

var util = require('util');

// Our circular object
var obj = {foo: {bar: null}, a:{a:{a:{a:{a:{a:{a:{hi: 'Yo!'}}}}}}}};
obj.foo.bar = obj;

// Generate almost valid JS object definition code (typeof string)
var str = util.inspect(b, {depth: null});

// Fix code to the valid state (in this example it is not required, but my object was huge and complex, and I needed this for my case)
str = str
    .replace(/<Buffer[ \w\.]+>/ig, '"buffer"')
    .replace(/\[Function]/ig, 'function(){}')
    .replace(/\[Circular]/ig, '"Circular"')
    .replace(/\{ \[Function: ([\w]+)]/ig, '{ $1: function $1 () {},')
    .replace(/\[Function: ([\w]+)]/ig, 'function $1(){}')
    .replace(/(\w+): ([\w :]+GMT\+[\w \(\)]+),/ig, '$1: new Date("$2"),')
    .replace(/(\S+): ,/ig, '$1: null,');

// Create function to eval stringifyed code
var foo = new Function('return ' + str + ';');

// And have fun
console.log(JSON.stringify(foo(), null, 4));

J'ai rencontré la même erreur lors de la création du message ci-dessous avec jQuery. La référence circulaire se produit lors d' reviewerNameune affectation par erreur à msg.detail.reviewerName. .Val () de JQuery a résolu le problème, voir dernière ligne.

var reviewerName = $('reviewerName'); // <input type="text" id="taskName" />;
var msg = {"type":"A", "detail":{"managerReview":true} };
msg.detail.reviewerName = reviewerName; // Error
msg.detail.reviewerName = reviewerName.val(); // Fixed

J'obtenais la même erreur avec jQuery formvaliadator, mais quand j'ai supprimé un console.log dans success: function, cela a fonctionné.

Pour mon cas, j'obtenais cette erreur lorsque j'utilisais la asyncfonction côté serveur pour récupérer des documents à l'aide de mangouste. Il s'est avéré que la raison était que j'avais oublié de mettre awaitavant d'appeler la find({})méthode. L'ajout de cette partie a résolu mon problème.

Cela fonctionne et vous indique quelles propriétés sont circulaires. Il permet également de reconstruire l'objet avec les références

  JSON.stringifyWithCircularRefs = (function() {
    const refs = new Map();
    const parents = [];
    const path = ["this"];

    function clear() {
      refs.clear();
      parents.length = 0;
      path.length = 1;
    }

    function updateParents(key, value) {
      var idx = parents.length - 1;
      var prev = parents[idx];
      if (prev[key] === value || idx === 0) {
        path.push(key);
        parents.push(value);
      } else {
        while (idx-- >= 0) {
          prev = parents[idx];
          if (prev[key] === value) {
            idx += 2;
            parents.length = idx;
            path.length = idx;
            --idx;
            parents[idx] = value;
            path[idx] = key;
            break;
          }
        }
      }
    }

    function checkCircular(key, value) {
      if (value != null) {
        if (typeof value === "object") {
          if (key) { updateParents(key, value); }

          let other = refs.get(value);
          if (other) {
            return '[Circular Reference]' + other;
          } else {
            refs.set(value, path.join('.'));
          }
        }
      }
      return value;
    }

    return function stringifyWithCircularRefs(obj, space) {
      try {
        parents.push(obj);
        return JSON.stringify(obj, checkCircular, space);
      } finally {
        clear();
      }
    }
  })();

Exemple avec beaucoup de bruit supprimé:

{
    "requestStartTime": "2020-05-22...",
    "ws": {
        "_events": {},
        "readyState": 2,
        "_closeTimer": {
            "_idleTimeout": 30000,
            "_idlePrev": {
                "_idleNext": "[Circular Reference]this.ws._closeTimer",
                "_idlePrev": "[Circular Reference]this.ws._closeTimer",
                "expiry": 33764,
                "id": -9007199254740987,
                "msecs": 30000,
                "priorityQueuePosition": 2
            },
            "_idleNext": "[Circular Reference]this.ws._closeTimer._idlePrev",
            "_idleStart": 3764,
            "_destroyed": false
        },
        "_closeCode": 1006,
        "_extensions": {},
        "_receiver": {
            "_binaryType": "nodebuffer",
            "_extensions": "[Circular Reference]this.ws._extensions",
        },
        "_sender": {
            "_extensions": "[Circular Reference]this.ws._extensions",
            "_socket": {
                "_tlsOptions": {
                    "pipe": false,
                    "secureContext": {
                        "context": {},
                        "singleUse": true
                    },
                },
                "ssl": {
                    "_parent": {
                        "reading": true
                    },
                    "_secureContext": "[Circular Reference]this.ws._sender._socket._tlsOptions.secureContext",
                    "reading": true
                }
            },
            "_firstFragment": true,
            "_compress": false,
            "_bufferedBytes": 0,
            "_deflating": false,
            "_queue": []
        },
        "_socket": "[Circular Reference]this.ws._sender._socket"
    }
}

Pour reconstruire, appelez JSON.parse (), puis parcourez les propriétés à la recherche de la [Circular Reference]balise. Ensuite, coupez cela et ... évaluez ... avecthis ensemble sur l'objet racine.

N'évaluez rien qui puisse être piraté. Une meilleure pratique serait de string.split('.')rechercher ensuite les propriétés par nom pour définir la référence.