React Carbon Footprint

A React hook that monitors network activity and calculates the estimated CO2 emissions based on the Sustainable Web Design model provided by the CO2.js library. This hook enables developers to measure and optimize the environmental impact of their web applications in real-time.

Installation

To use the carbon footprint hook in your react project, first install the necessary dependencies:

npm install react-carbon-footprint

or

yarn add react-carbon-footprint

Usage

The useCarbonFootprint hook provides a simple interface to monitor network resource loads and estimate the resulting CO2 emissions. Here's a basic example of how to use it in a React component:

import React from 'react';
import { useCarbonFootprint } from 'react-carbon-footprint';

const CarbonFootprintDisplay: React.FC = () => {
  const [gCO2, bytesTransferred] = useCarbonFootprint();

  return (
    <div>
      <h2>Network Usage and CO2 Emissions</h2>
      <p><strong>Bytes Transferred:</strong> {bytesTransferred} bytes</p>
      <p><strong>CO2 Emissions:</strong> {gCO2.toFixed(2)} grams</p>
    </div>
  );
};

export default CarbonFootprintDisplay;

Parameters and Return

The useCarbonFootprint hook returns the following:

• gramsCO2 (number): The estimated amount of CO2 emitted (in grams) based on the number of bytes transferred over the network.
• bytesTransferred (number): The total number of bytes transferred over the network since the component was mounted.

🚀 Demo

Explore how the useCarbonFootprint hook works in action!

• Live demo: Experience the live demo page to see real-time network data tracking and CO2 emissions calculations.

• Source Code

How It Works

The useCarbonFootprint hook works by monitoring network resource loads in a React component. It calculates the total number of bytes transferred via HTTP requests (such as for images, scripts, and data from APIs) and then estimates the CO2 emissions based on that data.

1. Network Monitoring:

   • The hook uses the PerformanceObserver API, specifically the PerformanceResourceTiming entries, which track the resources loaded on the page and their associated network metrics, such as transferSize.

   • It calculates the total data transfer in bytes, which includes data such as images, CSS, JavaScript, and API calls made by the application.

2. CO2 Estimation:

   • The CO2.js library is then used to estimate the carbon emissions from the transferred data. The hook uses the "swd" (Sustainable Web Design) model, which is based on energy usage and carbon intensity from web activities.

Sustainable Web Design CO2 Estimation Model

The Sustainable Web Design model (swd) used in CO2.js provides an estimate of the carbon footprint generated by network data transfers. It calculates the CO2 emissions based on three primary factors:

• Network energy consumption: The energy used by the network infrastructure (e.g., ISPs, telecom networks).

• Data center energy consumption: The energy used to store and transmit data from cloud servers and data centers.

• End-user device consumption: The energy consumed by devices (e.g., smartphones, laptops) used by the user to load the resources.

Each of these components contributes to the total carbon footprint of data transfer, which is measured in grams of CO2 (gCO2).

More details about this estimation model can be found here.

Limitations

The calculation of data transfer size and CO2 emissions relies heavily on browser APIs such as PerformanceObserver and PerformanceResourceTiming. However, there are certain limitations and edge cases to be aware of:

Cross-Origin Resources and Timing-Allow-Origin

One of the key limitations is the handling of cross-origin requests (i.e., requests made to external servers that are not on the same origin as your website).

• Cross-Origin Resource Timing Restrictions:

  For security and privacy reasons, browsers restrict access to detailed performance metrics for cross-origin resources (e.g., external APIs, images, etc.). This means that for cross-origin requests, the transferSize attribute in PerformanceResourceTiming may be 0, and data transfer cannot be accurately measured unless the server provides the appropriate headers.

• Timing-Allow-Origin Header:

  If a server does not return the Timing-Allow-Origin header in the response, the browser will not provide detailed timing information (including transferSize) for that resource. This limits the accuracy of the hook's CO2 calculations for cross-origin requests.

  Solution: To ensure accurate tracking of data transfer for cross-origin resources, the server should include the following header in its response:

  Timing-Allow-Origin: *

  This header allows the browser to expose detailed performance metrics for the resource, including the transferSize.

More details about this limitation can be found in the MDN documentation.

License

MIT License

Contributing

Feel free to open issues or submit pull requests to improve this library!