'How to solve MSW random 404 error with React

I have started using MSW to mock the BE, but randomly it fails to fetch data when I save changes. Dont' really know how to debug it, since it's very random enter image description here enter image description here

Api routing functions

import Api from './Api';

export default class BrandsAPIs extends Api {
  getAllBrands(accessToken) {
    return this.instance.get('brands', this.constructor.addAuthorizationHeader(accessToken));
  }
}

browser.js

import { setupWorker, rest } from 'msw';
import brands from './getBrands.json';

const worker = setupWorker(
  rest.post('/authentication', (req, res, ctx) => res(ctx.json({
    accessToken: 'Freebee',
    user: 'Andrea',
  }))),
  rest.get('/brands', (req, res, ctx) => res(ctx.json(brands))),
);

worker.start();

react page

import React, { useState, useEffect } from 'react';
import { BrandsAPIsSingleton } from '../../modules/api';
// components
import BrandsMainTable from './table/BrandsMainTable';

export default function Main() {
  const [isLoading, setIsLoading] = useState([]);
  const [brands, setBrands] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    BrandsAPIsSingleton.getAllBrands()
      .then((r) => {
        setBrands(r.data);
        setIsLoading(false);
      }).catch((error) => {
        setIsLoading(false);
        console.log(error);
      });
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <BrandsMainTable data={brands} />
  );
}

Anybody else had this problem?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source