Introduction
No matter how flawless your codebase is and regardless of how much bandwidth your team spends on debugging, it’s nearly impossible to completely avoid errors from creeping in and negatively affecting your site’s customer experience, especially third-party ones.
However, if you troubleshoot efficiently, you can always minimize the negative impact of these errors on your customer experience and potential revenue.
In this blog post, let’s look at script errors, why they are caused, and how you can troubleshoot them.
What are Script Errors?
A script error occurs when an error on a third-party plugin, file, or add-on triggers an error on your domain. Modern browsers block local scripts from accessing information from external domains, so while Noibu detects and reports script errors, the NoibuJS script cannot retrieve specific information about the errors.
The NoibuJS script wraps your frontend code to extract as much data as possible when errors occur. Script errors pass by this wrapping, but we do our best to separate distinct script errors to offer the most error coverage possible. You can identify a script error in the Noibu platform by its error signature, which always begins with script error.
The root cause of a script error is cross-origin request blocking. To expand the range of error data Noibu collects, you can change the way you fetch certain scripts from their respective servers to avoid cross-origin checking. Consider the methods listed below:
Method 1: Add the cross-origin Attribute to the Script Tag in your HTML
Imagine you have a third-party script enabled in your HTML code, written as follows:
<script src=”http://not-your-domain.com/app.js”></script>
To instruct the server to fetch the script URL anonymously, add crossorigin=”anonymous” to the script tag. This enables Noibu to access more error data without impacting the script’s functionality.
The adjusted script looks like this:
<script src=”http://not-your-domain.com/app.js” crossorigin=”anonymous”></script>
Method 2: Add cross-origin headers
The implementation steps for adding cross-origin headers vary depending on your backend architecture, and the solution is only possible if you have access to the server.
The solution is to configure your backend so that when the script is requested from the client side, the following header is sent back:
Access-Control-Allow-Origin: *
Noibu: Your Trusted Partner to Detect all Third-Party Errors on Your Site
Since you have little to no control over errors caused by third-parties, the best you can do is have an automated error monitoring and resolution workflow in place that flags any third-party errors that occur on your site in real time and provides you with all necessary technical details required to fix them.
Noibu – a robust error and health monitoring platform is designed to help technical teams streamline their error resolution workflows by flagging all bugs (both first and third party) in real time and providing the details you need to resolve them efficiently without having to further investigate or replicate.
For errors that cannot be addressed at your end, the platform shares all information that you can provide to the concerned team so they can resolve the issue quickly without wasting any time. Overall, this not only helps optimize how you approach and address revenue-impacting e-commerce errors, but also reduces your overall error resolution time by up to 70%.
