Troubleshoot frontend issues
The Funkwhale frontend is a SPA written in Vue.js. It consumes the Funkwhale API to serve content and to federate with other Fediverse software.
Tools
The most useful tools for troubleshooting issues with the Funkwhale frontend are your web browser’s developer tools. The Console
and Network
tabs are particularly useful for tracking down issues in the Javascript code and API responses respectively. Use the following shortcut to open the developer tools for your browser:
Browser |
Shortcut |
---|---|
Google Chrome/Chromium |
F12 |
Microsoft Edge |
F12 |
Opera |
F12 |
Vivaldi |
F12 |
Firefox |
F12 |
Safari |
Command+Option+U |
Troubleshoot the issue
Crashes or performance issues
To start troubleshooting your issue, try the following:
Open your browser’s developer tools.
Select the
Console
tab.Open Funkwhale and try to replicate the issue.
Take note of any errors or warnings that appear in the
Console
tab.
If applicable, try these steps while logged in and again while logged out to see if there is any difference.
Content not appearing
If content isn’t appearing, it is usually due to one of the following reasons:
A conditional statement in the frontend code isn’t working.
The API is not serving content.
You can confirm which of these is causing the issue by checking the Network
tab in your browser’s developer tools.
Open your browser’s developer tools.
Select the
Network
tab.Open Funkwhale and try to replicate the issue.
Take not of any
4XX
or5XX
responses in the API calls.
If you are receiving 4XX
or 5XX
responses, this means the API isn’t serving your content properly. You can investigate further by following the backend troubleshooting guide.
Get help
If you can’t solve the issue yourself, ask the community for help. Check out the get help guide for information about where to ask your question and what details to provide.