Backstage Plugin Emissions Graph Erro

[Luke Beamish]

Hey,

We've setup the Backstage plugin within our instance and it appears to be querying our data correctly as most of the components appear to be working except the cloud usage graph which throws the error below when it attempts to load. We've just setup the reporting and athena integration in AWS a few days ago (setup to report daily so there is some data already available) and not sure if the root cause of this issue is due to insufficient data or something else.

VM40291 react_devtools_backend.js:4026 ErrorBoundary, error: TypeError: Cannot read properties of undefined (reading 'map'), info: [object Object]
    at ErrorBoundary2 (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at div
    at Paper (webpack-internal:///../../node_modules/@material-ui/core/esm/Paper/Paper.js:47:23)
    at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at Card (webpack-internal:///../../node_modules/@material-ui/core/esm/Card/Card.js:27:23)
    at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at TabbedCard (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:6498:5)
    at div
    at Grid (webpack-internal:///../../node_modules/@material-ui/core/esm/Grid/Grid.js:235:35)
    at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at div
    at Grid (webpack-internal:///../../node_modules/@material-ui/core/esm/Grid/Grid.js:235:35)
    at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at EmissionsTab (webpack-internal:///../../node_modules/@cloud-carbon-footprint/backstage-plugin-frontend/dist/esm/Plugin-74b9ce5b.esm.js:26:3)
    at article
    at Content (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:4447:11)
    at RoutedTabs (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:4541:11)
    at TabbedLayout (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:4581:52)
    at PluginTabs (webpack-internal:///../../node_modules/@cloud-carbon-footprint/backstage-plugin-frontend/dist/esm/Plugin-74b9ce5b.esm.js:88:3)
    at D (webpack-internal:///../../node_modules/react-router/index.js:35:685)
    at FlatRoutes (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2547:81)
    at ThemeProvider (webpack-internal:///../../node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:41:24)
    at article
    at Content (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:4447:11)
    at div
    at ThemeProvider (webpack-internal:///../../node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:41:24)
    at Page (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:5763:11)
    at Plugin (webpack-internal:///../../node_modules/@cloud-carbon-footprint/backstage-plugin-frontend/dist/esm/Plugin-74b9ce5b.esm.js:142:19)
    at RoutableExtensionWrapper (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/index.esm.js:476:13)
    at AnalyticsContext (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/index.esm.js:69:11)
    at PluginErrorBoundary (eval at ES6ProxyComponentFactory (webpack-internal:///../../node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:14:7)
    at Suspense
    at Result (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/index.esm.js:531:21)
    at D (webpack-internal:///../../node_modules/react-router/index.js:35:685)
    at FlatRoutes (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2547:81)
    at div
    at SidebarPage (webpack-internal:///../../node_modules/@backstage/core-components/dist/index.esm.js:3329:82)
    at Root (webpack-internal:///./src/components/Root/Root.tsx:81:17)
    at D (webpack-internal:///../../node_modules/react-router/index.js:35:685)
    at E (webpack-internal:///../../node_modules/react-router/index.js:38:820)
    at SignInPageWrapper (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2419:18)
    at x (webpack-internal:///../../node_modules/react-router/index.js:37:23)
    at w (webpack-internal:///../../node_modules/react-router-dom/index.js:42:23)
    at AppRouter (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2431:26)
    at RoutingProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:1948:3)
    at CssBaseline (webpack-internal:///../../node_modules/@material-ui/core/esm/CssBaseline/CssBaseline.js:66:31)
    at WithStyles (webpack-internal:///../../node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at ThemeProvider (webpack-internal:///../../node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:41:24)
    at Provider (webpack-internal:///./src/App.tsx:112:20)
    at AppThemeProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2166:29)
    at AppContextProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2057:3)
    at ApiProvider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:76:11)
    at Provider (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:2338:25)
    at App

Any help is very much appreciated.

[Cloud Carbon Footprint]

Hi Luke,

Thanks for your email and we're happy to see you're using Cloud Carbon Footprint's new Backstage plugin! We appreciate the details you've provided and are currently looking into this issue to see if we can replicate it and find a potential fix.

We'll be in touch soon!

Cheers,

Arik

[Luke Beamish]

Hey Arik

Thanks very much for the quick response. I’ve also raised an issue on the plugin repo here.

From our own digging, it looks like the chart colors aren’t part of the theme palette at the point when getChartColors() is called in the following: node_modules/@cloud-carbon-footprint/client/src/pages/EmissionsMetricsPage/EmissionsOverTimeCard/ApexLineChart/ApexLineChart.tsx > const colors = getChartColors(theme).

The error is coming from within the node_modules/@cloud-carbon-footprint/client/src/utils/themes/index.ts file when the function is attempting to map over theme.palette.chart which is undefined. We assume the array above in defaultTheme (the array of objects with keys of main) isn't being added/registered correctly.

Please let me know if there's any other info that could be of help if you have trouble reproducing it.

Luke

[Cloud Carbon Footprint]

Hi Luke,

That's super helpful information! Sorry for missing your issue and glad to see that you've made one for it! We'll take a look at the theme file while investigating, and then we can continue the conversation over there 😄

Thanks,

Arik