[Setup] Log JS errors that occur on Setup page (#530)

Author: dalongi

app/code/Meta/BusinessExtension/Block/Adminhtml/Setup.php

@@ -267,6 +267,16 @@ public function getCleanCacheAjaxRoute()
         return $this->fbeHelper->getUrl('fbeadmin/ajax/cleanCache');
     }
 
+    /**
+     * Get the ajax route to report client errors.
+     *
+     * @return mixed
+     */
+    public function getReportClientErrorRoute()
+    {
+        return $this->fbeHelper->getUrl('fbeadmin/ajax/reportClientError');
+    }
+
     /**
      * Get Delete Asset IDs Ajax Route
      *

app/code/Meta/BusinessExtension/Controller/Adminhtml/Ajax/ReportClientError.php

@@ -0,0 +1,84 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+namespace Meta\BusinessExtension\Controller\Adminhtml\Ajax;
+
+use Magento\Backend\App\Action\Context;
+use Magento\Framework\Controller\Result\JsonFactory;
+use Meta\BusinessExtension\Helper\FBEHelper;
+use Meta\BusinessExtension\Model\System\Config as SystemConfig;
+
+class ReportClientError extends AbstractAjax
+{
+    private const JS_EXCEPTION_CODE = 100;
+
+    /**
+     * @var FBEHelper
+     */
+    private $fbeHelper;
+
+    /**
+     * Construct
+     *
+     * @param Context $context
+     * @param JsonFactory $resultJsonFactory
+     * @param FBEHelper $fbeHelper
+     */
+    public function __construct(
+        Context      $context,
+        JsonFactory  $resultJsonFactory,
+        FBEHelper    $fbeHelper,
+    ) {
+        parent::__construct($context, $resultJsonFactory, $fbeHelper);
+        $this->fbeHelper = $fbeHelper;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function executeForJson()
+    {
+        $storeID = $this->getRequest()->getParam('storeID');
+        $message = $this->getRequest()->getParam('message');
+        $stackTrace = $this->getRequest()->getParam('stackTrace');
+
+        $filename = $this->getRequest()->getParam('filename');
+        $lineNumber = $this->getRequest()->getParam('line');
+        $columnNumber = $this->getRequest()->getParam('column');
+
+        $loggingContext = [
+            'event' => 'js_exception',
+            'event_type' => 'error',
+            'extra_data' => [
+                'filename' => $filename,
+                'line_number' => $lineNumber,
+                'column_number' => $columnNumber,
+            ],
+            'store_id' => $storeID,
+        ];
+
+        $this->fbeHelper->logExceptionDetailsImmediatelyToMeta(
+            ReportClientError::JS_EXCEPTION_CODE,
+            $message,
+            $stackTrace,
+            $loggingContext,
+        );
+    }
+}

app/code/Meta/BusinessExtension/Helper/FBEHelper.php

@@ -304,17 +304,23 @@ public function logException(Throwable $e, array $context = [])
     {
         $errorMessage = $e->getMessage();
         $exceptionTrace = $e->getTraceAsString();
+        $exceptionCode = $e->getCode();
 
+        $this->logExceptionDetails($exceptionCode, $errorMessage, $exceptionTrace, $context);
+    }
+
+    public function logExceptionDetails($code, $message, $traceAsString, array $context = [])
+    {
         // If the log type is not set or Meta extension logging is not enabled just log the error message and trace.
         if (!isset($context['log_type']) || !$this->systemConfig->isMetaExceptionLoggingEnabled()) {
-            $this->logger->error($errorMessage);
-            $this->logger->error($exceptionTrace);
+            $this->logger->error($message);
+            $this->logger->error($traceAsString);
             return;
         }
 
-        $context['exception_message'] = $errorMessage;
-        $context['exception_code'] = $e->getCode();
-        $context['exception_trace'] = $exceptionTrace;
+        $context['exception_message'] = $message;
+        $context['exception_code'] = $code;
+        $context['exception_trace'] = $traceAsString;
         $context['seller_platform_app_version'] = $this->getMagentoVersion();
 
         $extraData = ['extension_version' => $this->systemConfig->getModuleVersion()];
@@ -330,7 +336,7 @@ public function logException(Throwable $e, array $context = [])
             $context['extra_data'] = $extraData;
         }
 
