このセクションでは、コミュニティから報告された、よく発生する JavaScript エラーを紹介します。

このエラー（および下記のエラー）は、サーバーサイドのコンテキスト（SSR、Nuxt、Next、Remix アプリなど）内でトラッカーをインポートしようとすると、一般的に発生します。

修正するには、動的インポートやクライアントコンポーネントなどを使用して、トラッカーがブラウザーのコンテキスト内でインポートおよび実行されるようにする必要があります。

tracker-assist や tracker-fetch プラグインをインポートしようとすると、このエラーが発生することがあります。これは、node が環境に window API がない状態でページをビルドしようとするために起こります。

修正は非常にシンプルです。問題の原因となっているプラグインの通常のインポートを、次のように変更するだけです。

import trackerAssist from '@openreplay/tracker-assist/cjs';

componendDidMount または useEffect の代替処理の内部で動的にインポートするには、次のようにします。

import Tracker, { Options } from "@openreplay/tracker";
const tracker = new Tracker({ /* your options */ });

class TrackerComponent extends React.Component {

  componentDidMount = () => {
    import(‘@openreplay/tracker-assist/cjs’).then(({ default: trackerAssist }) => {
      tracker.start(/* your options */)
      tracker.use(trackerAssist(/* your assist options */))
    })
   }

 /* Other code */

このようにすると、window API に依存するすべてのプラグインが、コンポーネントのレンダリング時にインポートされます。

古いバージョンの tracker-assist プラグインで発生することがあります。コンパイル時に次のエラーが発生した場合は、この回避策を適用してください。

Failed to compile.

./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression

OpenReplay トラッカーは、デフォルトで 同一ドメイン の iFrame をキャプチャします。ただし、Web サイトと同一ドメインではない iFrame をキャプチャしようとすると、エラーをスローします。次のいずれかの方法で対処できます。

• 以下の例のように、captureIFrames プロパティを使用して、この機能全体を無効にします。

tracker.configure({
      projectKey: PROJECT_KEY,
      captureIFrames: false
});

• 同一ドメインの <iframe> タグ だけ に data-openreplay-capture HTML 属性を追加して、iFrame のキャプチャを継続します（デフォルトの動作）。こうすると、クロスオリジンの iFrame は OpenReplay によってトラッキングされません。

このページに記載されていないエラーが発生した場合は、お気軽にIssue を作成するか、Slack までお問い合わせのうえ、コミュニティのサポートを受けてください。

このプロセスについてご不明な点がありましたら、お気軽に Slack までお問い合わせください。