JS Errors
This section lists the most encountered Javascript errors and reported by our community.
Require() of ES module
Section titled Require() of ES moduleThis error (as well as one below) generally happens when you try to import the tracker inside serverside context (SSR, Nuxt, Next, Remix apps etc).
Fixing it requires ensuring that tracker is imported and run inside browser context, via dynamic imports, client components etc.
ReferenceError: Navigator is not defined
Section titled ReferenceError: Navigator is not definedSometimes this error occurs when you try to import tracker-assist
or tracker-fetch
plugins, this happens because node is trying to build the page without window
API in the env.
The fix is fairly simple. All you have to do is to change the regular import of the trouble-causing plugin:
import trackerAssist from '@openreplay/tracker-assist/cjs';
To dynamically import inside componendDidMount
or useEffect
alternative:
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 */
This way all window API dependant plugins will be imported when the component gets rendered.
Critical dependency: the request of a dependency is an expression
Section titled Critical dependency: the request of a dependency is an expressionThis may happen with old versions of tracker-assist
plugin. You should apply this workaround if you face the below error when compiling:
Failed to compile.
./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression
Uncaught DOMException: Blocked a frame with origin “X” from accessing a cross-origin frame
Section titled Uncaught DOMException: Blocked a frame with origin “X” from accessing a cross-origin frameOpenReplay tracker captures same-domain iFrames by default. However, it throws an error when it tries to capture an iFrame that’s NOT from the same-domain as your website. You can either:
- Disable the entire functionality using the
captureIFrames
property as in the example below:
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
captureIFrames: false
});
- Keep capturing iFrames (default behavior) by adding the
data-openreplay-capture
HTML attribute to the same-domain<iframe>
tags only. This way, cross-origin iFrames won’t be tracked by OpenReplay.
My problem is not listed
Section titled My problem is not listedIf you encounter any errors that are not listed in this page, feel free to raise an issue or simply reach out to our Slack or check out our Forum to get help from our community.
Have questions?
Section titled Have questions?If you have any questions about this process, feel free to reach out to us on our Slack or check out our Forum.