The granted.dev website breaks with an Application Error: Client Side

[guhcampos]

Issue Description

I'm a Chrome user trying this on a Mac. When accessing https://granted.dev, the webpage briefly seems to render correctly, then breaks into: Application error: a client-side exception has occurred (see the browser console for more information).

See the screenshot:

I have a network-wide ad-blocker and it often breaks websites that depend on tracking code. I don't know if this is the case though. This is what I have on my chrome dev-tools console:

index-f1dcefc95d2e3d58.js:1  GET https://api.github.com/repos/common-fate/granted/contributors 403 (Forbidden)
AvatarGrid.revalidateIfStale @ index-f1dcefc95d2e3d58.js:1
(anonymous) @ 129-71c6e3a55aeef7f0.js:17
(anonymous) @ 129-71c6e3a55aeef7f0.js:17
(anonymous) @ 129-71c6e3a55aeef7f0.js:17
(anonymous) @ 129-71c6e3a55aeef7f0.js:17
__awaiter @ 129-71c6e3a55aeef7f0.js:17
(anonymous) @ 129-71c6e3a55aeef7f0.js:17
(anonymous) @ 129-71c6e3a55aeef7f0.js:17
commitHookEffectListMount @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
flushLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitRoot @ framework-e90c4f42039d8d0e.js:1
commitRootWhenReady @ framework-e90c4f42039d8d0e.js:1
performWorkOnRoot @ framework-e90c4f42039d8d0e.js:1
performWorkOnRootViaSchedulerTask @ framework-e90c4f42039d8d0e.js:1
performWorkUntilDeadline @ framework-e90c4f42039d8d0e.js:25Understand this error
framework-e90c4f42039d8d0e.js:1 TypeError: s.sort is not a function
    at AvatarGrid (index-f1dcefc95d2e3d58.js:1:10439)
    at renderWithHooks (framework-e90c4f42039d8d0e.js:1:50113)
    at updateFunctionComponent (framework-e90c4f42039d8d0e.js:1:85891)
    at beginWork (framework-e90c4f42039d8d0e.js:1:100305)
    at performUnitOfWork (framework-e90c4f42039d8d0e.js:1:141650)
    at framework-e90c4f42039d8d0e.js:1:141427
    at renderRootSync (framework-e90c4f42039d8d0e.js:1:141450)
    at performWorkOnRoot (framework-e90c4f42039d8d0e.js:1:137812)
    at performWorkOnRootViaSchedulerTask (framework-e90c4f42039d8d0e.js:1:163447)
    at MessagePort.performWorkUntilDeadline (framework-e90c4f42039d8d0e.js:25:1711)
defaultOnCaughtError @ framework-e90c4f42039d8d0e.js:1
logCaughtError @ framework-e90c4f42039d8d0e.js:1
l.componentDidCatch.e.callback @ framework-e90c4f42039d8d0e.js:1
callCallback @ framework-e90c4f42039d8d0e.js:1
commitCallbacks @ framework-e90c4f42039d8d0e.js:1
commitClassCallbacks @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
flushLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitRoot @ framework-e90c4f42039d8d0e.js:1
commitRootWhenReady @ framework-e90c4f42039d8d0e.js:1
performWorkOnRoot @ framework-e90c4f42039d8d0e.js:1
performWorkOnRootViaSchedulerTask @ framework-e90c4f42039d8d0e.js:1
performWorkUntilDeadline @ framework-e90c4f42039d8d0e.js:25Understand this error
main-39dfb449ef8ed5f5.js:1 TypeError: s.sort is not a function
    at AvatarGrid (index-f1dcefc95d2e3d58.js:1:10439)
    at renderWithHooks (framework-e90c4f42039d8d0e.js:1:50113)
    at updateFunctionComponent (framework-e90c4f42039d8d0e.js:1:85891)
    at beginWork (framework-e90c4f42039d8d0e.js:1:100305)
    at performUnitOfWork (framework-e90c4f42039d8d0e.js:1:141650)
    at framework-e90c4f42039d8d0e.js:1:141427
    at renderRootSync (framework-e90c4f42039d8d0e.js:1:141450)
    at performWorkOnRoot (framework-e90c4f42039d8d0e.js:1:137812)
    at performWorkOnRootViaSchedulerTask (framework-e90c4f42039d8d0e.js:1:163447)
    at MessagePort.performWorkUntilDeadline (framework-e90c4f42039d8d0e.js:25:1711)
