1 reply

Error handling in nextjs13

[NEXTJS 13.5] app dir

hello, how can i handle nextjs errors correctly? Because for now when for example API throws 502 (is denied at this moment) my entire vercel app is returning error as you can see on screen. For now i just have rejceting promise in error case. Should i have another "catcher" on that which will do something with this error? Because it looks like my errors.tsx doesnt catches these errors :/

const proccessFetch = async (
  input: URL | RequestInfo,
  init?: Omit<RequestInit, 'body'> & { body?: Record<string, any> | null },
) => {
  try {
    const response = await fetch(
      input,
      init && {
        ...init,
        headers: {
          // 'Content-Type': 'application/json',
          ...init.headers,
        },
        body: init.body ? JSON.stringify(init.body) : null,
      },
    )

    if (!response.ok) return Promise.reject(new Error('Response is not ok').message)

    return response.status === 200 && response.headers.get('Content-Length') !== '0'
      ? await response.json()
      : null
  } catch (err) {
    return Promise.reject(new Error(`${JSON.stringify(err)}`).message)
  }
}

const proccessFetch = async (
  input: URL | RequestInfo,
  init?: Omit<RequestInit, 'body'> & { body?: Record<string, any> | null },
) => {
  try {
    const response = await fetch(
      input,
      init && {
        ...init,
        headers: {
          // 'Content-Type': 'application/json',
          ...init.headers,
        },
        body: init.body ? JSON.stringify(init.body) : null,
      },
    )

    if (!response.ok) return Promise.reject(new Error('Response is not ok').message)

    return response.status === 200 && response.headers.get('Content-Length') !== '0'
      ? await response.json()
      : null
  } catch (err) {
    return Promise.reject(new Error(`${JSON.stringify(err)}`).message)
  }
}

TTC

Theo's Typesafe Cult•3y ago•

1 reply

Bartholomeas

Error handling in nextjs13

const proccessFetch = async (
  input: URL | RequestInfo,
  init?: Omit<RequestInit, 'body'> & { body?: Record<string, any> | null },
) => {
  try {
    const response = await fetch(
      input,
      init && {
        ...init,
        headers: {
          // 'Content-Type': 'application/json',
          ...init.headers,
        },
        body: init.body ? JSON.stringify(init.body) : null,
      },
    )

    if (!response.ok) return Promise.reject(new Error('Response is not ok').message)

    return response.status === 200 && response.headers.get('Content-Length') !== '0'
      ? await response.json()
      : null
  } catch (err) {
    return Promise.reject(new Error(`${JSON.stringify(err)}`).message)
  }
}

const proccessFetch = async (
  input: URL | RequestInfo,
  init?: Omit<RequestInit, 'body'> & { body?: Record<string, any> | null },
) => {
  try {
    const response = await fetch(
      input,
      init && {
        ...init,
        headers: {
          // 'Content-Type': 'application/json',
          ...init.headers,
        },
        body: init.body ? JSON.stringify(init.body) : null,
      },
    )

    if (!response.ok) return Promise.reject(new Error('Response is not ok').message)

    return response.status === 200 && response.headers.get('Content-Length') !== '0'
      ? await response.json()
      : null
  } catch (err) {
    return Promise.reject(new Error(`${JSON.stringify(err)}`).message)
  }
}

Error handling in nextjs13

Similar Threads

Error handling in nextjs13

Similar Threads

Similar Threads

Similar Threads