QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.85k stars 1.31k forks source link

[🐞] Client side errors swallowed #6987

Closed tuurbo closed 2 weeks ago

tuurbo commented 1 month ago

Which component is affected?

Qwik Runtime

Describe the bug

In preview or production (not dev), when a client side error occurs, for example in an onclick$, the error isn't logged to the console. There’s no indication the error even happened, which also prevents an error logger like Sentry from capturing it.

Reproduction

https://github.com/tuurbo/qwik-error-swallowed

Steps to reproduce

Run app in preview pnpm run preview or production mode pnpm run prod. Open browser console. Click the buttons.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
    Memory: 10.56 GB / 31.68 GB
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.1 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.31 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355

Additional Information

No response

wmertens commented 1 month ago

Right, this needs better documentation. Errors are caught by the qwikloader and then emitted as qerror events.

So you need to add a listener for those and decide what to do with them.

https://github.com/QwikDev/qwik/blob/1bce01b9463daea4a1933dd718954f4f2917f664/packages/qwik/src/qwikloader.ts#L166

Does that work for you? If you'd like to update the docs with a cookbook for how to handle errors, that'd be greatly appreciated!

github-actions[bot] commented 1 month ago

Hello @tuurbo. Please provide the missing information requested above. Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days. Thanks 🙏

JerryWu1234 commented 1 month ago

qerror

such as

document.addEventListener('qerror', () => {}) ?

tuurbo commented 1 month ago

This worked for me while testing locally. I'm waiting to see if an error comes in from an actual production visitor.

useOnDocument('qerror', $((event: any) => {
  const error = event?.detail?.error;
  console.error(error);
  if (error) {
    Sentry.captureException(error);
  }
}));