Theo's Typesafe Cult•9mo ago

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)
  }
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Error handling in nextjs13