Giter VIP home page Giter VIP logo

magento2-module-javascript-error-reporting's Introduction

JavaScript error reporting for Magento 2

Latest stable version Total downloads Code quality alerts

Overview

A Magento 2 module which captures JavaScript errors for later review by website administrators. JavaScript errors are kept for up to 180 days (configurable) and available via Magento's administration back-end.

Screen-shot of summary view in admin area

Features

  • JavaScript errors are recorded for later review
    • JavaScript error message
    • File (URL), line number, column number of exception if available
    • Stack trace of exception if available
  • Limited browser information which might be useful for debugging (but hopefully not for fingerprinting / identifying individual users) is recorded
    • Current URL when error occurred
    • User agent
    • Viewport width & height
  • Errors are kept for up to 180 days (configurable) and automatically deleted after this period
  • Errors are available for review in Magento's back-end
    • Admin -> Reports -> JavaScript Error Reporting
  • Errors can be marked as ignored to help reduce noise / focus on new errors
  • Module can be enabled / disabled via configuration
    • Admin -> Stores -> Settings -> Configuration -> Advanced -> System -> JavaScript Error Reporting

Installation

This module is available on packagist.org and installable via composer:

composer require fredden/magento2-module-javascript-error-reporting

This module uses semantic versioning (semver).

Compatibility

Version Magento Open Source Adobe Commerce
2.0.x unsupported unsupported
2.1.x unsupported unsupported
2.2.x ✅ Yes ^0.1 ✅ Yes ^0.1
2.3.x ✅ Yes ^1.2.2 ✅ Yes ^1.2.2
2.4.x ✅ Yes ^1.0.1 ✅ Yes ^1.0.1
2.4.4 ✅ Yes ^1.0.1 || ^2.0 ✅ Yes ^1.0.1 || ^2.0
2.4.5 ✅ Yes ^1.0.1 || ^2.0 ✅ Yes ^1.0.1 || ^2.0
2.4.6 ✅ Yes ^1.0.1 || ^2.0 ✅ Yes ^1.0.1 || ^2.0

PHP version 7.1 or better is required.

No third-party libraries nor services are required.

Contributing

Community contributions are welcome. Please open a pull request on GitHub if you have a code suggestion, or an issue on GitHub if you are encountering a problem with this module. Please note that issues relating to the problems that this module highlights in others' code are out of scope for support here.

Future development ideas

  • filter grid by date and time range
  • details of "errors like this" (same hash) on details page.
    • perhaps links for: first, last, next, previous
    • maybe a chart of this error over time
      • show same charts as statistics page, but specifically for this error
  • statistics page, link for details should go to latest not first instance of error
  • charts on statistics page, click node to go to details pane with this time filter applied

magento2-module-javascript-error-reporting's People

Contributors

fredden avatar nathandayfe avatar pykettk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

magento2-module-javascript-error-reporting's Issues

add a feature to "Ignore" an issue

Sometime we always have "errors" from third-party scripts which can be embedded via tag manager or under some network conditions of clients and we can't fix or need to wait for long time so we should have an ability to dismiss the issue from the overview page to keep attention on real issues

Add more setting to ignore some errors

Many times we may get invalid errors, I can list a few popular cases which we want to exclude

  1. Our website use a loader to load different JS in background when they are getting used. However sometime user may navigate to a new page or while these JS were loading which will cause natural errors in console which will be sent to the reporting, this is not helpful.

Since this may happen on any URL so I can't ignore one by one, it would be great if we can ignore it by certain error name or something
2. Many times user come to the pages and navigate very fast between pages which will cause some invalid errors which have " Seconds since page load " very small (just 0.2-0.3 seconds)
3. Also bot traffic comes the website and some third-party JS will get blocked or cause some errors which are not important so we may want to ignore errors from certain user agent,.....

prevent duplicated error

Related to #1
I'm not sure if the extension have handled duplicated error log from same browser, same URL but look like not.
For example for same user they might try to refresh a page many times if they get something wrong so we should prevent saving same issue over and over.
Maybe we should just save one record with last happened time

In order to achieve this, I think we should generate a hash for all information and store it in client storage so we wont send it again.
Or we could process this on server side and just update the last happened time.

What do you think @fredden @sprankhub?

possible issue with continous sending error

In some cases, there could be many JS errors on same page (either same repeat error or different error) which trigger calling API for recording logs continuously (in my case, there were some JS which had an error but the JS error were fired continuously for a while and the browser was going to hang)

So to make it safe, I think we should make a "stop" for such cases, we shouldn't send more than X errors when user is still on same page.

Webapi class does not follow Magentos expected pattern

whilst it is not enforced in the XML and all other aspects of the Web API will continue to work Magento expects the class defined in the webapi service to be an interface that is then preferenced by a class implementing this. This is apparent in \Magento\Webapi\Model\ServiceMetadata::getServiceName specifically on line 215 where it defines the regex pattern to match class names.

as i mentioned the rest of the API will continue to work if you were to reference the services directly, however this does break the schema generation when attempting to query /rest/all/schema?services=all with the error Notice: Undefined offset: 4 in /var/www/html/vendor/magento/module-webapi/Model/ServiceMetadata.php on line 224

this could be resolved from the Magento side with an isset however i could imagine a valid response being that they have set a precedence with the existing webapi implementation that should be followed.

User Agent Mapping/Filtering

Feature Ideas:

User Agent mapping, this could be linked into filtering e.g. being able to easily filter errors seen on iPhones

Performance Impact

What an awesome idea! Thanks for this extension :)

Did you check the performance impact of this? Stuff, which comes to my mind:

  1. Does this impact the Lighthouse score?
  2. Does this impact the Core Web Vitals?
  3. Does this also track errors related to ad blockers? This would be bad, because this could then easily lead to tens of AJAX requests...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.