-        $this->logger->error($errorMessage, $context);
+        $this->logger->error($message, $context);
     }
 
     /**
@@ -345,6 +351,22 @@ public function logExceptionImmediatelyToMeta(Throwable $e, array $context = [])
         $this->logException($e, $context);
     }
 
+    /**
+     * Log error details and persist immediately with Meta.
+     *
+     * `logExceptionImmediatelyToMeta` should be preferred whenever a /Throwable is available.
+     *
+     * @param int $code
+     * @param string $message
+     * @param string $traceAsString
+     * @param array $context
+     */
+    public function logExceptionDetailsImmediatelyToMeta($code, $message, $traceAsString, array $context = [])
+    {
+        $context['log_type'] = self::PERSIST_META_LOG_IMMEDIATELY;
+        $this->logExceptionDetails($code, $message, $traceAsString, $context);
+    }
+
     /**
      * Log pixel event
      *

app/code/Meta/BusinessExtension/view/adminhtml/templates/setup.phtml

@@ -5,6 +5,24 @@
  */
 ?>
 
+<script>
+    const errorEventsBeforeInit = [];
+    const onEarlyError = (event) => {
+        errorEventsBeforeInit.push(event);
+    };
+    window.addEventListener('error', onEarlyError);
+
+    require(['Meta_BusinessExtension/js/error_logging'], (errorLogging) => {
+        window.removeEventListener('error', onEarlyError);
+        
+        errorLogging.init(
+            '<?=$escaper->escapeJs($block->getReportClientErrorRoute())?>',
+            '<?=$escaper->escapeJs($block->getSelectedStoreId())?>',
+            errorEventsBeforeInit,
+        );
+    });
+</script>
+
 <?php if ($block->getSelectedStoreId() === null): ?>
     Create a Store to continue with setup.
 <?php else: ?>

app/code/Meta/BusinessExtension/view/adminhtml/web/js/commerce_extension.js

@@ -1,3 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the code directory.
+ */
+
+'use strict';
+
 require(['jquery'], function (jQuery) {
 
     const ajaxify = function (url) {

app/code/Meta/BusinessExtension/view/adminhtml/web/js/error_logging.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the code directory.
+ */
+
+'use strict';
+
+define(['jquery'], function (jQuery) {
+
+    let _isInitialized = false;
+    let _storeID = null;
+    let _errorRoute = null;
+
+    const init = (errorRoute, storeID, errorEventsBeforeInit) => {
+        if (_isInitialized) {
+            throw new Error('error_logging.init() called multiple times');
+        }
+
+        _errorRoute = errorRoute;
+        _storeID = storeID;
+        _isInitialized = true;
+
+        const ajaxParam = function (params) {
+            if (window.FORM_KEY) {
+                params.form_key = window.FORM_KEY;
+            }
+            return params;
+        };
+
+        const onError = (event) => {
+            const stackTrace = event.error && event.error.stack;
+            const errorLog = {
+                column: event.colno,
+                filename: event.filename,
+                line: event.lineno,
+                message: event.message,
+                stackTrace: stackTrace,
+                storeID: _storeID,
+            };
+
+            const ajaxURL = new URL(_errorRoute, document.baseURI);
+            ajaxURL.searchParams.set('isAjax', 'true');
+
+            jQuery.ajax({
+                type: 'post',
+                data: ajaxParam(errorLog),
+                url: ajaxURL,
+            });
+        };
+
+        window.addEventListener('error', onError);
+        errorEventsBeforeInit.forEach(event => onError(event));
+    };
+
+    return {init};
+});