N
Nuxt•3mo ago
Fleny

[Nuxt Devtools] fail on string-serialized bigint

Hi! I'm currently getting an error in my console when i try to display in the payload tab of the devtools a string which contains a bigint value serialized as string (due to JSON limitations & JS Number limits) Repro of the issue: - open https://stackblitz.com/edit/github-guforx?file=app.vue - open the devtools - go on the payload tab - try to see the value of "myId" - an error similar to the one in the screenshot should be in the console I tried to investigate a bit the error, here is what i have found it is helpful: The error is from Destr, however it gets called by another func that i cannot understood from what dependency it is from, provably @nuxt/devtools itself?. To me it seems that the function Jw in the minimized code (that uses a regex to check if the string is a number in a string form) is returning true, however Destr doing the same check returns false as the Destr Regexp for handling number has a limit of 16/17 chars provably due to JSON.parse going to truncate the number if left unchecked. Adding anything to make Jw fail it's regex test fixes the error. as the value is then returned as is by another function in the callstack My guess is this is for the display of numbers as numbers instead of strings in the devtools causing this issue with a bigint
No description
1 Reply
Fleny
FlenyOP•3mo ago
for reference from the erroring file: 
function Jw(t) {
    return uee.test(t)
}
var uee = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/;

/// ....

// e.parse refers to tle, which seems to match destr safeDestr function

function nf(t, e) {
    if (t === "")
        return "";
    var n = t.trim();
    return n === "null" ? null : n === "true" || n !== "false" && (Jw(n) ? e.parse(n) : t)
}

/// ...

function nm(t, e={}) {
    if (typeof t != "string")
        return t;
    const n = t.trim();
    if (t[0] === '"' && t.endsWith('"') && !t.includes("\\"))
        return n.slice(1, -1);
    if (n.length <= 9) {
        const r = n.toLowerCase();
        if (r === "true")
            return !0;
        if (r === "false")
            return !1;
        if (r === "undefined")
            return;
        if (r === "null")
            return null;
        if (r === "nan")
            return Number.NaN;
        if (r === "infinity")
            return Number.POSITIVE_INFINITY;
        if (r === "-infinity")
            return Number.NEGATIVE_INFINITY
    }
    if (!Xae.test(t)) {
        if (e.strict)
            throw new SyntaxError("[destr] Invalid JSON");
        return t
    }
    try {
        if (Yae.test(t) || Qae.test(t)) {
            if (e.strict)
                throw new Error("[destr] Possible prototype pollution");
            return JSON.parse(t, Zae)
        }
        return JSON.parse(t)
    } catch (r) {
        if (e.strict)
            throw r;
        return t
    }
}
function tle(t, e={}) {
    return nm(t, {
        ...e,
        strict: !0
    })
}
function Jw(t) {
    return uee.test(t)
}
var uee = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/;

/// ....

// e.parse refers to tle, which seems to match destr safeDestr function

function nf(t, e) {
    if (t === "")
        return "";
    var n = t.trim();
    return n === "null" ? null : n === "true" || n !== "false" && (Jw(n) ? e.parse(n) : t)
}

/// ...

function nm(t, e={}) {
    if (typeof t != "string")
        return t;
    const n = t.trim();
    if (t[0] === '"' && t.endsWith('"') && !t.includes("\\"))
        return n.slice(1, -1);
    if (n.length <= 9) {
        const r = n.toLowerCase();
        if (r === "true")
            return !0;
        if (r === "false")
            return !1;
        if (r === "undefined")
            return;
        if (r === "null")
            return null;
        if (r === "nan")
            return Number.NaN;
        if (r === "infinity")
            return Number.POSITIVE_INFINITY;
        if (r === "-infinity")
            return Number.NEGATIVE_INFINITY
    }
    if (!Xae.test(t)) {
        if (e.strict)
            throw new SyntaxError("[destr] Invalid JSON");
        return t
    }
    try {
        if (Yae.test(t) || Qae.test(t)) {
            if (e.strict)
                throw new Error("[destr] Possible prototype pollution");
            return JSON.parse(t, Zae)
        }
        return JSON.parse(t)
    } catch (r) {
        if (e.strict)
            throw r;
        return t
    }
}
function tle(t, e={}) {
    return nm(t, {
        ...e,
        strict: !0
    })
}

Did you find this page helpful?