refactor(router): Add FE error logs to loki (#4077)

crates/router/src/core/payment_link/payment_link_initiate/payment_link.js

@@ -188,7 +188,10 @@ var hyper = null;
  *  - Initialize event listeners for updating UI on screen size changes
  *  - Initialize SDK
  **/
+
+
 function boot() {
+
   // @ts-ignore
   var paymentDetails = window.__PAYMENT_DETAILS;
   var orderDetails = paymentDetails.order_details;

crates/router/src/services/api.rs

@@ -1449,7 +1449,8 @@ pub fn build_redirection_form(
     config: Settings,
 ) -> maud::Markup {
     use maud::PreEscaped;
-
+    let logging_template =
+        include_str!("redirection/assets/redirect_error_logs_push.js").to_string();
     match form {
         RedirectForm::Form {
             endpoint,
@@ -1506,11 +1507,15 @@ pub fn build_redirection_form(
                     }
                 }
 
-                (PreEscaped(r#"<script type="text/javascript"> var frm = document.getElementById("payment_form"); window.setTimeout(function () { frm.submit(); }, 300); </script>"#))
+                (PreEscaped(format!("<script type=\"text/javascript\"> {logging_template} var frm = document.getElementById(\"payment_form\"); window.setTimeout(function () {{ frm.submit(); }}, 300); </script>")))
+
             }
         }
         },
-        RedirectForm::Html { html_data } => PreEscaped(html_data.to_string()),
+        RedirectForm::Html { html_data } => PreEscaped(format!(
+            "{} <script>{}</script>",
+            html_data, logging_template
+        )),
         RedirectForm::BlueSnap {
             payment_fields_token,
         } => {
@@ -1557,6 +1562,7 @@ pub fn build_redirection_form(
                     }
 
                 (PreEscaped(format!("<script>
+                    {logging_template}
                     bluesnap.threeDsPaymentsSetup(\"{payment_fields_token}\",
                     function(sdkResponse) {{
                         // console.log(sdkResponse);
@@ -1621,6 +1627,7 @@ pub fn build_redirection_form(
               }
               </script>"#))
               (PreEscaped(format!("<script>
+                {logging_template}
                 window.addEventListener(\"message\", function(event) {{
                     if (event.origin === \"https://centinelapistag.cardinalcommerce.com\" || event.origin === \"https://centinelapi.cardinalcommerce.com\") {{
                       window.location.href = window.location.pathname.replace(/payments\\/redirect\\/(\\w+)\\/(\\w+)\\/\\w+/, \"payments/$1/$2/redirect/complete/cybersource?referenceId={reference_id}\");
@@ -1669,11 +1676,12 @@ pub fn build_redirection_form(
                 (PreEscaped(format!("<form id=\"step-up-form\" method=\"POST\" action=\"{step_up_url}\">
                 <input type=\"hidden\" name=\"JWT\" value=\"{access_token}\">
               </form>")))
-              (PreEscaped(r#"<script>
+              (PreEscaped(format!("<script>
-              window.onload = function() {
+              {logging_template}
+              window.onload = function() {{
               var stepUpForm = document.querySelector('#step-up-form'); if(stepUpForm) stepUpForm.submit();
-              }
+              }}
-              </script>"#))
+              </script>")))
             }}
         }
         RedirectForm::Payme => {
@@ -1682,7 +1690,8 @@ pub fn build_redirection_form(
                 head {
                     (PreEscaped(r#"<script src="https://cdn.paymeservice.com/hf/v1/hostedfields.js"></script>"#))
                 }
-                (PreEscaped("<script>
+                (PreEscaped(format!("<script>
+                    {logging_template}
                     var f = document.createElement('form');
                     f.action=window.location.pathname.replace(/payments\\/redirect\\/(\\w+)\\/(\\w+)\\/\\w+/, \"payments/$1/$2/redirect/complete/payme\");
                     f.method='POST';
@@ -1700,7 +1709,7 @@ pub fn build_redirection_form(
                         f.submit();
                     }});
             </script>
-                ".to_string()))
+                ")))
             }
         }
         RedirectForm::Braintree {
@@ -1741,6 +1750,7 @@ pub fn build_redirection_form(
                     }
 
                     (PreEscaped(format!("<script>
+                                {logging_template}
                                 var my3DSContainer;
                                 var clientToken = \"{client_token}\";
                                 braintree.threeDSecure.create({{
@@ -1838,6 +1848,7 @@ pub fn build_redirection_form(
                         div id="threeds-wrapper" style="display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center;" {""}
                     }
                     (PreEscaped(format!("<script>
+                    {logging_template}
                     const gateway = Gateway.create('{public_key_val}');
 
                     // Initialize the ThreeDSService
@@ -1964,6 +1975,7 @@ pub fn build_payment_link_html(
     // Add modification to js template with dynamic data
     let js_template =
         include_str!("../core/payment_link/payment_link_initiate/payment_link.js").to_string();
+
     let _ = tera.add_raw_template("payment_link_js", &js_template);
 
     context.insert("payment_details_js_script", &payment_link_data.js_script);

crates/router/src/services/redirection/assets/redirect_error_logs_push.js

@@ -0,0 +1,81 @@
+function parseRoute(url) {
+    const route = new URL(url).pathname;
+    const regex = /^\/payments\/redirect\/([^/]+)\/([^/]+)\/([^/]+)$|^\/payments\/([^/]+)\/([^/]+)\/redirect\/response\/([^/]+)(?:\/([^/]+)\/?)?$|^\/payments\/([^/]+)\/([^/]+)\/redirect\/complete\/([^/]+)$/;
+    const matches = route.match(regex);
+    const attemptIdExists = !(
+      route.includes("response") || route.includes("complete")
+    );
+    if (matches) {
+      const [, paymentId, merchantId, attemptId, connector,credsIdentifier] =
+        matches;
+      return {
+        paymentId,
+        merchantId,
+        attemptId: attemptIdExists ? attemptId : "",
+        connector
+      };
+    } else {
+      return {
+        paymentId: "",
+        merchantId: "",
+        attemptId: "",
+        connector: "",
+      };
+    }
+  }
+
+  function getEnvRoute(url) {
+    const route = new URL(url).hostname;
+    return route === "api.hyperswitch.io" ? "https://api.hyperswitch.io/logs/redirection" : "https://sandbox.hyperswitch.io/logs/redirection";
+}
+
+  
+async function postLog(log, urlToPost) {
+
+    try {
+        const response = await fetch(urlToPost, {
+        method: "POST",
+        mode: "no-cors",
+        body: JSON.stringify(log),
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        },
+        });
+    } catch (err) {
+        console.error(`Error in logging: ${err}`);
+}
+}
+  
+  
+window.addEventListener("error", (event) => {
+    let url = window.location.href;
+    let { paymentId, merchantId, attemptId, connector } = parseRoute(url);
+    let urlToPost = getEnvRoute(url);
+    let log = {
+        message: event.message,
+        url,
+        paymentId,
+        merchantId,
+        attemptId,
+        connector,
+    };
+    postLog(log, urlToPost);
+});
+  
+window.addEventListener("message", (event) => {
+    let url = window.location.href;
+    let { paymentId, merchantId, attemptId, connector } = parseRoute(url);
+    let urlToPost = getEnvRoute(url);
+    let log = {
+        message: event.data,
+        url,
+        paymentId,
+        merchantId,
+        attemptId,
+        connector,
+    };
+    postLog(log, urlToPost);
+});
+    
+