Approach: We will learn 3 methods to accomplish this task — all following the same approach but different way to implement the approach and extract the useful Information. Use whichever suits best in your case.
- window.addEventListener(“error”, //yourErrorLoggerFunction) — Attach an error event to the window object (DOM).
- document.querySelector(‘body’).onerror= //yourErrorLoggerFunction — Error Listener in the body tag -> Works both in Same Origin or Cross-Scripts of Same Origin.
- Create a script element and append it to the body tag of the source.
All three method can be implemented both in same source or any external source.
Note — Make sure this is the first thing to be executed by the browser (In case you are not sure it is strongly recommended to use Method 2).
Method 1: In this method, we will attach an Event Listener to our window object. Whenever any script error occurs, the attached errorLogger Function is triggered and inside the errorLoggerFunction we will extract all useful information from the event Object that our errorLogger function receives.
Find the HTML Code (Method 1):
Method 2: In this method, we will make use of onerror Event Handler.
- Step 1 — Get the body tag of that HTML Markup whichever is your case either the external HTML Markup or the Markup of the Currently loading Page.
- Step 2 — Now when we have got the body tag in a const identifier let say const bodyTag we will add onerror Event Handler to the bodyTag.
Did you notice the difference in the logger function of the above two methods — Usually in case of firing of any event, the function attached to it receives an event object but in this case (method 2) we receive a pre-extracted information (For Detailed Reason Refer MDN WebDocs).
Note — Keep in mind the order of error information received in the loggerFunction- Total 5 Information — Sequence always being the same.
Find the HTML Code (Method 2):
Method 3: In this method, we will attach a script element to the WebPage. This method is useful in cases when we want error logger to activate at a specific time or in cases of external script execution, etc.
- Step 1 — Get the body tag of the Markup Page you are targeting it.
- Step 2 — Prepare a script element and append it.
Explanation of example — Method 3: As you can notice we have used iframe to access index.html of the same Page(Same-Origin) we planted a script in parentPage to logg errors in another WebPage.
Warning — Although you will be blocked but Beware Using these Methods in case of CROSS-SCRIPTING (CORS) (Scripts of Different Origin) without written permission from the owner of that Page.
Find the HTML Code (Method 3):
Important Note –
- You can make use of both innerText and innerHTML to write the js script but we recommend using innerText as presence any HTML entity in the script would create any unwanted error.
- In method 3, the target and the way of getting them may differ in different cases. So the code used in the implementation of this method may differ slightly but the approach would remain same.