ENOTFOUND Error

[aung-eastsg]

Describe the issue you're facing

When I am developing the NextJS app using the Storyblok as CMS, sometimes I get the following error:

{"cause":{"errno":-3008,"code":"ENOTFOUND","syscall":"getaddrinfo","hostname":"api.storyblok.com"},"type":"Object","stack":null,"message":{"cause":{"errno":-3008,"code":"ENOTFOUND","syscall":"getaddrinfo","hostname":"api.storyblok.com"}}}

Is it normal? Why does it happen?

Reproduction

NA

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 114.31 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.7.2 - /opt/homebrew/bin/npm
    Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 120.1.61.104
    Chrome: 125.0.6422.142
    Safari: 17.5

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[alvarosabu]

Hello, @aung-eastsg thanks for reaching out and creating the issue. Could you please add a proper reproduction so we can debug your issue? Thanks!

[aung-eastsg]

Since we are helping a client to create the corporate site, it is a bit difficult to create a repo for it. However, we are using the Server Side Rendering and NextJS 14.2.3.

We initiate the Storyblok in Layout.tsx.
In each [slug]/page.tsx, we call a common function to get the content, then render the components on the page as the following example:

// layout.tsx
storyblokInit({
  accessToken: process.env.NEXT_PUBLIC_STORYBLOK_ACCESS_TOKEN,
  use: [apiPlugin],
  },
  components: {xxx}

// commonFunction.tsx
function getStoryData(slug) {
    const storyblokApi = getStoryblokApi();
    let { data } = await storyblokApi.get(`cdn/stories/${slug}`, { version: "published", ...});
    return data; 
}

// page.tsx
const pageContentFromStoryBlok = await getStoryData(params.locale, null, 'home');
  return (
      <>
          <main>
            <StoryblokComponent 
              blok={pageContentFromStoryBlok.props.story ? pageContentFromStoryBlok.props.story.content : null} 
            />
          </main>
      </>
  );

Hope this helps!

[arorachakit]

Hey @aung-eastsg - sometime this happens because of the internet connection, can you confirm it happens over different connections (if you can try switching a couple of those?) :)

[aung-eastsg]

Hi @arorachakit good point. Will test on other networks and will update here 🙂