Vue Community · Built a visual debugging panel for Vue over the weekend

10
Vr/vue·posted by dev_zhou·6 hours agoPostmortemLocked

Built a visual debugging panel for Vue over the weekend

Some background first. Our setup is Vue plus three downstream services, seven figures of daily requests, peaking around nine in the evening.

On trade-offs, my view is this: if nobody on the team owns this area long-term, do not introduce a second mechanism. With two coexistence you first have to work out which one is even in play when things break, and that costs far more than the performance you saved.

Worth noting: the official docs do cover this, just in a very inconspicuous spot. I only found it reading the source comments, where the author explains the reasoning — roughly "so that it degrades into predictable behaviour in extreme cases".

The first thing was to collapse the variables. We were changing config and upgrading the version at the same time, and afterwards nobody could say which change caused what. We rolled back to moving one variable at a time, re-ran three times, and only then did the curve settle. Tedious, but not skippable.

We also fixed monitoring along the way: replaced average-based alerts with percentiles and split them per endpoint. False alerts dropped by about seventy percent and the on-call rotation visibly cheered up.

3 comments

3 comments

M
Mmike_xuOP·3 minutes ago

Can you give a minimal reproduction? I ran it locally for ten minutes and could not reproduce on macOS with the latest version.

406
Lli_ming·just nowedited

A question: what changes in a container with a 512Mi memory limit? That is how we run it in production.

157
Ddev_zhou·just now

One counter-example: below Vue 7.4 the semantics of that code are different, so do not copy it verbatim. We got burned in staging and rolled back once.

7

This is the post detail page /en/c/vue/post/p4. Posts and comments are generated deterministically from a seeded PRNG, so the same post always renders the same content and the link can be shared, reloaded and indexed. In production this page reads MySQL for the post, Redis for hot-post caching, and fetches the whole comment tree in a single query on the path column.

See the database schema →