firm-tan

Server function error handling

Hello, When I try to catch errors thrown in server functions within an error boundary at the client side, the error is displayed in the standard format for one millisecond before my custom is displayed. Like flashing once. This happens even I catch them in the error boundary defined in root route. I attached a screenshot video of the view. Any ideas? Thank you.

5 Replies

wise-white•2mo ago

can you please share a complete reproducer project ?

firm-tanOP•2mo ago

Hi @Manuel Schiller Here it is: https://github.com/SihirliDev/serverFnTest

GitHub

GitHub - SihirliDev/serverFnTest

Contribute to SihirliDev/serverFnTest development by creating an account on GitHub.

wise-white•2mo ago

where is the server fn that is throwing?

firm-tanOP•2mo ago

in get-people.ts (https://github.com/SihirliDev/serverFnTest/blob/master/src/server-functions/get-people.ts)

import { createServerFn } from '@tanstack/react-start'

export const getPeopleFromDB = createServerFn({ method: 'GET' })
  .inputValidator((dataFormat?: number) => dataFormat)
  .handler(async () => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 2000)) // simulating data fetch from DB

      // Simulating error:
      throw new Error("Something happened on the db server side.")

      const dbQueryResult = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Ashley' },
        { id: 3, name: 'Michael' },
      ]

      return {
        data: dbQueryResult,
        error: null,
      }
    } catch (error) {
      console.log(
        'SERVERLOG:' + (error instanceof Error ? error.message : error),
      )
      return {
        data: [],
        error: {
          status: 500,
          name: 'DataServerFnError',
          //message: error instanceof Error ? error.message : "SYSTEM ERROR: Unknown database error",
          message: 'SYSTEM ERROR: Database error',
        },
      }
    }
  })

import { createServerFn } from '@tanstack/react-start'

export const getPeopleFromDB = createServerFn({ method: 'GET' })
  .inputValidator((dataFormat?: number) => dataFormat)
  .handler(async () => {
    try {
      await new Promise((resolve) => setTimeout(resolve, 2000)) // simulating data fetch from DB

      // Simulating error:
      throw new Error("Something happened on the db server side.")

      const dbQueryResult = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Ashley' },
        { id: 3, name: 'Michael' },
      ]

      return {
        data: dbQueryResult,
        error: null,
      }
    } catch (error) {
      console.log(
        'SERVERLOG:' + (error instanceof Error ? error.message : error),
      )
      return {
        data: [],
        error: {
          status: 500,
          name: 'DataServerFnError',
          //message: error instanceof Error ? error.message : "SYSTEM ERROR: Unknown database error",
          message: 'SYSTEM ERROR: Database error',
        },
      }
    }
  })

wise-white•2mo ago

probably best is to create a github issue for this for further investigation. might be a bug, or not. lets find out

Gaming

Programming

Server function error handling

Did you find this page helpful?