How to Debug Stateful Frontend Apps Like a Pro

Debugging stateful frontend apps is annoying. You're trying to test a feature, but the app remembers everything from your last session. Old data pollutes your tests. You clear localStorage manually, refresh, and hope you got everything.

I started using reset flags a few years ago and haven't looked back. It's a simple trick: add a URL parameter that tells your app to wipe its state and start fresh.

Here's how it works:

1. Add a reset parameter to your URL - something like ?reset=true
2. Check for it on app mount - when your app loads, look for that parameter
3. Clear the relevant state - wipe localStorage, sessionStorage, or your state management store
4. Reload clean - the app now behaves like a fresh install

You don't have to reset everything. Sometimes I only want to clear the cart state but keep the user logged in. The reset flag can take values like ?reset=cart or ?reset=all depending on what you need.

React Example:

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    const resetFlag = new URLSearchParams(location.search).get('reset');

    if (resetFlag) {
      // Clear your state here
      localStorage.clear();
      // or be selective: localStorage.removeItem('cart');
    }
  }, []);

  return (
    // Your JSX here
  );
}

export default App;

Vue.js Example:

<template>
  <!-- Your app template here -->
</template>

<script>
export default {
  created() {
    const resetFlag = this.$route.query.reset;

    if (resetFlag) {
      // Clear your Vuex store or localStorage
      this.$store.commit('reset');
    }
  },
};
</script>

Once you start using this, you'll wonder how you ever debugged without it. No more manually clearing browser storage or wondering if stale state is causing weird behavior.

---

Bonus: How to implement a resettable Vuex store

The trick is to keep your initial state in a function, so you can restore it anytime:

// Initial state as a function
function initialState() {
  return {
    list: {},
    fetched_at: 0,
  };
}

const state = initialState();

const getters = {
  list: (state) => state.list,
};

const actions = {
  async list(context, payload) {},
  async fetch(context, payload) {},
  async create(context, payload) {},
};

const mutations = {
  reset(state) {
    // Restore initial state
    const s = initialState();
    Object.keys(s).forEach((key) => {
      state[key] = s[key];
    });
  },
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

Now this.$store.commit('moduleName/reset') gives you a clean slate whenever you need it.