Next.js: Using fetch and Safari

[jetmirshatri]

While developing an app I've used a custom server setup with express and I also used fetch.
I had no idea that the latest version of Safari doesn't yet support fetch natively and it took me a while to understand this, so maybe it's possible to add a more friendlier error message?
I ended up using isomorphic-fetch 💯

Error message running in dev mode (const app = next({ dir: '.', dev: true });) :

Error message running in prod mode (const app = next({ dir: '.', dev: false });) :

[arunoda]

In the production, we this is the accepted behaviour. (If something happens in the server).
If you provide us a sample app, we could have a look at it.

[timneutkens]

@arunoda managed to reproduce this, it's a larger issue than only fetch. Any exception when thrown in getInitialProps will give that callstack.

pages/index.js:

import React from 'react'
import Link from 'next/link'

export default class extends React.Component {
  static async getInitialProps({ req }) {
    if(!req) {
      throw new Error('Error message')
    }
    return {}
  }

  render() {
    return <div><Link href="/test">example</Link></div>
  }
}

pages/test.js:

import React from 'react'
import Link from 'next/link'

export default class extends React.Component {
  static async getInitialProps({ req }) {
    if(!req) {
      throw new Error('Error message')
    }
    return {}
  }

  render() {
    return <div><Link href="/">example</Link></div>
  }
}

[arunoda]

@timneutkens So it's working fine in Chrome. Only if Safari?

[timneutkens]

@arunoda seems safari gives worse stacktraces, chrome gives the same one when throwing an error with the error message. I'll have a look into it so you can focus on more pressing issues 👍