Unexpected token p in JSON at position 4

[braghettos]

I followed all the instructions on https://roadie.io/backstage/plugins/argo-cd/ but once I try to create a component, I get the following error:

Error occurred while fetching data. SyntaxError: Unexpected token p in JSON at position 4

Expected Behavior

Show the status of ArgoCD

Current Behavior

Nothing is shown within the frontend but the error 'Error occurred while fetching data. SyntaxError: Unexpected token p in JSON at position 4'

Possible Solution

Steps to Reproduce

1. Follow this instructions: https://roadie.io/backstage/plugins/argo-cd/
2. Register this component: https://github.com/braghettos/gcptemplate
3. Create a new component of the latter type
4. Explore the component in the 'overview' section

Context

Your Environment

• Plugin Version (version of this software e.g. v0.4.3): "@roadiehq/backstage-plugin-argo-cd": "^0.1.7",
• Backstage version (e.g. 0.1.1-alpha23):
• NodeJS Version (e.g. v12):
• Operating System and Version (e.g. Ubuntu 14.04):
• Browser Information (e.g. chrome 85):

[mcalus3]

I need more clarification on the steps to reproduce:

2. Register this component: https://github.com/braghettos/gcptemplate

Does it mean that you want the backstage to open a pull request with a "starter" component-config definition file? If yes, then it doesn't have anything related to the argo-cd plugin, because it's not included in the annotations and thus it won't show up on the overview page.
If you meant to import the config file that it's already there (https://github.com/braghettos/gcptemplate/blob/main/template.yaml) then it still doesn't have annotation with argo-cd data, so even if you have errors in component imported from this file (I don't), it can't be related to the argo-cd plugin.

3. Create a new component of the latter type

And I don't know what this would mean too.

[braghettos]

Hi @mcalus3 , I've started from scratch in order to give you as much details as possible.

I followed this guide: https://backstage.io/docs/getting-started/running-backstage-locally and after that I followed this instructions: https://github.com/RoadieHQ/backstage-plugin-argo-cd.

I am registering a new component via this template: https://github.com/braghettos/gcptemplate/blob/main/template.yaml and argocd annotations are declared within the https://github.com/braghettos/gcptemplate/blob/main/%7B%7Bcookiecutter.component_id%7D%7D/catalog-info.yaml file.

Now I've started the app, imported the component, create the component and the repo is available here: https://github.com/braghettos/argocdtest.

I have an error on the Backstage GUI showing in the OVERVIEW tab that "Something went wrong. Please make sure that you installed: @roadiehq/backstage-plugin-argoCD plugin" - anyway there is a typo because it's @roadiehq/backstage-plugin-argo-cd.

If I look at the backstage/packages/app/packages.json file, I can see the entry "@roadiehq/backstage-plugin-argo-cd": "^0.1.7".

So now the error is different from the one that I got initially, let me know how can I help you for your analysis!

[braghettos]

[braghettos]

I also tried with a newly npx @backstage/create-app, same problem reported in the screenshoft.

[braghettos]

More insights from the browser developers tool:

Uncaught TypeError: Cannot read property 'name' of undefined
at eval (index.esm.js?f341:160)
at Array.map ()
at OverviewComponent (index.esm.js?f341:159)
at renderWithHooks (react-dom.development.js?57dc:14826)
at mountIndeterminateComponent (react-dom.development.js?57dc:17506)
at beginWork (react-dom.development.js?57dc:18630)
at HTMLUnknownElement.callCallback (react-dom.development.js?57dc:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js?57dc:238)
at invokeGuardedCallback (react-dom.development.js?57dc:293)
at beginWork$1 (react-dom.development.js?57dc:23235)

The above error occurred in the component:
in OverviewComponent (created by ArgoCDDetails)
in ArgoCDDetails (created by ArgoCDDetailsWidget)
in ErrorBoundary (created by ArgoCDDetailsWidget)
in ArgoCDDetailsWidget (at EntityPage.tsx:197)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at EntityPage.tsx:196)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at EntityPage.tsx:164)
in ComponentOverviewContent (at EntityPage.tsx:219)
in article (at Content.tsx:54)
in Content (at Tabbed.tsx:118)
in Layout (at EntityPageLayout.tsx:109)
in div (at Page.tsx:45)
in ThemeProvider (at Page.tsx:39)
in Page (at EntityPageLayout.tsx:85)
in EntityPageLayout (at EntityPage.tsx:215)
in ServiceEntityPage (at EntityPage.tsx:327)
in ComponentEntityPage (at EntityPage.tsx:424)
in EntityPage (at Router.tsx:57)
in EntityPageSwitch (at Router.tsx:83)
in EntityLoaderProvider (at Router.tsx:82)
in Route (at Router.tsx:79)
in Routes (at Router.tsx:77)
in Router (at App.tsx:78)
in Route (at App.tsx:76)
in FlatRoutes (at App.tsx:70)
in div (at Page.tsx:71)
in SidebarPage (at Root.tsx:76)
in Root (at App.tsx:101)
in Route (at App.tsx:352)
in Routes (at App.tsx:351)
in SignInPageWrapper (at App.tsx:350)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:349)
in AppRouter (at App.tsx:100)
in RoutingProvider (at App.tsx:278)
in CssBaseline (created by WithStyles(CssBaseline))
in WithStyles(CssBaseline) (at AppThemeProvider.tsx:94)
in ThemeProvider (at AppThemeProvider.tsx:93)
in AppThemeProvider (at App.tsx:277)
in AppContextProvider (at App.tsx:276)
in ApiProvider (at App.tsx:130)
in Provider (at App.tsx:97)
in App (created by HotExportedApp)
in AppContainer (created by HotExportedApp)
in HotExportedApp (at src/index.tsx:22)

[mcalus3]

Data object coming from your argoCD server api is in different shape than the plugn expects. I will fix this and put a guard for the fetched data to prevent it in the future.

It will be helpful if you open a devTools tab "Network" and copy the response to the request that is being made to the argoCD server by the plugin:

[braghettos]

@mcalus3 I found out that the token I was using was expired, I got a 403 but the error was not clear. I think that the issue can be closed, maybe it would be better to show a more clear error at frontend.

[mcalus3]

Yes, and thanks to this issue i know exactly where to add the code for it :)