[🐛 Bug]:the frontend container (keep-frontend-dev-1) throws a TypeError: localStorage.getItem is not a function.

[tingfeng-6]

Describe the bug When accessing localhost:3000, the frontend container (keep-frontend-dev-1) throws a TypeError: localStorage.getItem is not a function.

To Reproduce 1、Deploy the development version locally for the first time: run git clone https://github.com/keephq/keep.git && cd keep 2、Execute docker compose -f docker-compose.dev.yml up 3、Access localhost:3000 4、The interface shows a 500 error, and the frontend container logs display "TypeError: localStorage.getItem is not a function".

Expected behavior The UI homepage should load correctly.

Screenshots keep-frontend-dev-1 | ○ Compiling middleware ...
keep-frontend-dev-1 | ✓ Compiled middleware in 2.3s
keep-frontend-dev-1 | ✓ Ready in 11.7s
keep-frontend-dev-1 | ⚠ Webpack is configured while Turbopack is not, which may cause problems.
keep-frontend-dev-1 | ⚠ See instructions if you need to configure Turbopack:
keep-frontend-dev-1 | https://nextjs.org/docs/app/api-reference/next-config-js/turbo
keep-frontend-dev-1 |
keep-frontend-dev-1 | Auth debug mode enabled
keep-frontend-dev-1 | Auth config: {
keep-frontend-dev-1 | debug: true,
keep-frontend-dev-1 | trustHost: true,
keep-frontend-dev-1 | providers: [
keep-frontend-dev-1 | {
keep-frontend-dev-1 | id: 'credentials',
keep-frontend-dev-1 | name: 'Credentials',
keep-frontend-dev-1 | type: 'credentials',
keep-frontend-dev-1 | credentials: {},
keep-frontend-dev-1 | authorize: [Function: authorize],
keep-frontend-dev-1 | options: { name: 'NoAuth', credentials: {}, authorize: [Function: authorize] }
keep-frontend-dev-1 | }
keep-frontend-dev-1 | ],
keep-frontend-dev-1 | pages: { signIn: '/signin', error: '/error' },
keep-frontend-dev-1 | session: { strategy: 'jwt', maxAge: 2592000 },
keep-frontend-dev-1 | callbacks: {
keep-frontend-dev-1 | authorized: [Function: authorized],
keep-frontend-dev-1 | jwt: [Function: jwt],
keep-frontend-dev-1 | session: [Function: session]
keep-frontend-dev-1 | }
keep-frontend-dev-1 | }
keep-frontend-dev-1 | [auth][warn][debug-enabled] Read more: https://warnings.authjs.dev
keep-frontend-dev-1 | Redirecting /incidents to signin page because user is not authenticated
keep-frontend-dev-1 | Allowing request to pass through http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fincidents
keep-frontend-dev-1 | Request URL: http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fincidents
keep-frontend-dev-1 | ○ Compiling /signin ...
keep-frontend-dev-1 | Browserslist: browsers data (caniuse-lite) is 8 months old. Please run:
keep-frontend-dev-1 | npx update-browserslist-db@latest
keep-frontend-dev-1 | Why you should do it regularly: https://github.com/browserslist/update-db#readme
keep-frontend-dev-1 | ✓ Compiled /signin in 37.4s
keep-frontend-dev-1 | Auth debug mode enabled
keep-frontend-dev-1 | Auth config: {
keep-frontend-dev-1 | debug: true,
keep-frontend-dev-1 | trustHost: true,
keep-frontend-dev-1 | providers: [
keep-frontend-dev-1 | {
keep-frontend-dev-1 | id: 'credentials',
keep-frontend-dev-1 | name: 'Credentials',
keep-frontend-dev-1 | type: 'credentials',
keep-frontend-dev-1 | credentials: {},
keep-frontend-dev-1 | authorize: [Function: authorize],
keep-frontend-dev-1 | options: [Object]
keep-frontend-dev-1 | }
keep-frontend-dev-1 | ],
keep-frontend-dev-1 | pages: { signIn: '/signin', error: '/error' },
keep-frontend-dev-1 | session: { strategy: 'jwt', maxAge: 2592000 },
keep-frontend-dev-1 | callbacks: {
keep-frontend-dev-1 | authorized: [Function: authorized],
keep-frontend-dev-1 | jwt: [AsyncFunction: jwt],
keep-frontend-dev-1 | session: [AsyncFunction: session]
keep-frontend-dev-1 | }
keep-frontend-dev-1 | }
keep-frontend-dev-1 | Starting Keep frontend with auth type: undefined
keep-frontend-dev-1 | (node:47) Warning: --localstorage-file was provided without a valid path
keep-frontend-dev-1 | (Use node --trace-warnings ... to show where the warning was created)
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function] {
keep-frontend-dev-1 | digest: '3736255684'
keep-frontend-dev-1 | }
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function] { page: '/signin' }
keep-frontend-dev-1 | ○ Compiling /_error ...
keep-frontend-dev-1 | ✓ Compiled /_error in 3.4s
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function] { page: '/signin' }
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | GET /signin?callbackUrl=http://localhost:3000/incidents 500 in 42220ms
keep-frontend-dev-1 | GET /signin?callbackUrl=http://localhost:3000/incidents 500 in 25ms
keep-frontend-dev-1 | Redirecting /incidents to signin page because user is not authenticated
keep-frontend-dev-1 | Allowing request to pass through http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fincidents
keep-frontend-dev-1 | Request URL: http://localhost:3000/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fincidents
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function] {
keep-frontend-dev-1 | digest: '3736255684'
keep-frontend-dev-1 | }
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function] { page: '/signin' }
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function] { page: '/signin' }
keep-frontend-dev-1 | [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | ⨯ unhandledRejection: [TypeError: localStorage.getItem is not a function]
keep-frontend-dev-1 | GET /signin?callbackUrl=http://localhost:3000/incidents 500 in 688ms
keep-frontend-dev-1 | GET /signin?callbackUrl=http://localhost:3000/incidents 500 in 17ms
keep-frontend-dev-1 | ○ Compiling /favicon.ico ...
keep-frontend-dev-1 | ✓ Compiled /favicon.ico in 1116ms
keep-frontend-dev-1 | GET /favicon.ico 200 in 1386ms .

Additional context Environment: Windows 11, Docker Desktop, WSL2, Chrome.

[dosubot[bot]]

Hi @tingfeng-6! I'm Dosu and I’m helping the keep team.

The error happens because localStorage is being accessed in a server-side (Node.js) context, which isn't supported—localStorage is only available in browsers. In the Keep frontend, some hooks or utilities (like useLocalStorage) call localStorage.getItem without checking if the code is running client-side, causing the crash during server-side rendering or in Docker containers. This is a known issue in React/Next.js apps and has caused related bugs before (example).

To avoid this, always guard localStorage access with a check like:

if (typeof window !== 'undefined' && typeof localStorage !== 'undefined') {
  // Safe to use localStorage here
  localStorage.getItem('yourKey');
}

Any code that uses localStorage should only run in the browser, not on the server. Review shared hooks/utilities and ensure they include this check before accessing localStorage. This will prevent the TypeError and allow the UI to load correctly in all environments.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}