Troubleshooting

March 5, 2026 · View on GitHub

Common issues and solutions for jordium-gantt-vue3.

Table of Contents

Issue #13: High Memory Usage / Browser Freeze with Large Datasets

Labels: performance, answer
Status: ✅ Resolved
Issue: #13 Memory leak and high CPU use → converted to Discussion #16

Symptoms

When loading ~80+ tasks, the page becomes severely sluggish, memory grows continuously, and the browser may crash.

Root Cause

The problem is not in the component itself, but in how the caller binds data:

  1. Using reactive to deeply wrap the task array — Vue creates deep watchers for every object in the array. With a large dataset, the number of watchers explodes and memory can exceed 10 GB.
  2. Incorrect date format — The API returns ISO datetime strings (e.g. "2026-03-07T08:34:00.230"), but the component expects plain date strings ("2026-03-07").

Solution (credit: @eldrift)

1. Use shallowRef instead of reactive to store the task list

// ❌ Wrong — deep reactivity, performance disaster
const data = reactive({ tasks: [] as Task[] })

// ✅ Correct — Vue only watches the array reference, not each object deeply
const tasks = shallowRef<Task[]>([])

2. Truncate ISO datetime strings to plain date format

tasks.value = res.data.map((t: Task) => ({
  ...t,
  startDate: t.startDate?.substring(0, 10) ?? t.startDate,
  endDate:   t.endDate?.substring(0, 10)   ?? t.endDate,
}))

3. Use the correct Task type

Ensure the data passed to the component conforms to the Task interface to avoid hidden computation overhead from type mismatches.

References

Feedback

If you encounter an issue not listed here, feel free to submit one: