Radar for URLs of Google sheets cannot be generated when executed on the server.

[shenxiyue]

When the technology radar is run on the server by downloading the code or pulling the docker image, the radar of the URL of the Google sheet cannot be generated, even the given example “https://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit” does not work, and no success but no error. But it can be successfully generated when entering the URL of the csv file saved in Github. May I ask what could be the cause? Thanks for viewing.

[Devansh Sharma]

Hi @shenxiyue , the Google Sheet you have mentioned seems to be working fine on local/docker for us. Could you pls share screenshots of what you see in the Browser Console or on the page itself ? That would help in debugging the issue.

Also, can you pls confirm you have tried this while logged in with Google in a normal browser session (non-incognito) and have 3rd party cookies enabled ?

[shenxiyue]

The page displayed after entering the URL “https://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit” looks like the first image or the second image. No error is reported, but the radar is not generated after the browser is loaded, and the result of the GET request output on the terminal is 304 instead of 200.


And I have logged into my personal account in Google Chrome and set it up as shown below before testing.

Also, I would like to ask if build-your-own-radar supports generating radar with csv files saved on Gitlab? Because when I test, the file on Github succeeds, but the one on Gitlab fails. I can't tell if it's a bug or if it's not natively supported.
Finally, thank you very much for your answer.

[Devansh Sharma]

Thanks for sharing screenshots! Could you also share a screenshot of what the browser's developer console reports once you have requested for the sheet URL ?

Also, I would like to ask if build-your-own-radar supports generating radar with csv files saved on Gitlab? Because when I test, the file on Github succeeds, but the one on Gitlab fails. I can't tell if it's a bug or if it's not natively supported.

Any csv file url that can be accessed publicly without need of any authentication will work on the app.
There have been issues reported earlier where CORS headers had to be added for some specific file sources (S3 for example). Can you check what sort of error/status code (Forbidden or CORS errors or anything else) is reported when requesting from GitLab ?

[shenxiyue]

Thanks for your answer! Screenshots are as follows.
I deployed the build-your-own-radar by pulling the docker image on the virtual machine (Ubuntu 22.04) and opened the url “http://10.9.231.163:8080” on my own computer (Windows 10):

When I enter the URL “https://raw.githubusercontent.com/shenxiyue/Enflame-Technology-Radar/master/radar.csv” of a file saved on Github:

And when I enter the URL “https://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit” of the Google sheet:

Regarding the file saved on Gitlab, the situation is the same as that of the Google sheet, no error is reported, but it has not been successfully generated. This problem may be related to the “CORS headers” you mentioned because I didn't know that before.
When I enter the URL “http://git.enflame.cn/int.xiyue.shen/radar/raw/master/Enflame-radar.csv” of a file saved on Gitlab that requires corporate network access:

[Devansh Sharma]

Thanks for sharing the logs! The nginx logs don't seem to show any issues. Can you share your Chrome's console logs, to see if there are any errors there ? You can get those by right-clicking inside the Chrome window once you reach the loading screen -> Inspect Element -> Console tab.

The GitLab file case also might be showing some extra info/errors in the Chrome console. It would help in understanding the issue if you could share similar screenshots for that URL as well.

[shenxiyue]

Thank you! Here are the Chrome's console logs:
When I enter the URL (https://raw.githubusercontent.com/shenxiyue/Enflame-Technology-Radar/master/radar.csv%E2%80%9D) of a file saved on Github which can successfully get the radar:

And when I enter the URL (https://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit%E2%80%9D) of the Google sheet:

Sorry for not being able to show the logs after entering the URL of the file on Gitlab, because I can't connect to my company's intranet at the moment.

[Devansh Sharma]

Thanks for sharing the logs. We see the HTTP 400 error status on the accounts.google.com/* call which might be the cause of it failing for Google Sheets, as only the Google Sheets flow depends on Google authentication. Can you pls confirm if you have setup your GCP Client ID with JavaScript Origin pointing to your local domain/IP ? Reference link for this.
Also can you share what the Uncaught object in the error you shared above tells on expanding it ?

Additionally, to confirm if this is an issue related to Google Auth in your local setup, can you try if the same sheet works in https://radar.thoughtworks.com ?

[shenxiyue]

Thank you for your reply! Yes, I used my client ID as shown in the image below when running the docker. I created a new project in Google Cloud and created the OAuth 2.0 Client ID of the type Web application as shown in the screenshot, is there anything else I need to pay attention to when creating the project or creating the credentials? It may be that I overlooked some parts and caused the error.

And here is the content of Uncaught.

Additionally, to confirm if this is an issue related to Google Auth in your local setup, can you try if the same sheet works in https://radar.thoughtworks.com/ ?

Yes, in https://radar.thoughtworks.com/ I can successfully get the radar of the URL of the Google sheet.

[Devansh Sharma]

Thanks for sharing this info! The way you have setup the client ID looks right. But looking at the expanded error I think the Authorized JavaScript origins might not be set correctly. Can you pls check if you have set that for your client ID ? Ideally for a local setup you would want to set it as http://localhost:<port>.

More info about setting this is present here and here.

[shenxiyue]

Thanks for your answer! I think it is indeed the cause of the error. Since I'm deploying build-your-own-radar on a remote server and opening the web page in my local browser, I have tried to enter http://[Server IP]:8080 in the Authorized JavaScript origins, but this was not compliant, so it ended up not being configured.
Later, I will set up the GUI of the server and try it out. Thank you very much for your continued attention.

[Devansh Sharma]

Yes, it seems like you can only configure HTTPS domain names (expect http://localhost) for that field and not IP addresses.

Later, I will set up the GUI of the server and try it out.

Great, thanks!