トラブルシューティング

このページでは、カスタムウィジェットの使用中に発生する可能性がある問題への対処方法を紹介します。

ページのクラッシュ

カスタムウィジェットは iframe 内で実行され、メモリーを過剰に消費したり、ブラウザーのスレッドをブロックしたりすると、クラッシュする可能性があります。この場合、ブラウザーが応答しなくなったり、終了状態が表示されたりすることがあります。Chrome DevTools のパフォーマンスタブを使用してブラウザーの実行を記録し、パフォーマンスの異常を調べます。

カスタムウィジェットを使用する際のブラウザーページのクラッシュを軽減するには、以下に説明する一般的なアンチパターンを確認します。

無限ループと再レンダリングを避ける

無限、または事実上無限のループや再レンダリングは、ページのクラッシュを引き起こす可能性がある一般的なバグの一種です。

React ↗ では、無限の再レンダリングを引き起こす可能性があるループに注意してください。次の点を確認します。

• useEffect フックが自身の依存関係を更新し、それによって再実行されていないか。
• setTimeout、setInterval、requestAnimationFrame のループがクリアされずに残っていないか。
• window.addEventListener などのイベントハンドラーが更新を引き起こし、その更新によって同じハンドラーが再び呼び出されていないか。
• レンダリングコードが、毎回のレンダリングですべての項目に対して負荷の高い処理を実行していないか。

Copied!
1
2
3
4
5
6
7
8
9
10
function InfiniteRender({ objects }: { objects: MyObject[] }) {
    const [data, setData] = useState<MyObject[]>([]);

    // バグ：依存関係でもある data を更新しています
    useEffect(() => {
        setData([...objects]);
    }, [objects, data]);

    return <MyComponent />;
}

React 以外でも、終了しない while ループを作成しないようにします。

Copied!
1
2
3
4
5
6
7
// バグ：条件が一度も満たされない場合、無限ループになります
while (true) {
    doSomething();
    if (myCondition) {
        break;
    }
}

また、反復回数が不明で、想定外に多くなるために事実上無限となる while ループも作成しないでください。

Copied!
1
2
3
4
5
6
7
8
9
const minValue = min(myValues);
const maxValue = max(myValues);
let currentValue = minValue;

// バグ：myValues の範囲が不明で、想定外に大きい場合、事実上の無限ループになります
while (currentValue <= maxValue) {
    doSomething(currentValue);
    currentValue += 1;
}

すべてのデータをブラウザーに読み込むことを避ける

オントロジーのオブジェクトタイプに多数のオブジェクトがある場合、クライアント側で処理するためにすべてのオブジェクトをブラウザーに読み込まないでください。ブラウザーのリソースを使い果たし、ネットワーク経由で大量のデータを転送することになり、ウィジェットのユーザーにとって処理が遅くなる可能性があります。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
let pageToken: string | undefined;
const allObjects = [];

do {
    const page = await client(MyObject).fetchPage({
        $pageSize: 1_000,
        $pageToken: pageToken,
    });

    allObjects.push(...page.data);
    pageToken = page.nextPageToken;
} while (pageToken != null);

代わりに、次の方法を使用します。

• データを1ページだけユーザーに表示し、必要な場合にのみ追加のページを読み込みます。
• クライアント側の処理ではなく、クエリで絞り込みと並べ替えを適用します。
• 総件数などの概要統計が必要な場合は、集計を使用します。
• プロパティが多いオブジェクトタイプでは、$select を使用して必要なプロパティのみをリクエストします。
• オブジェクトのほかのプロパティの値やリンクに依存する計算には、.withProperties を通じて派生プロパティを使用します。