issue #57 fixed (searchbar crash)

Author: Piotr

src/App.vue

@@ -592,6 +592,9 @@ const updateSampleLine = () => {
       </div>
       <div class="right">
         <input type="text" class="searchbar" v-model="store.searchbar" placeholder="Search logs..." />
+        <br />
+        <span class="search-error" v-if="store.searchbarValid.length > 0">Invalid search query: {{ store.searchbarValid
+          }}</span>
       </div>
       <div class="end">
         <TopBar />

src/app.scss

@@ -56,6 +56,19 @@
         -ms-box-sizing: border-box;
         box-sizing: border-box;
       }
+      
+      .search-error {
+        font-family: 'Roboto mono', sans-serif;
+        font-size: 12px;
+        padding: 5px;
+        background: var(--hl-bg);
+        margin-left:10px;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -o-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+        box-sizing: border-box;
+      }
     }
 
     .end {

src/store.ts

@@ -252,7 +252,21 @@ export const useMainStore = defineStore("main", () => {
         }
     }
 
+    const searchbarValid = computed(() => {
+        try {
+            new RegExp(searchbar.value, 'i')
+            return ''
+        } catch (e) {
+            return (e as any).message
+        }
+    })
+
     const displayRows = computed(() => {
+
+        if (searchbarValid.value.length > 0) {
+            return []
+        }
+
         const selectedFacets: Record<string, string[]> = {}
         for (let i in facets.value) {
             facets.value[i].items.forEach(el => {
@@ -312,7 +326,6 @@ export const useMainStore = defineStore("main", () => {
             if (searchbar.value.length < 3) {
                 return true
             }
-
             return (r.msg.content || "").search(new RegExp(searchbar.value, 'i')) >= 0
         })
     })
@@ -365,6 +378,7 @@ export const useMainStore = defineStore("main", () => {
 
         facets,
         searchbar,
+        searchbarValid,
 
         toggleRowMark
     };

src/utils.ts

@@ -4,6 +4,5 @@ export function formatThousands(x: number): string {
 
 export function getUrlParam(url: string, param: string): string | null {
     let params = new URLSearchParams(url)
-    console.log(params, url)
     return params.get(param)
 }