Fehlerbehebung

Diese Fehlermodi stammen aus derselben versionierten Wissensbasis wie diagnose_chart. Beginnen Sie mit dem Symptom, das der Anwendung am nächsten kommt, führen Sie die Diagnoseprüfung durch und wenden Sie nur Behebungen an, die den dokumentierten Lifecycle und den Vertrag zur Besitzverhältnisse von Typed-Arrays erhalten.

Wenn kein Eintrag passt, prüfen Sie das betreffende Symbol in der verschachtelten API‑Referenz oder bitten Sie den lokalen MCP‑Server um eine gezielte Diagnose. Reduzieren Sie die Reproduktion nur als Diagnose‑Schritt auf renderMode: "main" und animated: false, nicht als automatische Produktionskonfiguration.

Symptomindex

Das Canvas ist leer oder hat die Größe null

Gilt für: line, stock.

Symptom. Das Diagramm initialisiert ohne sichtbare Fehlermeldung, aber es erscheint keine Darstellung oder das Canvas ist null Pixel hoch.

Wahrscheinliche Ursache. Der Canvas-Host hatte keine konkrete Höhe, als der Renderer initialisiert wurde.

Prüfen Sie

• Untersuchen Sie den Host und das Canvas mit getBoundingClientRect(); sowohl Breite als auch Höhe müssen größer als null sein.
• Prüfen Sie, ob ein Flex‑ oder Grid‑Ahnenelement die Zeile der Chart collapse hat.

Beheben

• Geben Sie dem Host vor dem Aufruf von initialize() eine konkrete Höhe oder min‑height.
• Lassen Sie das Canvas dieses Host‑Element ausfüllen, statt sich auf intrinsische Canvas‑Abmessungen zu verlassen.

Geben Sie dem Chart einen messbaren Host

.chart-host {
  position: relative;
  width: 100%;
  height: clamp(20rem, 55vh, 34rem);
}

.chart-host > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

Daten werden gesetzt, bevor das Chart bereit ist

Gilt für: line, stock.

Symptom. Der erste Datensatz erscheint nicht, während eine spätere Aktualisierung oder ein erneutes Einhängen funktioniert.

Wahrscheinliche Ursache. Eine einfache Integration rief eine Datenmethode auf, bevor initialize() abgeschlossen war, oder initialisierte dasselbe Canvas mehr als einmal.

Überprüfen

• Stellen Sie sicher, dass initialize() genau einmal pro Chart-Instanz awaited wird.
• Wenn ein Framework die View verwaltet, verwenden Sie vorzugsweise den offiziellen Adapter, damit Mount- und Unmount-Reihenfolge für Sie gehandhabt wird.
• Die Adapter‑Bereitschaft wird einmal nach der Initialisierung und nach dem ersten erfolgreichen Batch von Daten-, Erscheinungs- und Viewport‑Props ausgelöst; sie ist keine Benachrichtigung über einen gerenderten Frame.

Beheben

• Warten Sie auf initialize(), bevor Sie setData() oder setMultiSeriesData() aufrufen.
• Zerstören Sie das alte Chart, bevor Sie dessen Canvas für eine andere Instanz wiederverwenden.
• Bei einer abgelehnten Adapter‑Prop‑Installation liefern Sie korrigierte Props nach, um einen erneuten Versuch ohne Remount durchzuführen. Bereits erfolgreich installierte Daten werden nicht erneut übertragen. Ein endgültiges Renderer‑Versagen erfordert einen Remount.

Verwenden Sie den Standard‑Lebenszyklus in der folgenden Reihenfolge

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();
chart.setData(data);

// Call this when the view is permanently removed.
export function disposeChart() {
  chart.destroy();
}

Worker‑Rendering fällt auf den Hauptthread zurück

Gilt für: line, stock.

Symptom. Ein Chart funktioniert, rendert jedoch im Hauptthread, oder die Konstruktion des Workers schlägt nur in der Produktion fehl.

Wahrscheinliche Ursache. Ein Worker, OffscreenCanvas, transferControlToOffscreen oder die bereitgestellte Content Security Policy verhinderten das Starten des Worker-Renderers.

