Formal Verification for Vue Developers: No Math Required

Your retry button has a bug. You can’t see it in code review. Your tests pass. And your users find it after a reload. I found it with formal verification. I know, that sounds like a math degree. It’s a program that tries every order of events in your app and tells you which one breaks. Let me show you with a todo app. The bug It’s a todo list that saves in the background. Your change shows up at once, and the app sends it to the server: // src/composables/useTodos.ts const todos = ref<Todo[]>([]) const isSaving = ref(false) const failed = ref<Todo[]>([]) async function add(text: string) { const todo = { text, done: false } todos.value.push(todo) isSaving.value = true try { await api.post('/todos', todo) } catch { failed.value.push(todo) } finally { isSaving.value = false } } async function retry() { const again = failed.value.splice(0) await Promise.all(again.map((todo) => api.post('/todos', todo))) } I’d approve this in a code review. It has an optimistic update, error handling and a…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town