How to combine mutliple Vue-Concurrency errors? - vue.js

Question

I'm trying to use Vue Concurrency with my Vue 3 / TypeScript / Quasar app.
And I am using Quasar Notify to display error messages in a popup.
The notification popups are triggered like this:
import { useQuasar } from 'quasar';
const $q = useQuasar();
const triggerNotification = (errorMessage: string) => {
$q.notify(errorMessage);
};
And now I need a way to elegantly call triggerNotification whenever there is a vue-concurrency Task error.
I could do it by chaining a catch on the end of every yield statement in every Task.
But my code has many Tasks each with many yield statements. Chaining catch to each one looks messy and verbose.
Is there a better way to trigger the triggerNotification function for every task?
To illustrate the problem here is some example code:
<script setup lang="ts">
import { useTask, timeout } from 'vue-concurrency';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const triggerNotification = (errorMessage: string) => {
$q.notify(errorMessage);
};
const exampleAsyncWithError = async () => {
await timeout(1);
throw new Error('Ruh oh! Error.');
};
const example1Task = useTask(function* () {
yield throwError().catch((err) => {
triggerNotification(err.message);
});
yield throwError().catch((err) => {
triggerNotification(err.message);
});
yield throwError().catch((err) => {
triggerNotification(err.message);
});
});
const example2Task = useTask(function* () {
yield throwError().catch((err) => {
triggerNotification(err.message);
});
yield throwError().catch((err) => {
triggerNotification(err.message);
});
yield throwError().catch((err) => {
triggerNotification(err.message);
});
});
const example3Task = useTask(function* () {
yield throwError().catch((err) => {
triggerNotification(err.message);
});
yield throwError().catch((err) => {
triggerNotification(err.message);
});
yield throwError().catch((err) => {
triggerNotification(err.message);
});
});
</script>
<template>
<q-btn label="Run Task" #click="example1Task.perform">
<q-btn label="Run Task" #click="example2Task.perform">
<q-btn label="Run Task" #click="example3Task.perform">
</q-btn>
</template>
I also tired implementing a useTaskGroup and with a single catch on the end of that. But it doesn't work because useTaskGroup is not "thenable".
Maybe there is another solution?

Answer 1

The below text is copied from this very helpful answer on Github, made by the creator of Vue Concurrency:
I think this depends on how you want to handle the errors. I sometimes use these popup notifications as well - they're good for cases when there's no relevant place to display the error, and especially if something breaks in the background.
So my workflow usally is 90% times - display error "in place" and use task.last.error. In the rest cases I do try catch inside the task and use something like your triggerNotification.
Buf if you plan to use triggerNotification a lot, it's indeed maybe not optimal to do so many try catch.
What you can do is wrap the entire task perform in a try catch.
<script setup lang="ts">
import { useTask, timeout } from 'vue-concurrency';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const throwError = async () => {
await timeout(1);
throw new Error('Ruh oh! Error.');
};
const exampleTask = useTask(function* () {
yield throwError().catch((err) => {
triggerNotification(err.message);
});
});
const save = async () => {
try {
await exampleTask.perform();
} catch (e) {
$q.notify(error.message);
}
};
</script>
<template>
<q-btn label="Run Task" #click="save"></q-btn>
</template>
You'd be creating these wrapper functions a lot, so you can write some higher order function for it:
const performAndNotify = async (task, ...args) => {
try {
await task.perform(...args);
} catch (error) {
$q.notify(error.message);
}
};
Then you can reuse this function at multiple places.