Summary

The frontend codebase has inconsistent localStorage usage patterns that need improvement for better stability and maintainability.

Problems Identified

1. SSR-Unsafe Module-Level localStorage Access (Critical)

Several zustand slices read localStorage at module initialization time:

• web/app/components/workflow/store/workflow/layout-slice.ts
• web/app/components/workflow/store/workflow/workflow-slice.ts
• web/app/components/workflow/store/workflow/panel-slice.ts

This breaks in Next.js SSR/Edge Runtime and causes hydration mismatches.

2. Missing Error Handling (High Risk)

Most localStorage calls lack try-catch, which can cause runtime crashes in:

• Safari private browsing mode
• Embedded iframe contexts
• Storage quota exceeded scenarios

3. Scattered Storage Keys (Maintenance Burden)

Storage keys are hardcoded strings scattered throughout the codebase, making them hard to track and prone to naming conflicts.

References

• Zustand Persist Docs
• Zustand SSR Discussion