Prüfen Sie

• Verwenden Sie vorübergehend setStatsCallback() und prüfen Sie die Statistik.renderMode.
• Prüfen Sie die Browser-Konsole und die Content-Security-Policy-Direktive für worker-src.

Beheben

• Belassen Sie renderMode auf auto, es sei denn, zur Diagnose ist das Erzwingen eines Modus erforderlich.
• Erlauben Sie die von der Anwendung erzeugte Worker-URL in worker-src und halten Sie den Fallback im Hauptthread funktionsfähig.

Den aufgelösten Renderer bestätigen

chart.setStatsCallback((stats) => {
  console.info("Sixtyfold renderer:", stats.renderMode);
  chart.setStatsCallback(null);
});

Typisierte Arrays werden nach setData getrennt

Gilt für: line, stock.

Symptom. Ein Quell‑Typed‑Array hat nach Übergabe von Daten an ein von einem Worker unterstütztes Diagramm byteLength 0 oder ist nicht mehr lesbar.

Wahrscheinliche Ursache. Massendaten von Charts werden im Worker‑Modus an den Renderer übertragen; übertragene ArrayBuffers verlassen den Aufrufer.

Prüfen

• Untersuchen Sie byteLength unmittelbar vor und nach dem Aufruf der Massendaten.
• Bestätigen Sie, ob ein anderes Teilsystem tatsächlich eine lesbare Kopie behalten muss.

Beheben

• Behandeln Sie den Bulk‑Datenaufruf als Eigentumsübertragung.
• Klonen Sie nur die Spalten, die ein anderes Subsystem behalten muss; vermeiden Sie standardmäßig das Duplizieren von Datensätzen mit mehreren Millionen Werten.

Behalten Sie eine vorsätzliche Anwendungs‑Kopie bei

const retainedX = sourceX.slice();
const retainedY = sourceY.slice();

chart.setData({
  x: sourceX,
  y: sourceY,
  length: sourceX.length,
});

// retainedX and retainedY remain readable.

Die Zeitachse ist komprimiert, leer oder weit in der Zukunft

Gilt für: line, stock.

Symptom. Tick‑Marken zeigen unplausible Daten, der sichtbare Bereich kollabiert oder das Verschieben (Panning) verhält sich unvorhersehbar.

Wahrscheinliche Ursache. Die X‑Spalte verwendete Sekunden oder Strings statt endlicher, geordneter Epoch‑Millisekunden, oder die Beobachtungen waren nicht sortiert.

Überprüfen

• Überprüfen Sie die ersten und letzten Zeitstempel und konvertieren Sie sie mit new Date(value).
• Stellen Sie sicher, dass jeder Zeitstempel endlich ist. Beim Streaming von Kursdaten müssen Zeitstempel innerhalb jedes Batches und nach jedem zuvor in die Warteschlange gestellten oder angehängten Kerzen strikt ansteigen.
• Unterscheiden Sie Streaming von statischen StockChart.setData(): statische Daten können monoton aufsteigend oder absteigend sein und gleiche Zeitstempel enthalten; das Chart normalisiert deren Reihenfolge.

Fehlerbehebung

• Epoch‑Sekunden vor dem Erstellen des Float64Array in Millisekunden umrechnen.
• ISO‑Datumswerte bereits während der Ingestion einmal parsen und vollständige Beobachtungen sortieren, bevor sie in Spalten aufgeteilt werden.
• Strombasierte Beobachtungen für Aktien vor dem Anhängen deduplizieren. Streaming‑Anhänge aktualisieren keine vorhandene Kerze mit identischem Zeitstempel.

Zeitstempel während der Aufnahme normalisieren

const timestamp = Float64Array.from(rows, (row) => {
  const value = Date.parse(row.recordedAt);
  if (!Number.isFinite(value)) throw new TypeError("Invalid recordedAt value");
  return value;
});

Spalten haben unterschiedliche Längen oder ungültige numerische Werte

Gilt für: line, stock.

Symptom. Das Chart lehnt einen Datensatz ab, wird unerwartet abgeschnitten oder stellt Werte unter falschen Zeitstempeln dar.

