What causes "[vuex] error in after action subscribers: " in vuejs/vuex?

Fix the handler using the error printed by console.error(e)

[vuex] error in after action subscribers:

Error message

[vuex] error in after action subscribers:

What it means

An after action subscriber (subscribeAction after handler) threw inside the promise-resolution path of dispatch. Vuex catches it so the action's result still resolves, warning in development and logging the original error.

Solutions

Fix the handler using the error printed by console.error(e)
Add defensive checks/null guards on action.payload inside the handler
Wrap handler logic in try/catch inside the plugin
Update the plugin to the current Vuex subscriber API

Example fix

// before
subscribeAction: { after: (action) => toast(action.payload.message) }
// after
subscribeAction: { after: (action) => { const p = action.payload; if (p && p.message) toast(p.message) } }

Defensive patterns

Strategy: try-catch

Validate before calling

function safeAfterSubscriber(fn) {
  return (action, state) => { try { fn(action, state) } catch (e) { console.warn('after subscriber failed', e) } }
}
// apply when registering: subscribeAction({ after: safeAfterSubscriber(myAfter) })

Type guard

function hasPayloadField(action, field) {
  return Boolean(action && action.payload && field in action.payload)
}

Try / catch

store.subscribeAction({
  after(action, state) {
    try { toast(action.payload?.message) }
    catch (e) { console.warn('[vuex] after subscriber failed', e) }
  }
})

Prevention

Never assume action.payload shape; guard with optional chaining
Keep UI/analytics side effects failure-isolated in subscribers
Update plugins after Vuex upgrades (after handler signature changed historically)
Add dev tests that run each action and assert no subscriber warnings

When it happens

Trigger: subscribeAction({ after(action, state) { ... } }) throwing when an action resolves — commonly code assuming payload or state shape that changed, or async work that rejects synchronously inside the handler.

Common situations: Success-toast/analytics plugins breaking on actions whose payloads are Errors; subscribers calling router or other side effects that throw; version mismatch where after receives (action, state) but plugin expects options.

Related errors

AI-assisted analysis of vuejs/vuex@bd907467b8 (2026-08-28). Data as JSON: /api/errors/95d9112d7b7b126a. Report an issue: GitHub.

Appendix: source

Thrown at src/store.js:178

      if (__DEV__) {
        console.warn(`[vuex] error in before action subscribers: `)
        console.error(e)
      }
    }

    const result = entry.length > 1
      ? Promise.all(entry.map(handler => handler(payload)))
      : entry[0](payload)

    return new Promise((resolve, reject) => {
      result.then(res => {
        try {
          this._actionSubscribers
            .filter(sub => sub.after)
            .forEach(sub => sub.after(action, this.state))
        } catch (e) {
          if (__DEV__) {
            console.warn(`[vuex] error in after action subscribers: `)
            console.error(e)
          }
        }
        resolve(res)
      }, error => {
        try {
          this._actionSubscribers
            .filter(sub => sub.error)
            .forEach(sub => sub.error(action, this.state, error))
        } catch (e) {
          if (__DEV__) {
            console.warn(`[vuex] error in error action subscribers: `)
            console.error(e)
          }
        }
        reject(error)
      })
    })

View on GitHub (pinned to bd907467b8)