`too many function arguments` when returning large datasets from `+page.server.js`

[jwsinner]

Describe the bug

When loading large amounts of data, it's possible for $page.data to get choked up with too many function arguments. If the page is navigated to via a link, then the page itself will show a 500 error with the message too many function arguments but nothing will show in the server logs. If the page is hit directly, or refreshed after getting the 500 error the data will display, but javascript functionality is broken.

Reproduction

Reproduction Repo with a data.json file simulating the data causing the issue. Once the project is running, clicking the Monitor link in the header will navigate to the page causing the issue. Refreshing the page once the 500 error pops up should reproduce the displayed data but broken javascript issue.

Logs

Browser console: `Uncaught SyntaxError: too many function arguments`
No server errors were logged.

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-3350P CPU @ 3.10GHz
    Memory: 2.94 GB / 15.93 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 105.0.5195.102
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.63)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.71
    @sveltejs/kit: next => 1.0.0-next.463
    svelte: ^3.46.0 => 3.49.0
    vite: ^3.1.0-beta.1 => 3.1.0-beta.1

Severity

blocking an upgrade

Additional Information

This issue only popped up once the props got moved into $page.data. Prior to the update there was no issue because SvelteKit was just dumping the raw data onto the page without trying to manage it in a store.

[PatrickG]

This seems to be a problem with devalue. https://stackoverflow.com/a/22747272

[benmccann]

Suggestion from Rich:

A lot of times it will create function arguments unnecessarily — it should probably only happen for non-primitives. That would buy us some time ahead of a more comprehensive fix.

[jwsinner]

Doesn't this still create an issue for large datasets if it's creating a function to handle incoming data? What are the consequences of keeping an optional props object available to allow data to bypass devalue if it's coming from a trusted source?

[PatrickG]

A quick fix might be to pass an array to the function, with destructuring the difference would be four chars ([][]). But I don't know if there is a max array size and I don't know if devalue supports browser that don't support destructuring. ~~Also, does devalue "dedupe" primitives?~~ yes

Edit: https://stackoverflow.com/a/6155063

However, the maximum length of an array according to the ECMA-262 5th Edition specification is bound by an unsigned 32-bit integer due to the ToUint32 abstract operation, so the longest possible array could have 232-1 = 4,294,967,295 = 4.29 billion elements.