Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onErrorCaptured not called in events #1336

Closed
jods4 opened this issue Jun 10, 2020 · 2 comments · Fixed by #1337
Closed

onErrorCaptured not called in events #1336

jods4 opened this issue Jun 10, 2020 · 2 comments · Fixed by #1337

Comments

@jods4
Copy link
Contributor

jods4 commented Jun 10, 2020

Version

3.0.0-beta.14

Reproduction link

https://jsfiddle.net/cgfna32y/10/

Steps to reproduce

When an event handler throws (or in async case: the promise rejects), Vue error-handling kicks-in.
Ultimately the error-handling logic is in this guy: handleError()
https://github.com/vuejs/vue-next/blob/352c36970430f964e2ad16976c14151cc608d856/packages/runtime-core/src/errorHandling.ts#L99

The handler looks for onErrorCaptured hooks, which can customize how the error is handled or even discard it (by returning true).

What is expected?

You can discard an error.

What is actually happening?

onErrorCaptured hooks are never called because instance is null.
This is weird and is likely a bug because the createInvoker() code attempts to pass an instance through:
https://github.com/vuejs/vue-next/blob/5a3b44caf77e485e3f9d2bb759708b4291ee775a/packages/runtime-dom/src/modules/events.ts#L120


This is rather nasty because it's impossible to change how Vue handles errors in an event handler.
In DEV the default behavior is to recover, although in PROD the default is to crash... you're in for a nice surprise!

This default behavior might seem reasonable for thrown errors, but notice it also covers rejected promises.
Rejected promises are sometimes used for "normal" situations, like a dismissed/cancelled dialog box.
In this situation, having the PROD app crash is rather bad.

@underfin
Copy link
Member

See https://vuejs.org/v2/api/#errorCaptured. The errorCaptured is only handle error for child components.

const Child = {
    setup() {

      return {
        error() {
          console.log("In error");
          throw "Should be ignored";
        },
        async asyncError() {
          await 1;
          console.log("In async error");
          throw "Should be ignored";
        }
      }
    },
    template: `
      <button @click="error">
        Sync error (ignored by hook)
      </button>
      <button @click="asyncError">
        Async error (goes through)
      </button>`
  }

  const App = {
    components: {Child},
    setup() {
      Vue.onErrorCaptured((err) => {
        console.log("We won't ever get here");
        // Ignore all errors!
        return true;
      });

    }
  }

@jods4
Copy link
Contributor Author

jods4 commented Jun 10, 2020

@underfin Right, the repro is not a good one sorry about that. Didn't pay enough attention when I created it.

The bug is legit, though: in my app the hook is at the App (root) and it doesn't work since instance is null in child. (I see you made PR to fix it, thanks!).

yyx990803 pushed a commit that referenced this issue Jun 12, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Nov 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants