この文書は、Framerを学ぶ国内ユーザーが、韓国語資料の不足による困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使う皆さんに少しでもお役に立てれば幸いです。

公開エラーとは何ですか？

公開エラーとは、サイトを配信する際にコンポーネントやページで問題が発生して配信が中断される場合です。
公開エラーが発生すると「ページにエラーがあり、公開できませんでした。」というトースト通知が表示されます。
この時、確認ボタンが一緒に表示され、どのコンポーネントが問題か確認することができます。

よくある原因

1. コンポーネントのビルドタイムアウト

   Framerはページを作成する際、内部で使用するコンポーネントを一つずつ読み込みながら組み立てます。コンポーネントを読み込んで組み立てる過程であるコンポーネントが非常に遅かったり、停止していると時間切れになり公開が失敗します。
   例えば、ウェブインスペクタ（開発者ツール）にensureComponentsInLoader: Component loader not updated in timeというメッセージが表示されることがあります。

   解決方法

   再度公開を試みてください。それでも続けて失敗する場合は、問題になりそうなコンポーネントを探し出して修正するか、完全に削除する必要があります。

   
   

2. 使用中のコンポーネントがなくなった（欠落エラー）

   以前に作ったコンポーネントを使っているが、そのコンポーネントを削除したり、名前を変更したり、ファイルが正しく読み込まれていない場合にも問題が発生します。Framerでは、そのようなコンポーネントをレイヤーパネルで灰色のボックスとして表示します。
   確認ボタンをクリックすると、どの部分に問題があるかすぐに確認できます。

   解決方法

   灰色のボックスで表示されたコンポーネントを再度読み込むか、新しく作成して置き換える必要があります。

最適化エラーとは？

Framerではサイトをより速く表示するために、サーバで事前にページを作成しておく（Pre-rendering）方法で最適化しています。ところが、このサーバはブラウザではないため、以下のようなユーザーの情報が不明です。

• クッキー（cookie）

• ウィンドウサイズ（window size）

• 言語（language）

• または、window、document、navigatorのようなブラウザオブジェクト

もし、あなたの作ったカスタムコードコンポーネントやOverrideがこれらの情報にアクセスしようとすると、サーバはそのコードを実行できずに最適化警告（Optimization Warning）を表示します。

最適化状態

1. 最適化済み（Optimized）

2. 最適化警告（Optimization Warning）

3. 最適化失敗（Optimization Error）

注: 設定 → ドメインまたは設定 → バージョンで最適化状態を確認できます。

なぜ重要なのでしょうか？

• 警告レベルでも、いくつかのページで内容が遅れて表示されたり、空白に見える現象が発生する可能性があります。

• エラーが表示された場合、そのページはSEO、Core Web Vitalsなどの品質指標に不利になります。

注意が必要なコードコンポーネント

最適化エラーの最も一般的な原因はwindow、document、navigatorのようなブラウザ専用APIを使用するコードコンポーネントです。サーバはブラウザ環境ではないため、これらの値は存在しません。

この場合は条件付きレンダリングを使用するか、

```js
if (typeof window !== "undefined") {
  // window가 있을 때만 실행되도록 처리
}
```

Framerガイドに従ってコードをリファクタリングして最適化に適合させてください。
注: 詳細なガイドは『カスタムコードの最適化エラーの修正方法』を参考してください。

この文章はFramer公式ブログの「公開または最適化警告のデバッグ方法」を翻訳・翻案したコンテンツです。