When a cookie's length is longer than the browser's cookie length limit, it silently fails

[T-Agena]

Description

I was using a movie API to retrieve data for a movie and add data that as a cookie. However after adding multiple movies, eventually I was unable to add more. At that time, there were no error messages in either the browser or the console. Only after checking the cookies in the developer tools did I realize that I was not able to add the cookies due to the cookie capacity limit. I think it would be better if something happened (such as a message in the console) to show that it was unable to add a cookie due to the length

Environment

visual studio code: 1.78.2
browser: microsoft Edge, version:114.0.1823.37
react: 18.2.0
node: 16.19.0
react-use-cookie:1.4.0

You can recreate this by running,

npx create-react-app,

And updating App.js as below. Press the button to add the cookie untilt he length is exceeded.

import React from "react";
import useCookie from "react-use-cookie";
import "./App.css";

function App() {
  const [rawMovieCookie, setMovieCookie] = useCookie("data", "[]");
  const movieCookie = JSON.parse(rawMovieCookie);
  const movieData = [
    {
      propaty1: "sample1",
      propaty2: "sample2",
      propaty3: "sample3",
      propaty4: "sample4",
      propaty5: "sample5",
      propaty6: "sample6",
      propaty7:
        "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン",
      propaty8: "sample7",
      propaty9:
        "いろはにほへとちりぬるをわかよたれそつねならむういのおくやまけふこえてあさきゆめみしよひもせす",
      propaty10: "sample8",
    },
  ];

  const handleCheck = () => {
    let data = [];
    data = [...movieCookie, movieData];
    setMovieCookie(JSON.stringify(data));
    console.log(data);
  };
  return (
    <div>
      <button onClick={handleCheck}>Save</button>
    </div>
  );
}

export default App;

The following is an example of the data stored in the cookies,

%5B%5B%7B%22propaty1%22%3A%22%2Fsample1.jpg%22%2C%22propaty2%22%3A%22sample2%22%2C%22propaty3%22%3A%22sample3%22%2C%22propaty4%22%3A%22sample4%22%2C%22propaty5%22%3A%22sample5%22%2C%22propaty6%22%3A%22sample6%22%2C%22propaty7%22%3A%22%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A%E3%81%8B%E3%81%8D%E3%81%8F%E3%81%91%E3%81%93%E3%81%95%E3%81%97%E3%81%99%E3%81%9B%E3%81%9D%E3%81%9F%E3%81%A1%E3%81%A4%E3%81%A6%E3%81%A8%E3%81%AA%E3%81%AB%E3%81%AC%E3%81%AD%E3%81%AE%E3%81%AF%E3%81%B2%E3%81%B5%E3%81%B8%E3%81%BB%E3%81%BE%E3%81%BF%E3%82%80%E3%82%81%E3%82%82%E3%82%84%E3%82%86%E3%82%88%E3%82%89%E3%82%8A%E3%82%8B%E3%82%8C%E3%82%8D%E3%82%8F%E3%82%92%E3%82%93%E3%82%A2%E3%82%A4%E3%82%A6%E3%82%A8%E3%82%AA%E3%82%AB%E3%82%AD%E3%82%AF%E3%82%B1%E3%82%B3%E3%82%B5%E3%82%B7%E3%82%B9%E3%82%BB%E3%82%BD%E3%82%BF%E3%83%81%E3%83%84%E3%83%86%E3%83%88%E3%83%8A%E3%83%8B%E3%83%8C%E3%83%8D%E3%83%8E%E3%83%8F%E3%83%92%E3%83%95%E3%83%98%E3%83%9B%E3%83%9E%E3%83%9F%E3%83%A0%E3%83%A1%E3%83%A2%E3%83%A4%E3%83%A6%E3%83%A8%E3%83%A9%E3%83%AA%E3%83%AB%E3%83%AC%E3%83%AD%E3%83%AF%E3%83%B2%E3%83%B3%22%2C%22propaty8%22%3A%22sample7%22%2C%22propaty9%22%3A%22%E3%81%84%E3%82%8D%E3%81%AF%E3%81%AB%E3%81%BB%E3%81%B8%E3%81%A8%E3%81%A1%E3%82%8A%E3%81%AC%E3%82%8B%E3%82%92%E3%82%8F%E3%81%8B%E3%82%88%E3%81%9F%E3%82%8C%E3%81%9D%E3%81%A4%E3%81%AD%E3%81%AA%E3%82%89%E3%82%80%E3%81%86%E3%81%84%E3%81%AE%E3%81%8A%E3%81%8F%E3%82%84%E3%81%BE%E3%81%91%E3%81%B5%E3%81%93%E3%81%88%E3%81%A6%E3%81%82%E3%81%95%E3%81%8D%E3%82%86%E3%82%81%E3%81%BF%E3%81%97%E3%82%88%E3%81%B2%E3%82%82%E3%81%9B%E3%81%99%22%2C%22propaty10%22%3A%22sample8%22%7D%5D%5D

Expected Result

I'd expect some kind of message when the cookie limit is reached and no save is possible.

Actual Result

Encoded data is stored in the cookie. Since it is roughly 1.5 kB, adding data three times will exceed the cookie limit of 4 kB. If you do it a third time and look at the cookie, you will see that only two times' worth of data is stored.

[MichaelCharles]

I think what is particularly problematic about this is that it fails to save the cookie, but it will still update the state of the page as though the cookie was saved.

I feel like either it should only show what it was actually able to save in the cookie, or there should at least be like... a console.error("Cookie storage length exceeded.") type of message. Or both.