Troubleshoot using Browser network Tab

While using the Application while performing some action if something fails we get generic error messages on UI,

Open

Like Something went wrong / Please try again or contact support.

Despite trying again, the same error message pops back up. What else could go wrong?
So Comes the Network tab which enables us to see more information about the Error.

Use the following steps to get more information,

Step 1: Inspect the Page
On the page with the error message, right-click the page and choose Inspect in the dropdown menu.

Step 2: Select the Network Tab
The browser’s network tab is a way to look directly at what’s happening behind the scenes of a page. It shows us not only the type of data being requested and passed as we interact with the page, but it also let's know if there are any actions that are failing. After selecting Inspect, a new window will appear. In this new window, click the Network tab. Then, select the XHR filter option. This will hide everything except API requests.

Step 3: Refresh the Page
Click the Refresh button in your browser. Since the Network tab will only show us the requests that occur after the tab has been opened, we’ll need to refresh the page so that we can view the error as it occurs. As the page reloads, you’ll see various API requests populate the panel.

Step 5: Re-create the Error
In order to understand what’s causing our error, we’ll first need to go through the same steps we took to get the error so that we can watch the request happen in real-time. In this case, to recreate the error we’ll click Update again. By re-creating the error, we’ll see exactly which request is causing the issue.

Open

Step 6: Find the Red-Line Item in the Network Panel
This is the error that occurs when clicking Update. The status is 400, which is the error code for “bad request.” Everything else has the status 200, which is the code for “OK,” meaning nothing went wrong for those other requests.

Step 7: Preview the Error Details
Click the red-line item to see the error details.

Clicking that line item will open a new frame on the right-hand side, and in this frame, you’ll see a few tabs: Headers, Preview, Response, Cookies, and Timing. In this case, stick with Preview since this contains the basic information.

Step 8: View the Error Message
While in some cases you won’t see a specific message here, in this case, you’ll see the following:

Thanks to the network panel, you were able to take a look under the hood, diagnose the issue, and put a fix in place.