rate limiting error and more text

client/src/views/Contribute.vue

@@ -13,6 +13,8 @@
 
         <p>You have seen an incorrect/missing/ugly icon? Then please report it <a href="https://github.com/matomo-org/matomo-icons">on the matomo-icons repository</a>.</p>
 
+        <p>You have found a bug in this website? Then please report it <a href="https://github.com/Findus23/devicedetector.net">in the devicedetector.net repository</a>.</p>
+
         <h2>Listing all user agents from your logs</h2>
 
         <p>

client/src/views/DetectedDevices.vue

@@ -1,28 +1,33 @@
 <template>
-  <div class="about box" v-if="supported.operatingSystems">
-    <h1>What Device Detector is able to detect</h1>
+  <div>
+    <div v-if="tooManyRequests" class="box centered">
+      There were too many requests. Please wait a minute before reloading the website.
+    </div>
+    <div class="about box" v-if="supported.operatingSystems">
+      <h1>What Device Detector is able to detect</h1>
 
-    <em>Last update: {{lastUpdated.toLocaleString()}}</em>
-    <h3>List of detected operating systems:</h3>
-    <p>{{ supported.operatingSystems.join(", ") }}</p>
-    <h3>List of detected browsers:</h3>
-    <p>{{supported.browsers.join(", ")}}</p>
-    <h3>List of detected browser engines:</h3>
-    <p>{{supported.engines.join(", ")}}</p>
-    <h3>List of detected libraries:</h3>
-    <p>{{supported.libraries.join(", ")}}</p>
-    <h3>List of detected media players:</h3>
-    <p>{{supported.mediaPlayer.join(", ")}}</p>
-    <h3>List of detected mobile apps:</h3>
-    <p>{{supported.mobileApps.join(", ")}}</p>
-    <h3>List of detected PIMs (personal information manager):</h3>
-    <p>{{supported.PIM.join(", ")}}</p>
-    <h3>List of detected feed readers:</h3>
-    <p>{{supported.feedReaders.join(", ")}}</p>
-    <h3>List of brands with detected devices:</h3>
-    <p>{{supported.brands.join(", ")}}</p>
-    <h3>List of detected bots:</h3>
-    <p>{{supported.bots.join(", ")}}</p>
+      <em>Last update: {{lastUpdated.toLocaleString()}}</em>
+      <h3>List of detected operating systems:</h3>
+      <p>{{ supported.operatingSystems.join(", ") }}</p>
+      <h3>List of detected browsers:</h3>
+      <p>{{supported.browsers.join(", ")}}</p>
+      <h3>List of detected browser engines:</h3>
+      <p>{{supported.engines.join(", ")}}</p>
+      <h3>List of detected libraries:</h3>
+      <p>{{supported.libraries.join(", ")}}</p>
+      <h3>List of detected media players:</h3>
+      <p>{{supported.mediaPlayer.join(", ")}}</p>
+      <h3>List of detected mobile apps:</h3>
+      <p>{{supported.mobileApps.join(", ")}}</p>
+      <h3>List of detected PIMs (personal information manager):</h3>
+      <p>{{supported.PIM.join(", ")}}</p>
+      <h3>List of detected feed readers:</h3>
+      <p>{{supported.feedReaders.join(", ")}}</p>
+      <h3>List of brands with detected devices:</h3>
+      <p>{{supported.brands.join(", ")}}</p>
+      <h3>List of detected bots:</h3>
+      <p>{{supported.bots.join(", ")}}</p>
+    </div>
   </div>
 </template>
 
@@ -37,7 +42,8 @@ export default Vue.extend({
   props: ["lastUpdated"],
   data() {
     return {
-      supported: {} as SupportedList
+      supported: {} as SupportedList,
+      tooManyRequests: false
     };
   },
   mounted(): void {
@@ -46,6 +52,8 @@ export default Vue.extend({
       if (req.readyState === XMLHttpRequest.DONE) {
         if (req.status === 200) {
           this.supported = JSON.parse(req.responseText);
+        } else if (req.status === 429) {
+          this.tooManyRequests = true;
         }
       }
     };

client/src/views/Main.vue

@@ -9,6 +9,9 @@
                 </b-input-group-append>
             </b-input-group>
         </form>
+        <div v-if="tooManyRequests" class="box centered">
+            There were too many requests. Please wait a minute before reloading the website.
+        </div>
         <div v-if="gotData">
             <div v-if="!dd.clientInfo && !dd.botInfo" class="box centered">
                 Device Detecter couldn't detect any information about this user agent.
@@ -97,7 +100,8 @@ export default Vue.extend({
             dd: {} as ParsedData,
             gotData: false,
             processingServerSide: false,
-            showJSON: false
+            showJSON: false,
+            tooManyRequests: false
         };
     },
     computed: {
@@ -111,6 +115,7 @@ export default Vue.extend({
         },
         fetchData(ua: string): void {
             this.gotData = false;
+            this.tooManyRequests = false;
             this.processingServerSide = true;
             const req = new XMLHttpRequest();
             req.onreadystatechange = (event: Event): void => {
@@ -119,6 +124,9 @@ export default Vue.extend({
                         this.dd = JSON.parse(req.responseText);
                         this.gotData = true;
                         this.processingServerSide = false;
+                    } else if (req.status === 429) {
+                        this.tooManyRequests = true;
+                        this.processingServerSide = false;
                     }
                 }
             };