Requesting a large number of icons in a custom collection results in 431 / 414

Open
#539 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
65/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
nuxt, typescript
Domain
frontend

Research direction

Start by inspecting dist/runtime/plugin.js and the customIconLoader path described in the issue. Reproduce the icon picker request with roughly 1,500 icons, then verify that the requests stay within URL limits and the combined response retains the expected prefix and icons without 431 or 414 errors.

Written by the indexing model from the issue text.

Description

I included Fontawesome v5 as a custom collection and for most parts of the project, only statically known icons are used which get bundled in the client bundle. however, there is an icon picker which needs all icons loaded. thus, the client sends a single request with ~1500 icons to the server route. as it is a GET request, this exceeds some server limits. I saw both 431 (Request Header Fields Too Large) and 414 (URI Too Long).

However, I am able to work around this by patching @nuxt/icon. It is not a polished implementation as it has a hardcoded chunk size and a possibly-faulty reduce e.g. when prefix differs across requests.
Another solution would be to use a different method and send the icons via body, but I assume this makes caching a lot harder.

diff --git a/dist/runtime/plugin.js b/dist/runtime/plugin.js
index f28e510a0241337ccd4faec7e0cb70a0185ad6de..df38295bc45dc8f7bc4e7bedfb007459b8bf6e85 100644
--- a/dist/runtime/plugin.js
+++ b/dist/runtime/plugin.js
@@ -25,11 +25,22 @@ export default defineNuxtPlugin({
     }
     async function customIconLoader(icons, prefix) {
       try {
-        const data = await requestFetch(resources[0] + "/" + prefix + ".json", {
-          query: {
-            icons: icons.join(",")
-          }
-        });
+        // when requesting many icons, split request into several to prevent too long header values / uri (431 / 414)
+        const chunkSize = 1000;
+        const requests = [];
+        while (requests.length * chunkSize < icons.length) {
+          const chunk = icons.slice(requests.length * chunkSize, (requests.length + 1) * chunkSize).join(",");
+          requests.push(requestFetch(resources[0] + "/" + prefix + ".json", {
+            query: {
+              icons: chunk
+            }
+          }));
+        }
+        const data = (await Promise.all(requests))
+          .reduce((acc, item) => ({
+              ...acc,
+              icons: {...acc.icons, ...item.icons},
+            }));
         if (!data || data.prefix !== prefix || !data.icons)
           throw new Error("Invalid data" + JSON.stringify(data));
         return data;
Dominant language
TypeScript
Stars
1.2k
Forks
96
Avg merge
8h 12m
Merged PRs (30d)
2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nuxt/icon

All issues in nuxt/icon

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.