Wahrscheinliche Ursache: Spaltendaten wurden aus separaten Filtern oder Abbildungen erstellt, sodass die Zeit- und Wertspalten nicht mehr dieselben Beobachtungen beschreiben.

Prüfen

• Vergleichen Sie vor dem Aufruf des Diagramms die Länge jeder Spalte.
• Validieren Sie die numerische Konvertierung, bevor Sie Puffer übertragen.
• Der Aktienbereich addCandles benötigt sechs gleich große Spalten; addCandleBatches validiert die vollständige Chunk-Liste, bevor irgendeine Übertragung erfolgt. Ungültige Zeitstempel oder Spaltenlängen lassen Caller-Puffer verbunden.

Beheben

• Filtern und sortieren Sie zunächst alle Quellbeobachtungen vollständig, und teilen Sie sie dann in ausgerichtete typisierte Spalten auf.
• Verwenden Sie explizites NaN nur für eine dokumentierte Lückenmarkierung einer Linienserie; OHLCV‑Werte müssen gültige Kerzen bleiben.

Lehnen Sie fehl ausgerichtete Spalten vor der Übertragung ab

const lengths = [timestamp.length, open.length, high.length, low.length, close.length, volume.length];
if (!lengths.every((length) => length === lengths[0])) {
  throw new RangeError(`OHLCV columns are misaligned: ${lengths.join(", ")}`);
}

SSR oder Hydration greift auf browser‑exklusive Chart‑APIs zu

Gilt für: line, stock.

Symptom. Ein Server‑Render wirft einen Fehler, weil window, document, Worker oder HTMLCanvasElement nicht verfügbar sind, oder die Hydration erzeugt einen abweichenden Baum.

Wahrscheinliche Ursache: Das interaktive Browser-Diagramm wurde während der Serverauswertung erzeugt statt nachdem der Client gemountet wurde.

Prüfen

• Suchen Sie die Diagrammerstellung im Modul-Scope oder innerhalb einer Serverkomponente.
• Trennen Sie die serverseitige Bildgenerierung durch @sixtyfold/ssr von der Browser-Interaktion.

Behebung

• Verwenden Sie den offiziellen Framework‑Adapter innerhalb einer vom Client verwalteten Komponente.
• Rendern Sie einen stabilen Host während SSR und initialisieren Sie das interaktive Diagramm erst nach dem Mount.

Halten Sie ein Next.js‑Chart hinter der Client‑Grenze

"use client";

import type { MultiSeriesData, TimeSeriesData } from "@sixtyfold/core";
import { SixtyfoldLineChart } from "@sixtyfold/react/line";

type LineData = TimeSeriesData | MultiSeriesData;

export function ChartPanel({ data }: { data: LineData }) {
  return <SixtyfoldLineChart data={data} options={{ renderMode: "auto" }} />;
}

Worker oder Speicher bleiben nach der Navigation bestehen

Gilt für: line, stock.

Symptom. Der Speicher wächst, wenn die Ansicht wiederholt geöffnet wird, oder alte Charts rendern weiterhin nach der Navigation.

Wahrscheinliche Ursache. Ein Standard-Chart oder ein temporärer Data-Worker wurde nicht zerstört, als die zugehörige Ansicht entfernt wurde.

Überprüfen

• Erfassen Sie einen Heap-Snapshot des Browsers vor und nach mehreren Mount-/Unmount-Zyklen.
• Suchen Sie nach weiter gehaltenen Chart-Instanzen, Workern, Beobachtern oder dekodierten Quellarrays.

Beheben

• Rufen Sie destroy() genau einmal für jede Vanilla-Chart-Instanz auf.
• Beenden Sie temporäre Fetch/Decode-Worker nach ihrem letzten Transfer; offizielle Framework‑Adapter zerstören Chart‑Worker automatisch.

Geben Sie Chart‑ und Ingestions‑Worker frei

return () => {
  dataWorker?.terminate();
  chart.destroy();
};

Die Interaktion ist langsam oder es gehen Frames verloren

Gilt für: line, stock.

