Add troubleshooting section

3 files changed, 22 insertions, 1 deletions

diff --git a/README.md b/README.md
index e13b2f0..2dd2b42 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@
 - [Custom services](docs/customservices.md)
 - [Tips & tricks](docs/tips-and-tricks.md)
 - [Development](docs/development.md)
-
+- [Troubleshooting](docs/troubleshooting.md)
 
 ## Features
 
diff --git a/docs/customservices.md b/docs/customservices.md
index 83d5f3e..4a023a1 100644
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -4,6 +4,8 @@ Some service can use a specific a component that provides some extra features by
 configuration. Available services are in `src/components/`. Here is an overview of all custom services that are available
 within Homer.
 
+If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
+
 ## PiHole
 
 Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
new file mode 100644
index 0000000..ed1f85d
--- /dev/null
+++ b/docs/troubleshooting.md
@@ -0,0 +1,19 @@
+# Troubleshooting
+
+## My custom service card doesn't work, nothing appears or offline status is displayed (pi-hole, sonarr, ping, ...)
+
+You might by facing a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Request Sharing) issue.
+It happens when the targeted service is hosted on a different domain or port.
+Web browsers will not allow to fetch information from a different site without explicit permissions (the targeted service
+must include a special `Access-Control-Allow-Origin: *` HTTP headers).
+If this happens your web console (`ctrl+shit+i` or `F12`) will be filled with this kind of errors:
+
+```text
+Access to fetch at 'https://<target-service>' from origin 'https://<homer>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
+```
+
+To resolve this, you can either:
+
+* Host all your target service under the same domain & port.
+* Modify the target sever configuration so that the response of the server included following header- `Access-Control-Allow-Origin: *` (<https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests>). It might be an option in the targeted service, otherwise depending on how the service is hosted, the proxy or web server can seamlessly add it.
+* Use a cors proxy sever like [`cors-container`](https://github.com/imjacobclark/cors-container), [`cors-anywhere`](https://github.com/Rob--W/cors-anywhere) or many others.