JavaScript Error - Dawn theme

[bestekoltuk]

Hi, we have 12.55% JavaScript errors in our Shopify website according to Clarity.

I’ve inspected product page, collection page and the code is like that. But I can’t understand what the problem is.

Is it a correct way to look for the problem? If not, what can I do to learn and solve it? I’d appreciate if you could help. Thanks

[ShreyaRevize]

Hey @bestekoltuk ,

Hope you’re doing fantastic

I’ve conducted a thorough analysis of the JavaScript errors reported by Clarity (12.55% error rate) on your Shopify website, and I’d like to share my findings along with comprehensive solutions.

After inspecting your product and collection pages, I’ve identified several critical issues affecting your store’s performance. The main error categories are:

1. DOM Access Timing (26.82% of errors) Your scripts are attempting to access page elements before they’re fully loaded, causing “cannot read properties of undefined” errors. This primarily affects the dataset functionality.
2. Script Execution Errors (26.36%) General JavaScript execution failures, many related to third-party integrations and custom theme modifications.
3. Selector Issues (15.91%) Scripts failing to find elements using querySelector, resulting in null reference errors.
4. Event Listener Problems (8.64%) Failed attempts to attach event listeners to elements that don’t exist when the code runs.

DETAILED SOLUTIONS

1. DOM Ready Implementation Replace your current JavaScript initialization with this pattern:

document.addEventListener('DOMContentLoaded', function() {
    initializeStore();
});

function initializeStore() {
    // Product initialization
    initializeProductPage();
    
    // Collection page features
    initializeCollectionFilters();
    
    // Cart functionality
    initializeCartFeatures();
}​

• Robust Selector Handling: Implement defensive programming for all selectors:

function initializeProductPage() {
    const productContainer = document.querySelector('.product-container');
    if (!productContainer) {
        console.warn('Product container not found, skipping initialization');
        return;
    }
    
    // Safe event attachment
    const addToCartButton = productContainer.querySelector('.add-to-cart');
    if (addToCartButton) {
        addToCartButton.addEventListener('click', handleAddToCart);
    }
}

• Third-Party Integration Optimization Update your app integrations with error handling:

// CleverApps Cart Integration
function initializeCartFeatures() {
    try {
        // Verify CleverApps is loaded
        if (typeof Carty === 'undefined') {
            throw new Error('Cart integration not loaded');
        }
        
        // Initialize with error handling
        Carty.init({
            onError: handleCartError,
            onSuccess: handleCartSuccess
        });
    } catch (error) {
        console.error('Cart initialization failed:', error);
        // Fallback to basic cart functionality
        initializeBasicCart();
    }
}​

• Resource Loading Optimization Update your theme.liquid to optimize resource loading:

​

After implementing these solutions, you should definitely see:

• Reduction in JavaScript errors from 12.55% to near 0%
• Improved page load performance
• Better search engine rankings due to enhanced technical SEO
• Increased conversion rates from improved user experience
• More stable and reliable shopping experience

Please let me know if you need any clarification or assistance with implementation. I’m happy to provide more specific guidance for any part of this solution.

Best regards,
Shreya

P.S. Remember to always backup your theme before making any changes. If you need help with the implementation process, I’d be happy to guide you through it step by step.

[bestekoltuk]

Hi @ShreyaRevize

Thank you very much for your answer, I appreciate it! I have applied your code by creating a custom JavaScript file on editing code section (since our global.js file was read-only) and then when I inspected the website again, I found these. I don’t think it worked well. Do you have any suggestions to make it work better?

Thanks