fix: prevent localStorage circular reference in track serialization
Explicitly whitelist track fields when saving to localStorage to prevent DOM element references (HTMLButtonElement with React fiber) from being serialized. This fixes the circular structure JSON error. Changes: - Changed from spread operator exclusion to explicit field whitelisting - Ensured track.name is always converted to string - Only serialize Track interface fields that should be persisted 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -33,7 +33,20 @@ export function useMultiTrack() {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
try {
|
||||
const trackData = tracks.map(({ audioBuffer, ...track }) => track);
|
||||
// Only save serializable fields, excluding audioBuffer and any DOM references
|
||||
const trackData = tracks.map((track) => ({
|
||||
id: track.id,
|
||||
name: String(track.name || 'Untitled Track'),
|
||||
color: track.color,
|
||||
height: track.height,
|
||||
volume: track.volume,
|
||||
pan: track.pan,
|
||||
mute: track.mute,
|
||||
solo: track.solo,
|
||||
recordEnabled: track.recordEnabled,
|
||||
collapsed: track.collapsed,
|
||||
selected: track.selected,
|
||||
}));
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(trackData));
|
||||
} catch (error) {
|
||||
console.error('Failed to save tracks to localStorage:', error);
|
||||
|
||||
Reference in New Issue
Block a user