links to tweets whose author limited who can view them crashes builds

[pieh]

• gatsby-remark-embedder version: 1.12.0
• node version: 10.16.3
• npm (or yarn) version: yarn@1.17.3

Relevant code or config

In gatsby-config (from reproduction site repository linked below)

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-embedder`],
      },
    },

What you did:

Author of tweet I had link for limited who can see their tweets - for example https://twitter.com/mattconvente/status/1099706762897342465

What happened:

Got following error when trying to build site:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot read property 'replace' of undefined

   1 | query BlogPostBySlug($slug: String!) {
   2 |   site {
   3 |     id
   4 |     siteMetadata {
   5 |       title
   6 |     }
   7 |   }
   8 |   markdownRemark(fields: {slug: {eq: $slug}}) {
   9 |     id
  10 |     excerpt(pruneLength: 160)
> 11 |     html
     |     ^
  12 |     frontmatter {
  13 |       title
  14 |       date(formatString: "MMMM DD, YYYY")
  15 |       description
  16 |     }
  17 |   }
  18 | }
  19 |

File path: /Users/misiek/test/limited-tweets-repro/src/templates/blog-post.js
Url path: /hello-world/
Plugin: none

Reproduction repository:

https://github.com/pieh/limited-tweets-repro

Problem description:

The error description ( Cannot read property 'replace' of undefined ) was not very helpful

Suggested solution:

Add some error checking and throw nicer error. In this instance error orignated from this expression -

gatsby-remark-embedder/src/transformers/Twitter.js

Line 27 in dc3e07c

.map(s => s.replace(/\?ref_src=twsrc.*?fw/g, ''))

which tried to use .replace on undefined

Response from twtiter oembed ( https://publish.twitter.com/oembed?url=https://twitter.com/mattconvente/status/1099706762897342465&dnt=true&omit_script=true ) looks like this:

{
    "error": "Sorry, you are not authorized to see this status.",
    "request": "/oembed?url=https://twitter.com/mattconvente/status/1099706762897342465&dnt=true&omit_script=true"
}

It also report 403 status which I guess is not checked anywhere and is assumed. everything goes as planned.

Not sure if this should be twtitter specific check or fetchOEmbedData utility should check status and throw if it's not 200? Doing this only in fetchOEmbedData would only have url for oembed which might not give enough information, so probably combination of throwing in that utility + catching in twitter transformer and showing problematic tweet url might be most robust as it would handle twitter related issues and also would have some handling for other providers?

[pieh]

As always - I'm happy to provide PR (once I get some time :) )

[MichaelDeBoey]

@pieh I'm happy to accept a PR if you have time to figure this one out 🙂

[MichaelDeBoey]

@all-contributors Please add @pieh for bug

[allcontributors]

@MichaelDeBoey

I've put up a pull request to add @pieh! 🎉

[MichaelDeBoey]

The problem here is that we use node-fetch, which doesn't reject in case of 4xx responses: node-fetch/node-fetch#7 (comment).
https://www.tjvantoll.com/2015/09/13/fetch-and-errors

So either we have to change fetchOEmbedData or we should change to another request library.

[MichaelDeBoey]

🎉 This issue has been resolved in version 1.14.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