{"id":15310255,"url":"https://github.com/maykonn/page-info-js","last_synced_at":"2025-04-15T01:07:54.933Z","repository":{"id":57317978,"uuid":"141597613","full_name":"Maykonn/page-info-js","owner":"Maykonn","description":"Gather information about the DOM, Loading Time, Errors, Mutations, and more (with Custom Callbacks) with Javascript.","archived":false,"fork":false,"pushed_at":"2018-10-02T20:39:00.000Z","size":146,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T01:07:46.967Z","etag":null,"topics":["analytics","backend","callback","dom","errors","frontend","gz","info","javascript","js","loading","mutation-observer","mutationobserver","mutations","observer","pageinfo","pageinfojs","time"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/page-info-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Maykonn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-19T15:20:52.000Z","updated_at":"2021-06-15T13:32:58.000Z","dependencies_parsed_at":"2022-08-25T20:40:43.707Z","dependency_job_id":null,"html_url":"https://github.com/Maykonn/page-info-js","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maykonn%2Fpage-info-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maykonn%2Fpage-info-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maykonn%2Fpage-info-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maykonn%2Fpage-info-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Maykonn","download_url":"https://codeload.github.com/Maykonn/page-info-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986312,"owners_count":21194025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","backend","callback","dom","errors","frontend","gz","info","javascript","js","loading","mutation-observer","mutationobserver","mutations","observer","pageinfo","pageinfojs","time"],"created_at":"2024-10-01T08:27:12.867Z","updated_at":"2025-04-15T01:07:54.916Z","avatar_url":"https://github.com/Maykonn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PageInfoJS\n\nWith PageInfoJS you can gather information about time to load the Document DOM as well create custom callbacks for events when:\n\n- Elements are loaded, \n- A Javascript error detected,\n- DOM loading percentage changes,\n- Document is completely loaded(or interactive, loading, etc).\n- When a mutation happens on page(when a new element is created on page for example)\n\nYou can work with information about time too:\n\n- DOM loading start timestamp,\n- Get the elapsed time in milliseconds when an event occur,\n- Timestamp of the moment that an event occur.\n\n**A real world example for PageInfoJS custom callbacks and time info is to send information about your frontend apps for your analytics backend servers.**\n\n## How to use\n\n### With npm\n\nAlthough you can use as a Node module PageInfo works with DOM, so you can use the package in your frontend app with your webpack configuration to compile the \nPageInfoJS code together your app code. To install the module type:\n\n`npm i page-info-js`\n\nImporting the package with ES6:\n```JS\nimport 'page-info-js';\n```\n\nOr import with `require`:\n```JS\nrequire('page-info-js');\n```\n\nAnd thus you can instantiate the PageInfoJS:\n```JS\nconst PageInfo = new PageInfoJS([]);\n```\n\n*OBS: the array on constructor is an array of custom callbacks, learn more about it [clicking here](#working-with-custom-callbacks).*\n\n### As a `\u003cscript\u003e` tag included in your html page \n\nInclude the `/dist/PageInfo.js` or `/dist/PageInfo.gz` script on `\u003chead\u003e` element and you can work with the PageInfoJS at the end of your html, after\nclose the `\u003c/body\u003e` tag, or include your js script there.\n\n**You can find the compiled code on [package releases list](https://github.com/Maykonn/PageInfoJS/releases).**\n\n### Examples\n\nSee the files on `/example` directory for a simple real world example.  \nTo execute the example on your local browser, run:  \n\n`npm run start`\n\nYour browser will open `http://localhost:8080` automatically with the example (open your browser console and enjoy!).\n\n## Working with custom callbacks\n\nTo use the custom callbacks for PageInfoJS events you can declare an array of callbacks:\n```JS\nvar myCallbacks = [];\n```\n\nAnd create a callback when a DOM element is loaded:\n```JS\n/**  \n * @param element {HTMLElement}  \n * @param PageInfo {PageInfo}  \n */\nmyCallbacks[PageInfoJS.EventsList.DOM.ElementLoaded] = function (element, PageInfo) {  \n  console.log('  \u003e\u003e Element loaded', element);  \n  console.log('  \u003e\u003e Loaded elements', PageInfo.getLoadedElementsNumber());  \n};\n```\n\n### Events List:\nYou can implement custom callbacks for the bellow events list:\n\n- PageInfoJS.EventsList.DOM.ElementLoaded\n- PageInfoJS.EventsList.DOM.ElementsLoadingPercentageIncremented\n- PageInfoJS.EventsList.DOM.AllElementsLoaded\n- PageInfoJS.EventsList.DOM.MutationObserved (when an attribute or content of a html element change on page after it loaded)\n- PageInfoJS.EventsList.OnError\n- PageInfoJS.DocumentReadyStateChanged.Any (when ready state changed for any state)\n- PageInfoJS.DocumentReadyStateChanged.ToUninitialized\n- PageInfoJS.DocumentReadyStateChanged.ToLoading\n- PageInfoJS.DocumentReadyStateChanged.ToLoaded\n- PageInfoJS.DocumentReadyStateChanged.ToInteractive\n- PageInfoJS.DocumentReadyStateChanged.ToComplete\n\nAnd pass the callbacks array for the PageInfoJS instance:\n\n```JS\nvar PageInfo = new PageInfoJS(myCallbacks);\n```\n\n## Working with Time\n\nGetting the loading start timestamp:\n\n```JS\nvar timestamp = PageInfo.Time.getStartTimestamp();  \nconsole.log('PageInfoJS start timestamp:', timestamp);\n```\n\nGetting the current timestamp:\n```JS\nvar timestamp = PageInfo.Time.getCurrentTimestamp();  \nconsole.log('PageInfoJS current timestamp:', timestamp);\n```\n\nElapsed time in milliseconds:\n```JS\nvar time = PageInfo.Time.getElapsedTime();  \nconsole.log('PageInfoJS elapsed time (milliseconds):', time);\n```\n\nWith these time methods you can know when the page becomes `Interactive` and the elapsed time for that:\n```JS\n/**  \n * @param element {HTMLElement}  \n * @param PageInfo {PageInfo}  \n */\nmyCallbacks[PageInfoJS.EventsList.DocumentReadyStateChanged.ToInteractive] = function (element, PageInfo) {  \n  console.log('Document is Interactive now, elapsed time (milliseconds)', PageInfo.Time.getElapsedTime());  \n  console.log('Document is Interactive now, timestamp', PageInfo.Time.getCurrentTimestamp());  \n};\n```\n\n**You can use `Time` methods with any [custom callback.](https://github.com/Maykonn/PageInfoJS#working-with-custom-callbacks)**\n\n## Working with Errors\n\nPageInfoJS fire an Event instance when a js error occur on page, you can use it as follow:\n```JS\n/**\n * @param PageInfo {PageInfo}\n * @param e {Event || ErrorEvent}\n */\nmyCallbacks[PageInfoJS.EventsList.OnError] = function (PageInfo, e) {\n  console.log('Error Detected (event timestamp):', PageInfo.Time.getCurrentTimestamp(), e);\n};\n```\n\nOr combined with other events too:\n```JS\n/**\n * @param PageInfo {PageInfo}\n * @param changedTo {string}\n */\nmyCallbacks[PageInfoJS.EventsList.DocumentReadyStateChanged.Any] = function (PageInfo, changedTo) {\n  console.log('Document ready state changed to `' + changedTo + '` after (milliseconds)', PageInfo.Time.getElapsedTime());\n  console.log('Document have errors?', PageInfo.hasErrors(), PageInfo.getAllErrors());\n};\n```\n\n## Compiling the code\nClone this repo and you can use npm and webpack to compile the code.\nInstall the requirements:   \n\n```\ngit clone https://github.com/Maykonn/PageInfoJS.git\nnpm install\n``` \n\nIn your dev environment you can run (will compile the code and open the example app at localhost:8080/):\n```\nnpm run start\n```\n\nBuild the code to production at `/dist` directory (minify, uglify, remove comments, logs, etc):\n```\nnpm run build\n```\n\nThe `npm run build` command will generate two file at /dist directory, PageInfo.gz and PageInfo.js.\n\n## Contributing\n\nYou can contribute to PageInfoJS cloning this repository from github [clicking here](https://github.com/Maykonn/PageInfoJS.git).\nSo, you just need to create a new branch using a name related to the new functionality which you'll create.   \nAnd after finish your code, you just need to create a pull request which will be revised, merged to master(if the code \ndoesn't break the lib) branch and published a new release of PageInfoJS. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykonn%2Fpage-info-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaykonn%2Fpage-info-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykonn%2Fpage-info-js/lists"}