How to Fix the “Failed to Read the CSSRules Property From CSSStyleSheet” Error

How to Fix the “Failed to Read the CSSRules Property From CSSStyleSheet” Error

When this issue was brought up, I did what I typically do when encountering issues like this. This article is about this particular problem as well as debugging critical issues.

Recently, a few customers ran into a problem in an Angular web application where an exception was thrown. Because of this problem, you couldn’t use a major part of the application. As a developer, I want to have clear instructions on how to reproduce an issue to not waste time. Good customer support or customers willing to share more details beyond “It isn’t working for me” can provide meaningful information to make the life of developers easier. Customer support wasn’t able to reproduce the issue on their devices, yet it was consistently happening for a few customers.

When this issue was brought up, I did what I typically do when encountering issues like this. This article is about this particular problem as well as debugging critical issues.

Finding the Root Cause

  • I used Instana, which is a great SaaS for monitoring microservices and websites. Through our monitoring tool, I was able to confirm that the error occurred for a few customers as well as the user actions that led to the issue. Even with this information, I couldn’t reproduce the issue at first.
  • I had the error stack trace thanks to our monitoring tool. With this, I found the code that caused the exception to be thrown. As you can see below, this code is querying all stylesheets in the DOM and doing something with the CSS rules of each stylesheet.
const styleSheets = Array.from(document.styleSheets);
    for (let style of styleSheets) {
       if (style instanceof CSSStyleSheet && style.cssRules) { // crash
          ... // do something with the CSS rules of each style sheet
       }
    }
Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
  • Our monitoring tool also provides browser data, so I checked which browsers were affected the most. It turned out it’s mainly recent versions of Chromium-based browsers like Google Chrome. As many of my coworkers use Google Chrome as the main browser for development, I found it strange that no other developer stumbled upon this yet.
  • There were no tests for this function. I tried to replicate the issue with unit tests with Jest, but the tests ran through successfully.
  • I searched online for this particular error message and found some helpful posts regarding rather recent changes in Chrome. In the latest version of Chrome, CORS security rules are also applicable for stylesheets (similar to Iframe rules). You can load and render them, but you cannot access the content stylesheets loaded from another domain through JavaScript. While this information was helpful, I still did not understand why this should be a problem.

angular javascript css programming software-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

5 Core Criteria for Selecting Software Development Company - TopDevelopers.co

Check out these five criteria for the selection of your software vendor, and you will never regret having the wrong quality product made for you.

Software Developer vs Software Engineer — Differences: Bogus or Real?

In this article, see if there are any differences between software developers and software engineers. What you’re about to read mostly revolves around my personal thoughts, deductions, and offbeat imagination. If you have different sentiments, add them in the comment section, and let’s dispute! So, today’s topic…

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public