question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

use countly-sdk-web in NextJs

See original GitHub issue

I plan to use Countly for user usage data analytics. but when I import an error occurs which causes chrome to display Internal Server Error and on the chrome console it says Failed to load resource: the server responded with a status of 500 (Internal Server Error) but in the terminal it says ReferenceError: Element is not defined

this is my code

async componentDidMount() {
    let Countly = Countly;
    Countly.q = Countly.q;
    Countly.app_key = "myAppKey";
    Countly.url = "muUrl.Key";
    Countly.q.push(["track_sessions"]);
    Countly.q.push(["track_pageview"]);

    (function() {
      let cly = document.createElement("script");
      cly.type = "text/javascript";
      cly.async = true;
      cly.src =
        "https://cdnjs.cloudflare.com/ajax/libs/countly-sdk-web/19.2.1/countly.min.js";
      cly.onload = function() {
        Countly.init();
      };
      let s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(cly, s);
    })();
  }

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
itsiprikshitcommented, Aug 27, 2020

Hi, You can refer to https://github.com/Countly/countly-sdk-web/blob/master/samples/react/src/App-WithRouter.js to integrate Countly into your application. Make sure you load Countly in your root component. Let me know if it was helpful or not.

0reactions
jacknewberrycommented, Apr 23, 2021

We are still having this issue where Countly is throws a ReferenceError when it is imported.

I would expect the library to only begin interacting with the DOM (or doing anything) when init is called. That would allow consumers of the library to control when initialisation occurs.

It is confusing to provide a method to trigger initialisation, but also begin initialising the sdk and interacting with the window at import time.

Moving initialisation activities so that they are only triggered when the sdk consumer expects would make the library more flexible, and unblock the client teams who have commented on this ticket.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Web analytics (JavaScript) - Countly
Countly Web SDK stores various information like device ID, request queue, session information and more in your device. This helps Countly to ...
Read more >
countly-sdk-web - npm
Countly is a product analytics solution and innovation enabler that helps teams track product performance and customer journey and behavior ...
Read more >
countly-sdk-web: Documentation | Openbase
How to use Countly Web SDK? Link to the script and call helper methods based on what you want to track: sessions, views,...
Read more >
countly.js - Countly Web SDK Documentation - GitHub Pages
* Resets Countly to its initial state (used mainly to wipe the queues in memory). * Calling this will result in a loss...
Read more >
Javascript SDK Example using Next.js - Split Help Center
Example: Basic Code to use Javascript Split SDK with React library and Next.js, the app has both Client side and Server side renderings,......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found