Symptom. Zoomen, Verschieben, anfängliche Dekodierung oder Streaming‑Updates blockieren sichtbar oder erreichen die Ziel‑Bildfrequenz nicht.

Wahrscheinliche Ursache. Der Hauptthread dekodiert oder formt zu viele Daten um, das Diagramm ist auf den Fallback‑Renderer zurückgefallen, oder die sichtbare Arbeitslast umfasst mehr Zeichen‑Durchläufe, als das Zielgerät aufrechterhalten kann.

Prüfen Sie

• Untersuchen Sie Statistiken: renderMode, frameTime, sichtbare Arbeit und LOD‑Bereitschaft während der tatsächlichen Interaktionssequenz.
• Profilieren Sie Fetch, Dekodierung, Konvertierung, Transfer und Rendering getrennt.

Beheben

• Verwenden Sie renderMode auto, bereiten Sie spaltenweise typisierte Arrays in einem dedizierten Daten‑Worker vor, transferieren Sie sie einmal und terminieren Sie diesen Ingest‑Worker.
• Benchmarken Sie repräsentative Browser, DPRs, Serienanzahlen und Gesten; 60 FPS ist ein Designziel und keine geräteunabhängige Garantie.

Messen Sie den aktiven Rendering‑Pfad

chart.setStatsCallback((stats) => {
  console.table({
    mode: stats.renderMode,
    fps: stats.fps,
    frameTime: stats.frameTime,
    ready: stats.lodReady,
  });
}, { intervalMs: 250 });

Das Liniendetail ändert sich abrupt, nachdem sich der Zoom stabilisiert hat

Gilt für: line.

Symptom: Der Viewport animiert flüssig, aber die Linientextur ändert sich erneut am Ende der Geste.

Wahrscheinliche Ursache: Die Präsentationsdichte oder das Grid-Rebasing ist für die Arbeitslast zu aggressiv, oder Anwendungscode ersetzt Daten oder Erscheinungsbild nach Abschluss der Animation.

Überprüfen Sie

• Spielen Sie dieselbe Viewport-Sequenz erneut ab, während Sie Präsentationsdichte, Grid-Delta und Query-Visits beobachten.
• Prüfen Sie, ob auf Anwendungsebene setData(), setAppearance() oder eine Wiederherstellung der Ansicht vorgenommen wird, nachdem die Animation beendet ist.

Beheben

• Beginnen Sie mit dem adaptiven Modus, Dichte 0,75, rebaseRatio 1,25 und quantizationStep 0,25.
• Verwenden Sie setLODOptions(), um jeweils einen Koeffizienten einzustellen; verwenden Sie Dichte 0,25 für rechenintensive Bereichsfüllungen oder außergewöhnlich große Multi‑Series‑Arbeiten.

Präsentation feinabstimmen, ohne das Diagramm neu zu erstellen

chart.setLODOptions({
  mode: "adaptive",
  density: 0.75,
  rebaseRatio: 1.25,
  quantizationStep: 0.25,
});

Eine Linie verbindet über fehlende Messwerte hinweg

Gilt für: line.

Symptom. Eine Linie überquert optisch ein Intervall, in dem keine Messung vorliegt.

Wahrscheinliche Ursache. Fehlende Beobachtungen wurden entfernt oder durch Null ersetzt, anstatt als ausgerichtete NaN-Lücke dargestellt zu werden.

Prüfen

• Bestätigen Sie, dass die gemeinsame X-Spalte das fehlende Intervall enthält, wenn ein sichtbarer Bruch erforderlich ist.
• Überprüfen Sie, ob die Ingestion Nullwerte in Null konvertiert hat.

Beheben

• Beibehalten ausgerichteter X-Positionen und Ersetzen fehlender Linienwerte durch Number.NaN.
• Synthesieren Sie keine OHLCV-Kerzen und verbinden Sie keine Marktschließungen; das Zeitachsenverhalten von Aktien wird durch beobachtete Kerzen gesteuert.

Eine echte Lückenanzeige in Linienserien darstellen

const data = {
  x: new Float64Array([0, 1, 2, 3]),
  y: new Float64Array([12, Number.NaN, Number.NaN, 18]),
  length: 4,
};