Bug: Extension throws an error when setting color preference if user is not logged in to GitHub

[nickytonline]

Describe the bug

I came across this while investigating #237

When navigating to GitHub.com and you are not logged in to GitHub.com, the browser extension throws an error in the browser DevTools console.

github.ts.5c44c3e9.js:25 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'color_mode')
    at ne (github.ts.5c44c3e9.js:25:889)
    at C (github.ts.5c44c3e9.js:53:1144)
    at github.ts.5c44c3e9.js:53:1440
ne @ github.ts.5c44c3e9.js:25
C @ github.ts.5c44c3e9.js:53
(anonymous) @ github.ts.5c44c3e9.js:53

Steps to reproduce

1. .Ensure you are logged out of GitHub.com
2. Go to a repository's main page, like this one.
3. open the browser DevTools and you'll see the error

github.ts.5c44c3e9.js:25 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'color_mode')
    at ne (github.ts.5c44c3e9.js:25:889)
    at C (github.ts.5c44c3e9.js:53:1144)
    at github.ts.5c44c3e9.js:53:1440
ne @ github.ts.5c44c3e9.js:25
C @ github.ts.5c44c3e9.js:53
(anonymous) @ github.ts.5c44c3e9.js:53

The issue is the cookie does not contain color_mode if you are logged out.

logged out cookie contents:

'_octo=GH1.1.693368319.1691169597; preferred_color_mode=light; tz=America%2FToronto'

logged in cookie contents

'_octo=GH1.1.614461846.1691070766; color_mode=%7B%22color_mode%22%3A%22auto%22%2C%22light_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%2C%22dark_theme%22%3A%7B%22name%22%3A%22light%22%2C%22color_mode%22%3A%22light%22%7D%7D; preferred_color_mode=light; tz=America%2FToronto'

The issue is the code always assumes that the regex match is always succesful.

A small tweak to the code for color preference will fix this. See https://github.com/open-sauced/ai/blob/7ad0fdfe18ae1fe140582932bfc885716c0da729/src/utils/colorPreference.ts

type ColorScheme = "auto" | "light" | "dark";

export const prefersDarkMode = (cookieString: string): boolean => {
    const regex = /(?<=\bcolor_mode=)[^;]+/g;
    const match = regex.exec(cookieString);
    const cookie = match && JSON.parse(decodeURIComponent(match[0]));
-    const colorScheme: ColorScheme = cookie.color_mode ?? "auto";
+   const colorScheme: ColorScheme = cookie?.color_mode ?? "auto"; 

    if (colorScheme === "auto") {
        return window.matchMedia("(prefers-color-scheme: dark)").matches;
    }
    return colorScheme === "dark";
};

Browsers

No response

Additional context (Is this in dev or production?)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[github-actions]

🎉 This issue has been resolved in version 1.14.1-beta.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.14.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