How to use stack trace to find where in the code error is?

Question

This is using React JS, Gatsby, and Material UI. I just went through the code and found every single .map() in the code, every single .forEach() in the code, and made sure they all had keys. It's possible, but I hope that this approach of just going through every map or forEach in the code is not the most practical way to approach this and don't want to do it again to see if I missed one. I also searched inside every component. When I click on the hyperlinks in the code, it doesn't bring me to where the error is and it looks like it brings me to some behind the scene stuff.

How do I approach reading this stack trace, and general stack traces in this format in the future? I am still pretty new to front end development, so I am sorry if this question is obvious.

I am looking to find the line in the code that generated this error.

react-dom.development.js:67 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    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 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 div
    at Container (webpack-internal:///./node_modules/@material-ui/core/esm/Container/Container.js:84:23)
    at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:61:31)
    at ContentWrapper (webpack-internal:///./src/components/content-wrapper.js:26:23)
    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 Footer (webpack-internal:///./src/components/common/footer/index.js:127:28)
    at Layout (webpack-internal:///./src/components/Layout/index.js:28:23)
    at LandingTemplate (webpack-internal:///./src/templates/landing/index.js:105:23)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:286:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:41:24)
    at TopLayout (webpack-internal:///./plugins/gatsby-plugin-top-layout/TopLayout.js:22:23)
    at StylesProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/StylesProvider/StylesProvider.js:49:24)
    at GatedContentHandler (webpack-internal:///./src/utils/GatedContentHandler.js:31:23)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at withLocation (webpack-internal:///./src/utils/GatedContentHandler.js:70:24)
    at eval (webpack-internal:///./src/components/Search/SearchContext.js:46:25)
    at SalesforceProvider (webpack-internal:///./src/components/Salesforce/SalesforceProvider.js:28:66)
    at CookiesProvider (webpack-internal:///./node_modules/react-cookie/es6/CookiesProvider.js:24:28)
    at AuthProvider (webpack-internal:///./src/utils/context/AuthContext.js:50:23)
    at ApolloProvider (webpack-internal:///./node_modules/@apollo/client/react/context/ApolloProvider.js:12:21)
    at Apollo (webpack-internal:///./src/providers/apollo.js:34:23)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:209:68)

The general idea of a stack trace is that the element at the top is where the error is from and the ones below are all the parents in which that's wrapped - Premised this, we can see that `div`, `Grid` and `WithStyles` are components a bit too generalised to understand exactly which component we are into, so we need to look on something more specific; In your case, I would start looking from the `Footer` component, going up to some `ContentWrapper` with some `Container`; That should help narrowing down the area enough to spot the problem — ale917k, Oct 04 '21 at 18:00
Also when you open a file, they will show you the bundled code that can be hard to read, but if you try to give it a look you should be able to spot variable namings and functions that should help you understand where that issue is actually helping — ale917k, Oct 04 '21 at 18:02
Last but not least, make sure the `key` is added to the parent component rendered by the map -> This: `map(() => (<>
Some content
>)` will flag the warning as the key should be in the upper tag, as: `map(() => (
Some content
)` — ale917k, Oct 04 '21 at 18:05
Awesome, thank you so much, especially for that last clarification — Anon Eemus, Oct 04 '21 at 19:14

score 0 · Answer 1 · answered Oct 04 '21 at 18:22

When reading the stack trace, the first line will be where the error was thrown. In this case, it is an internal React error, trying to tell you that you're missing a key value for elements in a loop.

When approaching this kind of error, you can start reading from the bottom to the top. There you will notice familiar components, such as App. If you're using front end libs, you will end up noticing their components in this chain, sometimes with intermediate (internal) components.

Hopefully, by going bottom-up, you can find the place where your for-loop (forEach, map), function is.

Another tip is for you to look at the path of the files. In this case, your error is most probably in your source code (as opposed to code in node_modules/). In this case, I can bet your error is in the Footer component, in the place where you use material-ui's Grid

Looking at the Grid's docs, I can see an example using key here: https://mui.com/components/grid/#responsive-values — Bernardo Ferreira Bastos Braga, Oct 04 '21 at 18:26

How to use stack trace to find where in the code error is?

1 Answers1

Linked