Gatsby: Is it possible to see error stacktrace from component?

[AAverin]

Summary

I have a javascript error inside my component and here is what I am getting

You can notice the error itself, but no details on where did it occur. Breakpoint is only settable on the first line of my code even though source maps seem to be working fine.

Is it possible to do something to see full stacktrace from the component, down to the line where the error occurred? I believe regular React applications can do that.

File contents (if changed)

gatsby-config.js:

const path = require('path')
module.exports = {
  siteMetadata: {
    title: ``,
    siteUrl: ``
  },
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`
    },
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        // You can add multiple tracking ids and a pageview event will be fired for all of them.
        trackingIds: [
          'UA--1' // Google Analytics / GA
          // "AW-CONVERSION_ID", // Google Ads / Adwords / AW
          // "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
        ],
        // This object gets passed directly to the gtag config command
        // This config will be shared accross all trackingIds
        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0
        },
        // This object is used for configuration specific to this plugin
        pluginConfig: {
          // Puts tracking script in the head instead of the body
          head: true,
          // Setting this parameter is also optional
          respectDNT: true
          // Avoids sending pageview hits from custom paths
          // exclude: ["/preview/**", "/do-not-track/me/too/"],
        }
      }
    },
    {
      resolve: `gatsby-plugin-react-helmet`
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 970
            }
          },
          {
            resolve: 'markdown-embed-youtube'
          },
          `gatsby-remark-autolink-headers`
        ]
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages/_blog/posts`,
        name: 'pages'
      }
    },
    {
      resolve: `gatsby-plugin-facebook-pixel`,
      options: {
        pixelId: ''
      }
    },
    `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-remark-images`,
      options: {
        maxWidth: 1080
      }
    },
    `gatsby-plugin-sitemap`,
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          '@src': path.resolve(__dirname, 'src'),
          '@components': path.resolve(__dirname, 'src/components')
        },
        extensions: []
      }
    }
  ]
}

package.json: N/A
gatsby-node.js: Generating blog nodes and pages, webpack config settings:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /paypal-checkout/,
            loader: 'null-loader'
          }
        ]
      }
    })
  }
}

gatsby-browser.js: N/A
gatsby-ssr.js:

const React = require('react')
const { renderToString } = require('react-dom/server')
const JssProvider = require('react-jss/lib/JssProvider').default
const getPageContext = require('./src/getPageContext').default

function replaceRenderer ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents
}) {
  // Get the context of the page to collected side effects.
  const muiPageContext = getPageContext()

  const bodyHTML = renderToString(
    <JssProvider registry={muiPageContext.sheetsRegistry}>
      {bodyComponent}
    </JssProvider>
  )

  replaceBodyHTMLString(bodyHTML)
  setHeadComponents([
    <style
      type='text/css'
      id='jss-server-side'
      key='jss-server-side'
      dangerouslySetInnerHTML={{
        __html: muiPageContext.sheetsRegistry.toString()
      }}
    />
  ])
}

exports.replaceRenderer = replaceRenderer

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[AAverin]

Would be great to get some feedback on this question

[dandv]

Same problem here. I think it's inaccurate to keep this issue closed, while no solution to it has been presented. I understand the algorithm by which the bot closed it, but just because an issue hasn't had a solution within 30 days, doesn't mean it's no longer an issue.

I filed https://github.com/gatsbyjs/gatsby/issues/25037 to express interest in component stack traces.

[ahmadhafez]

Same here! It will be great to get back on this question