Nuxt•3mo ago

Retrieve error status code and display error on page

I'm trying to get some error handling logic to work. I have this pipeline:

export default defineEventHandler((event) => pipe(
  parseEvent(event),
  Effect.flatMap(body => pipe(
    handlePlayerSearchEvent(body),
    Effect.provide(playerSearchLive),
    Effect.provideService(RegionService, RegionService.Live(body.region)),
  )),
  Effect.tapError(e => Effect.logDebug('Error', e._tag === 'ResponseError' ? e.response.status : e)),
  Effect.catchTags({
    ResponseError: (e) => Effect.fail(createError({
      statusCode: e.response.status,
      statusText: "Something went wrong, please try again later."
    }))
  }),
  Logger.withMinimumLogLevel(LogLevel.Debug),
  Effect.runPromise,
))

export default defineEventHandler((event) => pipe(
  parseEvent(event),
  Effect.flatMap(body => pipe(
    handlePlayerSearchEvent(body),
    Effect.provide(playerSearchLive),
    Effect.provideService(RegionService, RegionService.Live(body.region)),
  )),
  Effect.tapError(e => Effect.logDebug('Error', e._tag === 'ResponseError' ? e.response.status : e)),
  Effect.catchTags({
    ResponseError: (e) => Effect.fail(createError({
      statusCode: e.response.status,
      statusText: "Something went wrong, please try again later."
    }))
  }),
  Logger.withMinimumLogLevel(LogLevel.Debug),
  Effect.runPromise,
))

Which logs the following:

timestamp=2024-09-02T13:56:45.395Z level=DEBUG fiber=#1 message=Error message=404

 ERROR  [nuxt] [request error] [unhandled] [500] An error has occurred
  at createError (/C:/Users/Moos/Documents/GitHub/league-checker/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:78:15)
  at Object.ResponseError (C:\Users\Moos\Documents\GitHub\league-checker\server\api\account.post.ts:73:1)
  at e (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core-effect.ts:312:28)
  at cause (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core.ts:632:41)

timestamp=2024-09-02T13:56:45.395Z level=DEBUG fiber=#1 message=Error message=404

 ERROR  [nuxt] [request error] [unhandled] [500] An error has occurred
  at createError (/C:/Users/Moos/Documents/GitHub/league-checker/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:78:15)
  at Object.ResponseError (C:\Users\Moos\Documents\GitHub\league-checker\server\api\account.post.ts:73:1)
  at e (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core-effect.ts:312:28)
  at cause (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core.ts:632:41)

So it's seemingly creating the Nuxt error, but the message or status code doesn't seem to match. This is the fetch function in my page that calls this event handler:

const fetchData = async () => {
  loading.value = true;
  if (search.value !== "") {
    const data = await $fetch<PlayerSearchResult>("/api/account", {
      method: "post",
      body: { player: search.value, region: region.value },
    });

    smnr.value = data;

    search.value = "";

    loading.value = false;
  }
};

const fetchData = async () => {
  loading.value = true;
  if (search.value !== "") {
    const data = await $fetch<PlayerSearchResult>("/api/account", {
      method: "post",
      body: { player: search.value, region: region.value },
    });

    smnr.value = data;

    search.value = "";

    loading.value = false;
  }
};

Ideally I want to be able to know when the error was created and display a custom error message to handle it on the front-end. This might have a pretty simple answer, but I'm not really sure how to approach this

1 Reply

ViridianOP•3mo ago

I tried doing this:

const data = await $fetch<PlayerSearchResult>("/api/account", {
      method: "post",
      body: { player: search.value, region: region.value },
      onResponseError: (e) => {
        console.log("ERROR FOUND: ", e);
      }
    });

const data = await $fetch<PlayerSearchResult>("/api/account", {
      method: "post",
      body: { player: search.value, region: region.value },
      onResponseError: (e) => {
        console.log("ERROR FOUND: ", e);
      }
    });

And it logs the error, but the status seems to be 500 instead of the 404 that I am trying to make it have setResponseStatus doesn't seem to work either;

Effect.fail(setResponseStatus(event, e.response.status, "Something went wrong. Please try again later.")),

Effect.fail(setResponseStatus(event, e.response.status, "Something went wrong. Please try again later.")),

This actually does change the statusText, but not the status itself. I can confirm e.response.status is 404 as well indeed.

[Vue warn]: Unhandled error during execution of native event handler 
  at <Input modelValue="ixmqwoixwmq" onUpdate:modelValue=fn name="search"  ... > 
  at <Container> 
  at <App key=4 > 
  at <NuxtRoot>

[Vue warn]: Unhandled error during execution of native event handler 
  at <Input modelValue="ixmqwoixwmq" onUpdate:modelValue=fn name="search"  ... > 
  at <Container> 
  at <App key=4 > 
  at <NuxtRoot>

I see this as well.

Gaming

Programming

Retrieve error status code and display error on page