Inadequate error handling for failed data fetches during build

[wackerow]

Describe the bug

Recently we experienced a bug on the Layer 2 Networks page (https://ethereum.org/en/layer-2/networks/) where clicking on many of the network accordions was leading to the page immediately crashing with a 500 internal server error.

The console logs alluded to a variable being undefined which should normally have been the data from an API fetch, which is performed on the server at the time the site is built (not when the user visits the page). This was "fixed" by simply re-triggering the Netlify build, which ended up re-fetching the data successfully, and the immediate bug went away.

Despite that "fixing" the immediately issue, the underlying bug still exists where a failed data fetch does not properly surface itself, and we end up launching a deployment that has broken data and page elements.

To reproduce

Tricky to reproduce from production at the moment, but locally you could attempt to alter API fetches to mimic a response with undefined data.

Can see the endpoints being used for the layer 2 networks page inside src/pages/[locale]/layer-2/networks.tsx:

const loadData = dataLoader(
  [
    ["ethereumMarketcapData", fetchEthereumMarketcap],
    ["growThePieData", fetchGrowThePie],
    ["growThePieBlockspaceData", fetchGrowThePieBlockspace],
    ["growThePieMasterData", fetchGrowThePieMaster],
    ["l2beatData", fetchL2beat],
  ],
  REVALIDATE_TIME * 1000
)

Expected behavior

During a build, if data being fetched from these endpoints returns unsuccessfully, an error should be thrown which breaks/stops the build, preventing it from completing and being deployed.

Screenshots

No response

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Additional context

No response

Would you like to work on this issue?

• Yes
• No

[SamarthJ2004]

Hi @wackerow , I would like to work on this.

[isabelladebrito]

Just assigned to you, @SamarthJ2004! Let us know if you need any help 👐