renderError @ main-39dfb449ef8ed5f5.js:1
fn @ main-39dfb449ef8ed5f5.js:1
componentDidCatch @ main-39dfb449ef8ed5f5.js:1
l.componentDidCatch.e.callback @ framework-e90c4f42039d8d0e.js:1
callCallback @ framework-e90c4f42039d8d0e.js:1
commitCallbacks @ framework-e90c4f42039d8d0e.js:1
commitClassCallbacks @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
flushLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitRoot @ framework-e90c4f42039d8d0e.js:1
commitRootWhenReady @ framework-e90c4f42039d8d0e.js:1
performWorkOnRoot @ framework-e90c4f42039d8d0e.js:1
performWorkOnRootViaSchedulerTask @ framework-e90c4f42039d8d0e.js:1
performWorkUntilDeadline @ framework-e90c4f42039d8d0e.js:25Understand this error
main-39dfb449ef8ed5f5.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred
renderError @ main-39dfb449ef8ed5f5.js:1
fn @ main-39dfb449ef8ed5f5.js:1
componentDidCatch @ main-39dfb449ef8ed5f5.js:1
l.componentDidCatch.e.callback @ framework-e90c4f42039d8d0e.js:1
callCallback @ framework-e90c4f42039d8d0e.js:1
commitCallbacks @ framework-e90c4f42039d8d0e.js:1
commitClassCallbacks @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
recursivelyTraverseLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitLayoutEffectOnFiber @ framework-e90c4f42039d8d0e.js:1
flushLayoutEffects @ framework-e90c4f42039d8d0e.js:1
commitRoot @ framework-e90c4f42039d8d0e.js:1
commitRootWhenReady @ framework-e90c4f42039d8d0e.js:1
performWorkOnRoot @ framework-e90c4f42039d8d0e.js:1
performWorkOnRootViaSchedulerTask @ framework-e90c4f42039d8d0e.js:1
performWorkUntilDeadline @ framework-e90c4f42039d8d0e.js:25Understand this error
14Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was receivedUnderstand this error
granted.dev/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

Expected Behavior

The website should be rendered correctly.

Actual Behavior

Website is unusable with a Application error: a client-side exception has occurred (see the browser console for more information).

Reproduction Steps

Just visit https://granted.dev, possibly with a DNS-blackhole based ad-blocker. In my case I'm using Unifi's default ad-blocking feature with no custom entries.

Granted Logs

No response

Granted Version

No granted related.

OS Version Information

Mac OS Sequoia on an M1 Pro

Minimal Granted & AWS Config Configuration

N/A

Additional Relevant Configuration

No response

I acknowledge that:

• I have reviewed the FAQ and confirm that my issue is NOT among them.
• I have searched the Granted repository (both open and closed Discussions and Issues) and confirm this is not a duplicate of an existing issue or discussion.
• I have checked the "Preview" tab on all text fields to ensure that everything looks right, and have wrapped all configuration and code in code blocks with a group of three backticks (```) on separate lines.

[guhcampos]

Exploring it a bit further I think I understand the issue.

The 403 error on the Github Contributor API seems to be the culprit. I get this error when I'm connected to my employer VPN, likely because all employees are sharing a handful IP addresses, so we get rate-limited by this anonymous API. Switching my VPN off and using my own connection fixes it.

Since the error seems to be on the s.sort bit, it seems that whatever code is pulling Github contributors returns a null or otherwise non-iterable type, and this breaks the whole website, so adding the proper exception handling should fix that.