tag:blogger.com,1999:blog-80678041501490259152024-03-28T02:20:30.228-07:00SodhanaLibrarySamplehttp://www.blogger.com/profile/12265217798816253449noreply@blogger.comBlogger35013tag:blogger.com,1999:blog-8067804150149025915.post-11263732871161562322024-01-07T23:03:00.000-08:002024-01-07T23:03:17.601-08:00Track user actions and errors using crash-report-js and play back them using crash-report-js chrome extension<p> Whenever you are building data intensive applications, </p><p></p><ol style="text-align: left;"><li>tiny null value can cause entire application crash</li><li>API loading time can cause entire application crash</li><li>User actions can cause entire application crash</li><li>API errors can cause entire application crash</li></ol><div>But how will you find out ?, mostly end users don't complain about them, they just refresh the screen. But we should provide them an option to raise an issue, in that way developers will be more cautious about frontend issues.</div><h2 style="text-align: left;"><span style="font-size: large;">Library:</span></h2><div>Created Java Script library, which can be used with all frameworks like React, Angular, jQuery etc..</div><div><br /></div><div style="text-align: center;"><a href="https://github.com/SodhanaLibrary/crash-report-js" target="_blank">Github link for crash-report-js</a></div><h2 style="text-align: left;"><span style="font-size: large;">React Application:</span></h2><div>Lets get into example. Here I will implement react application with crash-report-js. </div><div><br /></div><div>1. Create ErrorBoundary.js to catch errors on application</div><div><br /></div><div><div class="slcode" style="background-color: #1f1f1f; color: #cccccc; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">"react"</span>;</div><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">addTrack</span>, <span style="color: #9cdcfe;">getAllTracks</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">"crash-report-js"</span>;</div><br /><div><span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">ErrorBoundary</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">React</span>.<span style="color: #4ec9b0;">Component</span> {</div><div> <span style="color: #569cd6;">constructor</span>(<span style="color: #9cdcfe;">props</span>) {</div><div> <span style="color: #569cd6;">super</span>(<span style="color: #9cdcfe;">props</span>);</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">state</span> <span style="color: #d4d4d4;">=</span> { <span style="color: #9cdcfe;">hasError</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">false</span> };</div><div> <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">submitCrashReport</span> <span style="color: #d4d4d4;">=</span> <span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">submitCrashReport</span>.<span style="color: #dcdcaa;">bind</span>(<span style="color: #569cd6;">this</span>);</div><div> }</div><div> </div><div> <span style="color: #569cd6;">static</span> <span style="color: #dcdcaa;">getDerivedStateFromError</span>(<span style="color: #9cdcfe;">error</span>) {</div><div> <span style="color: #6a9955;">// Update state so the next render will show the fallback UI.</span></div><div> <span style="color: #c586c0;">return</span> { <span style="color: #9cdcfe;">hasError</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">true</span> };</div><div> }</div><div> </div><div> <span style="color: #dcdcaa;">componentDidCatch</span>(<span style="color: #9cdcfe;">error</span>, <span style="color: #9cdcfe;">errorInfo</span>) {</div><div> <span style="color: #6a9955;">// You can also log the error to an error reporting service</span></div><div> <span style="color: #dcdcaa;">addTrack</span>({</div><div> <span style="color: #9cdcfe;">type</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'log'</span>,</div><div> <span style="color: #9cdcfe;">target</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">error</span>,</div><div> <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">errorInfo</span>,</div><div> });</div><div> }</div><br /><div> <span style="color: #dcdcaa;">submitCrashReport</span>() {</div><div> <span style="color: #6a9955;">// Add your logic here to submit report to backend</span></div><div> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'has error'</span>, <span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">state</span>.<span style="color: #9cdcfe;">hasError</span>);</div><div> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'crash report'</span>, <span style="color: #dcdcaa;">getAllTracks</span>());</div><div> }</div><div> </div><div> <span style="color: #dcdcaa;">render</span>() {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">state</span>.<span style="color: #9cdcfe;">hasError</span>) {</div><div> <span style="color: #c586c0;">return</span> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">{</span><span style="color: #d4d4d4;">{</span><span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">8</span><span style="color: #d4d4d4;">}</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span>Something wrong<span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">style</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">{</span><span style="color: #d4d4d4;">{</span><span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span><span style="color: #d4d4d4;"> </span><span style="color: #b5cea8;">8</span><span style="color: #d4d4d4;">}</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">button</span> <span style="color: #9cdcfe;">onClick</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">{this</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">submitCrashReport</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span>Submit Crash Report<span style="color: grey;"></</span><span style="color: #569cd6;">button</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span>;</div><div> }</div><div> </div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">this</span>.<span style="color: #4fc1ff;">props</span>.<span style="color: #9cdcfe;">children</span>; </div><div> }</div><div> }</div><br /><div> <span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #4ec9b0;">ErrorBoundary</span>;</div></div></div><div><br /></div><div>2. Now include your React App into this ErrorBoundary</div><div><br /></div><div><div class="slcode" style="background-color: #1f1f1f; color: #cccccc; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">useEffect</span> } <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div><div><span style="color: #c586c0;">import</span> { <span style="color: #9cdcfe;">clearTracks</span>, <span style="color: #9cdcfe;">initTracks</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'crash-report-js'</span>;</div><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">AppContainer</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./AppContainer'</span>;</div><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">ErrorBoundary</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'./ErrorBoundary'</span>;</div><br /><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">App</span>() {</div><br /><div> <span style="color: #6a9955;">// init crash-report-js, first clear all tracking data then initiate tracking session</span></div><div> <span style="color: #dcdcaa;">useEffect</span>(() <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #dcdcaa;">clearTracks</span>();</div><div> <span style="color: #dcdcaa;">initTracks</span>();</div><div> }, []);</div><br /><div> <span style="color: #c586c0;">return</span> (</div><div> <span style="color: #6a9955;">// including whole app into ErrorBoundary</span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">ErrorBoundary</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">AppContainer</span> <span style="color: grey;">/></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">ErrorBoundary</span><span style="color: grey;">></span></div><div> );</div><div>}</div><br /></div></div><div><br /></div><div>Whenever your application crashes, '<span style="background-color: #1f1f1f; color: #cccccc; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; white-space: pre;">Submit Crash Report</span>' button will appear, on click on that button, all tracking data will be submitted to backend. You can see crash report data in the session storage</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLswitlgd_-Ejz_Mv9ja8GWVEy-K4_-mBdJComPIastfimKaHvCMbnSwbvRWGyrZLEKsLnb2f6vq5SFmZDrHvGeJQEjzO4Ca-dNWodnLlnl1TNUEGwzbnKunocVkiCMSE8YKSiPKDB9JJXOcCqFJnDgdoKNvMVnapBtGCf1F86eiXiCbVMdy5wsspnl-g/s1280/Screenshot%202024-01-03%20at%2019.11.32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLswitlgd_-Ejz_Mv9ja8GWVEy-K4_-mBdJComPIastfimKaHvCMbnSwbvRWGyrZLEKsLnb2f6vq5SFmZDrHvGeJQEjzO4Ca-dNWodnLlnl1TNUEGwzbnKunocVkiCMSE8YKSiPKDB9JJXOcCqFJnDgdoKNvMVnapBtGCf1F86eiXiCbVMdy5wsspnl-g/w640-h400/Screenshot%202024-01-03%20at%2019.11.32.png" width="640" /></a></div><h2 style="text-align: left;"><span style="font-size: large;">crash-report-js-extension</span></h2><div>How to inspect and test this crash report ?</div><div><ol style="text-align: left;"><li>Install chrome extesion <a href="https://chromewebstore.google.com/detail/crash-report-js-extension/pacgfjjelhfpalaoniejckhjpkibonib">https://chromewebstore.google.com/detail/crash-report-js-extension/pacgfjjelhfpalaoniejckhjpkibonib</a></li><li>Open chrome side panel, and follow below steps</li></ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwp4yPkI6Q8-YUATlsi2yv-si7QLi_fdxw91DTXM0-1ehvs7pUKm7vAZG-kEPOHbGWZRlioF23yR44FZ-elmvP4ykyqPvcWwjWFj6jpMxYkMDC4s9gt8FbSpN4euaoVhvRW7ytkwz5uOLBnisklFlf8F8d7CtdcvLqKiT-ajeu1_MeVjv18sXRNHanLc/s1280/Screenshot%202024-01-03%20at%2019.11.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwp4yPkI6Q8-YUATlsi2yv-si7QLi_fdxw91DTXM0-1ehvs7pUKm7vAZG-kEPOHbGWZRlioF23yR44FZ-elmvP4ykyqPvcWwjWFj6jpMxYkMDC4s9gt8FbSpN4euaoVhvRW7ytkwz5uOLBnisklFlf8F8d7CtdcvLqKiT-ajeu1_MeVjv18sXRNHanLc/w640-h400/Screenshot%202024-01-03%20at%2019.11.55.png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyO6bSnBadByizISpiD9B-lZaJFJrtae1zWgzoEvI-IwlYXQ2poN5EvyWSPlRuXUas19cJt5ml_kXxJnWUsZu4dYC1rZH9I8q5HrPu8aWlDuSrYGfca5u5ry90381x-Kq5KKYv3ETfCiS-MbkaiArk9GiO0QW4g-JeqP2KcVkz8uUU8l0-RmlO9DIgW0/s1280/Screenshot%202024-01-03%20at%2019.12.26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyO6bSnBadByizISpiD9B-lZaJFJrtae1zWgzoEvI-IwlYXQ2poN5EvyWSPlRuXUas19cJt5ml_kXxJnWUsZu4dYC1rZH9I8q5HrPu8aWlDuSrYGfca5u5ry90381x-Kq5KKYv3ETfCiS-MbkaiArk9GiO0QW4g-JeqP2KcVkz8uUU8l0-RmlO9DIgW0/w640-h400/Screenshot%202024-01-03%20at%2019.12.26.png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDerSh0qttn1DUlO1wKfp_sueDGE9UxQc1jLVKcx1Gwxj9wC0-hRb0agmGNH2Dez01Cif4GPynEjwqmLj5ES5hgot_p0gQ9FakM9657LicrgwyvJyTtDLfN6lJa4EVDDwSmnkmZkqeMhonOOGEAjh2nP_7F_ETRTS4JHQ6d4hMR-QVCkkv-qwK-dpyuwc/s1280/Screenshot%202024-01-03%20at%2020.07.01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDerSh0qttn1DUlO1wKfp_sueDGE9UxQc1jLVKcx1Gwxj9wC0-hRb0agmGNH2Dez01Cif4GPynEjwqmLj5ES5hgot_p0gQ9FakM9657LicrgwyvJyTtDLfN6lJa4EVDDwSmnkmZkqeMhonOOGEAjh2nP_7F_ETRTS4JHQ6d4hMR-QVCkkv-qwK-dpyuwc/w640-h400/Screenshot%202024-01-03%20at%2020.07.01.png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEWoRih8-Up99JkwVzmCuYj3OMywr7s2wYSwtCbRkAo0vD2r1_brFSCKLp5sm3alpeS2CwxZZ3jCEEfLWEa4aSkRj7rDZErcpKwvvLVotpjyC_Bw3DUkJiNPpWi1T2B39QpHPJRrW6mYsy5WvLf3LBT0_Y_Ueq2jIAxcIq_MwNETuE4m9iYPJwjQtFWg/s1280/Screenshot%202024-01-03%20at%2020.18.38.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEWoRih8-Up99JkwVzmCuYj3OMywr7s2wYSwtCbRkAo0vD2r1_brFSCKLp5sm3alpeS2CwxZZ3jCEEfLWEa4aSkRj7rDZErcpKwvvLVotpjyC_Bw3DUkJiNPpWi1T2B39QpHPJRrW6mYsy5WvLf3LBT0_Y_Ueq2jIAxcIq_MwNETuE4m9iYPJwjQtFWg/w640-h400/Screenshot%202024-01-03%20at%2020.18.38.png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ta_GW5FKu6j0A4Y5V3jsJcITuQqRRu9gWJulpzNtz0Dxg_rAQTYG1w44Rs69QNfiSAxBoyxa1SBeBbbg0qGS0t5hE6V107oZzHYYEMBgO50uBw5gVDiRLSeXn9PyKeEJt_OfP1ojb2jclQH-14DL04HATZdcs74wY7bPWQrp0gumqZ7-FkEF-1rLhiQ/s1280/Screenshot%202024-01-03%20at%2020.19.56.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ta_GW5FKu6j0A4Y5V3jsJcITuQqRRu9gWJulpzNtz0Dxg_rAQTYG1w44Rs69QNfiSAxBoyxa1SBeBbbg0qGS0t5hE6V107oZzHYYEMBgO50uBw5gVDiRLSeXn9PyKeEJt_OfP1ojb2jclQH-14DL04HATZdcs74wY7bPWQrp0gumqZ7-FkEF-1rLhiQ/w640-h400/Screenshot%202024-01-03%20at%2020.19.56.png" width="640" /></a></div><br /><div><br /></div></div><div><br /></div><p></p>Samplehttp://www.blogger.com/profile/12265217798816253449noreply@blogger.com1tag:blogger.com,1999:blog-8067804150149025915.post-58241039264546783992023-12-30T01:02:00.000-08:002023-12-30T01:02:07.720-08:00Track user's actions using JavaScript<p> If you are building frontend application, Sometimes you need to track the user actions for debugging or performance improvement or for A/B testing. What are the important actions essential for these use cases</p><p></p><ol style="text-align: left;"><li>click</li><li>URL change</li><li>API calls</li><li>input change event</li></ol><div>How to do this ?</div><div><ol style="text-align: left;"><li>Storing this tracking data in sessionStorage is a good idea since it won't share with other tabs.</li><li>If user performs above actions, then store those info in sessionStorage as array of actions with time</li></ol><div>Here is the code snippet</div></div><div><br /></div><div><div class="slcode" style="background-color: #1f1f1f; color: #cccccc; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">generateXPathWithNearestParentId</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">path</span> <span style="color: #d4d4d4;">=</span> <span style="color: #ce9178;">''</span>;</div><div> <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">nearestParentId</span> <span style="color: #d4d4d4;">=</span> <span style="color: #569cd6;">null</span>;</div><br /><div> <span style="color: #6a9955;">// Check if the current element's has an ID</span></div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">id</span>) {</div><div> <span style="color: #9cdcfe;">nearestParentId</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">id</span>;</div><div> }</div><br /><div> <span style="color: #c586c0;">while</span> (<span style="color: #d4d4d4;">!</span><span style="color: #9cdcfe;">nearestParentId</span> <span style="color: #d4d4d4;">&&</span> <span style="color: #9cdcfe;">element</span> <span style="color: #d4d4d4;">!==</span> <span style="color: #9cdcfe;">document</span>.<span style="color: #9cdcfe;">body</span>) {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">tagName</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">tagName</span>.<span style="color: #dcdcaa;">toLowerCase</span>();</div><div> <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">index</span> <span style="color: #d4d4d4;">=</span> <span style="color: #b5cea8;">1</span>;</div><div> <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">sibling</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">previousElementSibling</span>;</div><br /><div> <span style="color: #c586c0;">while</span> (<span style="color: #9cdcfe;">sibling</span>) {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">sibling</span>.<span style="color: #9cdcfe;">tagName</span>.<span style="color: #dcdcaa;">toLowerCase</span>() <span style="color: #d4d4d4;">===</span> <span style="color: #4fc1ff;">tagName</span>) {</div><div> <span style="color: #9cdcfe;">index</span> <span style="color: #d4d4d4;">+=</span> <span style="color: #b5cea8;">1</span>;</div><div> }</div><div> <span style="color: #9cdcfe;">sibling</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">sibling</span>.<span style="color: #9cdcfe;">previousElementSibling</span>;</div><div> }</div><br /><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">index</span> <span style="color: #d4d4d4;">===</span> <span style="color: #b5cea8;">1</span>) {</div><div> <span style="color: #9cdcfe;">path</span> <span style="color: #d4d4d4;">=</span> <span style="color: #ce9178;">`/</span><span style="color: #569cd6;">${</span><span style="color: #4fc1ff;">tagName</span><span style="color: #569cd6;">}${</span><span style="color: #9cdcfe;">path</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">`</span>;</div><div> } <span style="color: #c586c0;">else</span> {</div><div> <span style="color: #9cdcfe;">path</span> <span style="color: #d4d4d4;">=</span> <span style="color: #ce9178;">`/</span><span style="color: #569cd6;">${</span><span style="color: #4fc1ff;">tagName</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">[</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">index</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">]</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">path</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">`</span>;</div><div> }</div><br /><div> <span style="color: #6a9955;">// Check if the current element's parent has an ID</span></div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">parentElement</span>.<span style="color: #9cdcfe;">id</span>) {</div><div> <span style="color: #9cdcfe;">nearestParentId</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">parentElement</span>.<span style="color: #9cdcfe;">id</span>;</div><div> <span style="color: #c586c0;">break</span>; <span style="color: #6a9955;">// Stop searching when we find the nearest parent with an ID</span></div><div> }</div><br /><div> <span style="color: #9cdcfe;">element</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #9cdcfe;">parentElement</span>;</div><div> }</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">nearestParentId</span>) {</div><div> <span style="color: #9cdcfe;">path</span> <span style="color: #d4d4d4;">=</span> <span style="color: #ce9178;">`//*[@id='</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">nearestParentId</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">']</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">path</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">`</span>;</div><div> <span style="color: #c586c0;">return</span> <span style="color: #9cdcfe;">path</span>;</div><div> }</div><div> <span style="color: #c586c0;">return</span> <span style="color: #9cdcfe;">path</span>; <span style="color: #6a9955;">// No parent with an ID found</span></div><div> };</div><br /><div> <span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">handleClick</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">event</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">tracks</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">parse</span>(</div><div> <span style="color: #9cdcfe;">sessionStorage</span>.<span style="color: #dcdcaa;">getItem</span>(<span style="color: #ce9178;">'tracks'</span>) <span style="color: #d4d4d4;">||</span> <span style="color: #ce9178;">'[]'</span></div><div> );</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">target</span> <span style="color: #d4d4d4;">=</span> <span style="color: #dcdcaa;">generateXPathWithNearestParentId</span>(<span style="color: #9cdcfe;">event</span>.<span style="color: #9cdcfe;">target</span>);</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">track</span> <span style="color: #d4d4d4;">=</span> {</div><div> <span style="color: #9cdcfe;">type</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'click'</span>,</div><div> <span style="color: #9cdcfe;">target</span>,</div><div> <span style="color: #9cdcfe;">time</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Date</span>(),</div><div> };</div><div> <span style="color: #4fc1ff;">tracks</span>.<span style="color: #dcdcaa;">push</span>(<span style="color: #4fc1ff;">track</span>);</div><div> <span style="color: #9cdcfe;">sessionStorage</span>.<span style="color: #dcdcaa;">setItem</span>(<span style="color: #ce9178;">'tracks'</span>, <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">stringify</span>(<span style="color: #4fc1ff;">tracks</span>));</div><div> };</div><br /><div> <span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">handleChange</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">event</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">tracks</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">parse</span>(</div><div> <span style="color: #9cdcfe;">sessionStorage</span>.<span style="color: #dcdcaa;">getItem</span>(<span style="color: #ce9178;">'tracks'</span>) <span style="color: #d4d4d4;">||</span> <span style="color: #ce9178;">'[]'</span></div><div> );</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">prevCommand</span> <span style="color: #d4d4d4;">=</span></div><div> <span style="color: #4fc1ff;">tracks</span> <span style="color: #d4d4d4;">&&</span> <span style="color: #4fc1ff;">tracks</span>.<span style="color: #9cdcfe;">length</span> <span style="color: #d4d4d4;">?</span> <span style="color: #4fc1ff;">tracks</span>[<span style="color: #4fc1ff;">tracks</span>.<span style="color: #9cdcfe;">length</span> <span style="color: #d4d4d4;">-</span> <span style="color: #b5cea8;">1</span>] <span style="color: #d4d4d4;">:</span> <span style="color: #569cd6;">null</span>;</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">target</span> <span style="color: #d4d4d4;">=</span> <span style="color: #dcdcaa;">generateXPathWithNearestParentId</span>(<span style="color: #9cdcfe;">event</span>.<span style="color: #9cdcfe;">target</span>);</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">track</span> <span style="color: #d4d4d4;">=</span> {</div><div> <span style="color: #9cdcfe;">type</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'change'</span>,</div><div> <span style="color: #9cdcfe;">target</span>,</div><div> <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">event</span>.<span style="color: #9cdcfe;">target</span>.<span style="color: #9cdcfe;">value</span>,</div><div> <span style="color: #9cdcfe;">time</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Date</span>(),</div><div> };</div><div> <span style="color: #c586c0;">if</span> (</div><div> <span style="color: #4fc1ff;">prevCommand</span> <span style="color: #d4d4d4;">&&</span></div><div> <span style="color: #4fc1ff;">prevCommand</span>.<span style="color: #9cdcfe;">type</span> <span style="color: #d4d4d4;">===</span> <span style="color: #ce9178;">'change'</span> <span style="color: #d4d4d4;">&&</span></div><div> <span style="color: #4fc1ff;">prevCommand</span>.<span style="color: #9cdcfe;">target</span> <span style="color: #d4d4d4;">===</span> <span style="color: #4fc1ff;">target</span></div><div> ) {</div><div> <span style="color: #4fc1ff;">tracks</span>.<span style="color: #dcdcaa;">pop</span>();</div><div> }</div><div> <span style="color: #4fc1ff;">tracks</span>.<span style="color: #dcdcaa;">push</span>(<span style="color: #4fc1ff;">track</span>);</div><div> <span style="color: #9cdcfe;">sessionStorage</span>.<span style="color: #dcdcaa;">setItem</span>(<span style="color: #ce9178;">'tracks'</span>, <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">stringify</span>(<span style="color: #4fc1ff;">tracks</span>));</div><div> };</div><br /><div> <span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">handleDocumentLoad</span> <span style="color: #d4d4d4;">=</span> () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">let</span> <span style="color: #9cdcfe;">oldHref</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">document</span>.<span style="color: #9cdcfe;">location</span>.<span style="color: #9cdcfe;">href</span>;</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">body</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelector</span>(<span style="color: #ce9178;">'body'</span>);</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">observer</span> <span style="color: #d4d4d4;">=</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">MutationObserver</span>(<span style="color: #9cdcfe;">mutations</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">oldHref</span> <span style="color: #d4d4d4;">!==</span> <span style="color: #9cdcfe;">document</span>.<span style="color: #9cdcfe;">location</span>.<span style="color: #9cdcfe;">href</span>) {</div><div> <span style="color: #9cdcfe;">oldHref</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">document</span>.<span style="color: #9cdcfe;">location</span>.<span style="color: #9cdcfe;">href</span>;</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">tracks</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">parse</span>(</div><div> <span style="color: #9cdcfe;">sessionStorage</span>.<span style="color: #dcdcaa;">getItem</span>(<span style="color: #ce9178;">'tracks'</span>) <span style="color: #d4d4d4;">||</span> <span style="color: #ce9178;">'[]'</span></div><div> );</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">track</span> <span style="color: #d4d4d4;">=</span> {</div><div> <span style="color: #9cdcfe;">type</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'url'</span>,</div><div> <span style="color: #9cdcfe;">value</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">oldHref</span>,</div><div> <span style="color: #9cdcfe;">time</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Date</span>(),</div><div> };</div><div> <span style="color: #4fc1ff;">tracks</span>.<span style="color: #dcdcaa;">push</span>(<span style="color: #4fc1ff;">track</span>);</div><div> <span style="color: #9cdcfe;">sessionStorage</span>.<span style="color: #dcdcaa;">setItem</span>(<span style="color: #ce9178;">'tracks'</span>, <span style="color: #9cdcfe;">JSON</span>.<span style="color: #dcdcaa;">stringify</span>(<span style="color: #4fc1ff;">tracks</span>));</div><div> }</div><div> });</div><div> <span style="color: #4fc1ff;">observer</span>.<span style="color: #dcdcaa;">observe</span>(<span style="color: #4fc1ff;">body</span>, { <span style="color: #9cdcfe;">childList</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">true</span>, <span style="color: #9cdcfe;">subtree</span><span style="color: #9cdcfe;">:</span> <span style="color: #569cd6;">true</span> });</div><div> };</div><div> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">addEventListener</span>(<span style="color: #ce9178;">'click'</span>, <span style="color: #dcdcaa;">handleClick</span>);</div><div> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">addEventListener</span>(<span style="color: #ce9178;">'input'</span>, <span style="color: #dcdcaa;">handleChange</span>);</div><div> <span style="color: #9cdcfe;">window</span>.<span style="color: #dcdcaa;">onload</span> <span style="color: #d4d4d4;">=</span> <span style="color: #dcdcaa;">handleDocumentLoad</span>;</div><br /></div></div><div><br /></div><p></p>Samplehttp://www.blogger.com/profile/12265217798816253449noreply@blogger.com1tag:blogger.com,1999:blog-8067804150149025915.post-91837163240713562332023-12-29T21:30:00.000-08:002023-12-29T21:31:35.704-08:00Get Resize factor of an image after adjusting to its width or height in javascript<p>We display images according to the width of the parent div. If you need to position items on that image based on x, y coordinates, you must calculate the final x, y coordinates based on the resize factor of that image. The following code snippet will assist you in obtaining the resize factor. Using this factor, you can resize the image for a specific width and height and retrieve the dimensions of the final image with the applied resize factor.</p><div><div class="slcode" style="background-color: #1f1f1f; color: #cccccc; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; line-height: 18px; white-space: pre;"><div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">getImageDimension</span> <span style="color: #d4d4d4;">=</span> (<span style="color: #9cdcfe;">url</span>, <span style="color: #9cdcfe;">adjustWidth</span>, <span style="color: #9cdcfe;">adjustHeight</span>) <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Promise</span>(<span style="color: #569cd6;">async</span> (<span style="color: #dcdcaa;">resolve</span>, <span style="color: #dcdcaa;">reject</span>) <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">url</span>) {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">img</span> <span style="color: #d4d4d4;">=</span> <span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Image</span>();</div><div> <span style="color: #4fc1ff;">img</span>.<span style="color: #dcdcaa;">onload</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">hFactor</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">height</span> <span style="color: #d4d4d4;">/</span> <span style="color: #9cdcfe;">adjustHeight</span>;</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">wFactor</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">width</span> <span style="color: #d4d4d4;">/</span> <span style="color: #9cdcfe;">adjustWidth</span>;</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #4fc1ff;">hFactor</span> <span style="color: #d4d4d4;">></span> <span style="color: #4fc1ff;">wFactor</span>) {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">dim</span> <span style="color: #d4d4d4;">=</span> {</div><div> <span style="color: #9cdcfe;">width</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">width</span>,</div><div> <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">height</span>,</div><div> <span style="color: #9cdcfe;">factor</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">height</span> <span style="color: #d4d4d4;">/</span> <span style="color: #9cdcfe;">adjustHeight</span></div><div> };</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">adjustHeight</span>) {</div><div> <span style="color: #4fc1ff;">dim</span>.<span style="color: #9cdcfe;">width</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">width</span> <span style="color: #d4d4d4;">*</span> (<span style="color: #9cdcfe;">adjustHeight</span> <span style="color: #d4d4d4;">/</span> <span style="color: #4fc1ff;">dim</span>.<span style="color: #9cdcfe;">height</span>);</div><div> <span style="color: #4fc1ff;">dim</span>.<span style="color: #9cdcfe;">height</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">adjustHeight</span>;</div><div> }</div><div> <span style="color: #dcdcaa;">resolve</span>(<span style="color: #4fc1ff;">dim</span>);</div><div> } <span style="color: #c586c0;">else</span> {</div><div> <span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">dim</span> <span style="color: #d4d4d4;">=</span> {</div><div> <span style="color: #9cdcfe;">width</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">width</span>,</div><div> <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">height</span>,</div><div> <span style="color: #9cdcfe;">factor</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">width</span> <span style="color: #d4d4d4;">/</span> <span style="color: #9cdcfe;">adjustWidth</span></div><div> };</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">adjustWidth</span>) {</div><div> <span style="color: #4fc1ff;">dim</span>.<span style="color: #9cdcfe;">height</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">element</span>.<span style="color: #4fc1ff;">target</span>.<span style="color: #9cdcfe;">height</span> <span style="color: #d4d4d4;">*</span> (<span style="color: #9cdcfe;">adjustWidth</span> <span style="color: #d4d4d4;">/</span> <span style="color: #4fc1ff;">dim</span>.<span style="color: #9cdcfe;">width</span>);</div><div> <span style="color: #4fc1ff;">dim</span>.<span style="color: #9cdcfe;">width</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">adjustWidth</span>;</div><div> }</div><div> <span style="color: #dcdcaa;">resolve</span>(<span style="color: #4fc1ff;">dim</span>);</div><div> }</div><div> };</div><div> <span style="color: #4fc1ff;">img</span>.<span style="color: #dcdcaa;">onerror</span> <span style="color: #d4d4d4;">=</span> () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #dcdcaa;">reject</span>(<span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Error</span>(<span style="color: #ce9178;">'Image not found'</span>));</div><div> };</div><div> <span style="color: #4fc1ff;">img</span>.<span style="color: #9cdcfe;">src</span> <span style="color: #d4d4d4;">=</span> <span style="color: #9cdcfe;">url</span>;</div><div> } <span style="color: #c586c0;">else</span> {</div><div> <span style="color: #dcdcaa;">reject</span>(<span style="color: #569cd6;">new</span> <span style="color: #4ec9b0;">Error</span>(<span style="color: #ce9178;">'Invalid Image URL'</span>));</div><div> }</div><div> });</div><div>};</div></div></div>Samplehttp://www.blogger.com/profile/12265217798816253449noreply@blogger.com2