Z-Ray & Magento

A Customizable Development Tool Belt

2

Mathew Beane @aepod

Director of Systems Engineering - RobofirmZend Z-Team Volunteer – Magento Division

Family member – 3 Kids and a WifeMagento Certified Developer

3

• Live debugging tool• Browser toolbar interface• Built into Zend Server• Display tons of under the hood details

Page Request Errors and Warnings Database Queries Functions

• Fully extensible – Write your own plugins

Zend Z-Ray

4

• Built into Zend Server – since version 7 http://www.zend.com/en/products/server/downloads

• Available as a separate download: http://www.zend.com/en/products/z-ray/z-ray-preview

• AWS Zend Server:https://aws.amazon.com/marketplace/pp/B00SG8S85W/

• Zend Pattern for Puppet:http://www.zend.com/en/solutions/continuous-delivery/puppet

• Demo Z-Ray:http://www.zend.com/en/products/server/z-ray-use-cases

How To Get Z-Ray

5

What is Magento?

Magento is an open-source content management system for e-commerce web sites. - Wikipedia

• Open-source PHP E-Commerce Market Leader• Large community• Full Featured E-Commerce Platform• Incredibly Flexible• Highly Structured• Steep learning curve because of complexity • Enterprise Edition offers support and more

features

So its not a color or an electrical generator?

6

Additional tab with Magento specific information Request and application details Events / Observers Layouts / Blocks / Templates Logs Modules (Extensions)

Z-Ray Magento Plugin

7

Z-Ray MagentoGeneral Usage

8

General Z-Ray Information – Response Overview

• Page Response Code / Response Times• Shows the number of DB queries on a response

A very good un-cached response

A typical bad response

9

General Z-Ray Information - Statistics

• Execution Times• Overall Peak Memory Usage

A product page from a troubled Magento installation. Very high memory usage and slow response is evident from the statistics panel.

10

• Zend Server Events Configured in Zend Server Per error type configuration Can be set to do automatic Zend Server code traces

General Z-Ray Information – Monitor Events

11

• Errors and warnings at a glance• More detailed information than the default handler

General Z-Ray Information – Errors & Warnings

12

• Back trace of exceptions with more detailed information

General Z-Ray Information – Errors & Warnings

13

• See all information about every query. Order response called them in Full Query Time Rows Returned Result

• Sort and search in any field• See database back traces for every query

General Z-Ray Information - SQL Tab

14

• Sortable/Searchable PHP function list• Great for exploring the real inner workings of the application• Can lead to very easy to spot solutions to existing problems

General Z-Ray Information – Functions Tab

15

• PHP Super Global List• Request Headers• Raw POST Data• Response Headers• Response Body

General Z-Ray Information– Request Info Tab

16

Z-Ray Magento PluginA Quick Walkthrough

17

• Sub-Panels Provide Magento Specific Information Overview: Catalog, store, controller and other information. Events: Tree structured output of all events for the request. Observers: All application observers. Layouts: List of layout XML and final raw output. Rendered Blocks: List of block classes and associated data. Blocks: Tree structured block list. Logs: Magento system.log entries. Modules: Installed Magento extensions.

Z-Ray Magento Plugin

18

Overview Tab – Catalog and Store Information

• Website / Store Values• Products and Category Counts• Caching information• Magento Version information

19

• Controller Class and Path• Module / Controller / Action• Package Layout and Theme

Overview Tab –Controller/Path/Module Information

20

• Details the Mage_Core_Controller_Request_Http class• Initial and final values are shown• Some “duplication of data” from the Overview tab

Overview Tab – Request Information

21

• Handles are used by Magento and contain definitions for updates.• Helps with tracking down what pieces of layout your looking for

Overview Tab – Handles

22

• All Events with Observers – Including Action and Class:Method• Typical Sort/Filter/Search• Tree Widget is used to display events under observers

Events Tab

23

• All application observers• Scoped by area• Easy to sort/filter/search

Observers Tab

24

• All layout XML files included from response• Final Rendered Page and Package XML

Layouts Tab – Theme Layout XMLs

25

• Block Class with Related Layout and Template• Duration of block• Cache Status• Sort / Filter / Search

Blocks Tab – Blocks and Templates

26

• Hierarchical listing of blocks• Easy to find by page structure• Works well with the “Show Template Hints”

Blocks Tab – Blocks Tree Structure

27

• Shows logging entries to Mage::Log()• Shows some issues with data formatting• Don’t work outside Mage:run() because of plugin structure

Logs Tab – Magento Log Files

28

• Installed Magento Extensions• Listed from app/etc/modules/Company_Extension.xml• Shows Code Pool and Version from Extension

Modules Tab

29

Z-Ray PluginsArchitecture and Usage

30

Plugins reside in /usr/local/zend/var/plugins/plugin-name/zray zray.php – Main file for the plugin *only required file Module.php: Controls tab display of search and other layout features README.txt – Document what you do in this file. logo.png – Extension logo, shown in tab. (50x50)

Further Reading: https://github.com/zend-server-plugins/Documentation

Z-Ray Plugin Layout

31

• Class for declaring a Z-Ray extensions Serves as the main API for trace and metadata Instance as many as you like

• ZRayExtension must be enabled Call $zre->setEnabled() Or use $zre->setEnabledAfter()

• Magento uses later method• $zre->traceFunction() is used to add a trace• ZRayExtension acts as a model for the transport of data to javascript

Z-Ray – ZRayExtension()

32

# Init – Removed Logo call$zrayMagento = new Magento();$zrayMagento->setZRay(new ZRayExtension('magento'));$zrayMagento->getZRay()->setEnabledAfter('Mage::run');

# Traces$zrayMagento->getZRay()->traceFunction('Mage::app', function(){}, array($zrayMagento, 'mageAppExit'));$zrayMagento->getZRay()->traceFunction('Mage::log', function(){}, array($zrayMagento, 'logError'));$zrayMagento->getZRay()->traceFunction('Mage::run', function(){}, array($zrayMagento, 'mageRunExit'));$zrayMagento->getZRay()->traceFunction('Mage_Core_Model_App::_callObserverMethod', array($zrayMagento, 'appCallObserverMethodStart'), array($zrayMagento, 'appCallObserverMethodEnd'));$zrayMagento->getZRay()->traceFunction('Mage::dispatchEvent', array($zrayMagento, 'mageDispatchEventStart'), function(){});$zrayMagento->getZRay()->traceFunction('Mage_Core_Model_App::run', function(){},array($zrayMagento, 'createEvents'));

Magento Z-Ray Hook/usr/local/zend/var/plugins/magento/zray/zray.php

33

• $pattern – Typically a function or class name• $onEnter / $onLeave are Callables

Legitimate Callables are as follows:• array($storage,’method’)• anonymous functions• function($context, & $storage)• object that implements __invoke()

zray::traceFunction($pattern, $onEnter, $onLeave);

$zrayMagento->getZRay()->traceFunction('Mage::app', function(){}, array($zrayMagento, 'mageAppExit'));

On leaving Mage::App trace using the $zrayMagento->mageAppExit passing the storage object in $zrayMagento

34

• $context will contain information about the trace• $storage is passed in as a reference

In this example:• Simple trace picks up the data for the Z-Ray Magento Request tab• Stored and parsed later

Z-Ray Magento – App Exit Trace

public function mageAppExit($context, &$storage){ $this->requests = (array)Mage::app()->getRequest();

// Now that we got our requests, we can untrace 'Mage::app' (for performance reasons) $this->getZRay()->untraceFunction("Mage::app");}

35

Name DescriptionfunctionName The function or method's name

functionArgs An array of the arguments passed to the function. This will be a numbered array with the parameters in their order of appearance.

exceptionThrown Did the function throw an exception?exception the exception object that was thrown (can be NULL)

this The $this context of a method. Will be null for global or lambda functions that have no context

returnValue The function's return value

locals the functions variables, as they were at the end of the function. Variables can be accessed like this: $context['locals']['myLocalVariable'] (note the missing $ sign from the variable name).

timesCalled The number which the current function calleddurationInclusive The duration of the function include it's sub childrensdurationExclusive The duration of the function itselfCalledFromFile The filename which the function was calledCalledFromLine The file line which the function was calledextension The zrayExtension instance

More about $context$context is an array of information about the traced function. It includes several keys that contain strings or arrays of data.

https://github.com/zend-server-plugins/Documentation/blob/master/DataCollection.md

36

$zrayMagento->getZRay()->traceFunction('Mage::log', function(){}, array($zrayMagento, 'logError'));

Z-Ray - $context Example (Mage::log)

public function logError($context, & $storage){

$this->_logs[] = $context['locals'];

}

# Collected in mageRunExit

//Logs

$storage['mlogs'][] = array('logs'=>$this->_logs,'devMode'=>Mage::getIsDeveloperMode());

zray.php

37

• Mage::log(“captains log 69266.5”) called in application:

Logs Tab – Magento Log Files

public static function log($message, $level = null, $file = '', $forceLog = false)

Magento app/Mage.php

38

Z-Ray - Storing Data

# gets an array of all handles$handles = Mage::app()->getLayout()->getUpdate()->getHandles();

foreach($handles as $key=>$value){ $handles[$key]['id'] = $key; $handles[$key][‘name'] = $value; # Add some better info such as xml files that use this handle}

return array( 'handles'=>$handles);

Modified Magento::getOverview()

//Overview$storage['overview'][] = $this->getOverview();

Called from Magento::MageRunExit()

39

Z-Ray - Storing Data

private function storeModules(& $storage) { if (Mage::getConfig()->getNode('modules')) { $modules = Mage::getConfig()->getNode('modules')->children(); foreach($modules as $moduleName => $module){ $storage[] = array( 'Name'=>$moduleName, 'Active'=>$module->active == 'false' ? 'false' : 'true', 'Code Pool'=>(string)$module->codePool, 'Version'=>(string)$module->version, ); } }}

Modified: Magento::storeModules()

40

• Changes to the Magento::storeModules show up automagically• Not all panels in the Magento plugin are this easy, this panel is using the

default behavior for the Z-Ray storage object

Z-Ray - Displaying Data

41

• Used for displaying and storage of data• Storage is also collected and transported

to javascript.• Widgets are accessed through the zray

javascript object• There are a couple of basic widgets that

exist to help display data in tables.

List of widgets:Table: Basic tableSummary Table: Used for filteringTree Table: Expandable TablePager: Pagification widgetSearch: A search bar

Z-Ray – Widgets

Further Reading: https://github.com/zend-server-plugins/Documentation/blob/master/Widgets.md

42

Adding the ID to the table widget

var handlesStorage = zray.getStorage('handles');var handlesMaintable = zray.createGeneralTreeTable(handlesStorage, jQuery('#<?php echo $tableParams['handles']['tableId']; ?>'));handlesMaintable.setColumns([ { label: '#', propertyName: 'id', width:75, sortable:true }, { label: 'Name', propertyName: 'name', sortable:true }]);

Modified Panels/overview.phtml

43

• Data must be passed as an array of rows• Each row can be one of the following:

Associative Array: This will make a grid table with columns from the names of the keys.

Multi-Level Associative: Creates a tree table.

Object: Creates a tree table

Z-Ray – Expected Data formatting

$storage['myParams'][] = array('col1' => 'foo', 'col2' => 'bar', 'col3' => 'test');

$storage['myArray'][] = array('name' => 'foo', 'values' => array('col2' => 'bar', 'col3' => 'test'));

$objectOrClass = new ClassName();$storage['myObject']['firstObject'] = $objectOrClass;

44

To Debug Z-Ray Data Requests take a look in its XHR Callhttp://serverdemo.zend.com:10081/ZendServer/Api/zrayGetCustomData

All data is passed in a single call across all Z-Ray extensions. Take a look here to see how your data is flowing.

Z-Ray – Debugging Data Flow

45

The Magento Extension has custom panels for all tabs except the “modules tab”.

We will do the following to create a custom panel for the “modules tab” Modify Module.php add a Panels/modules.phtml file

Module.php contains the descriptions of the panels and there are a few things to remember:• If you add a panel here, you must create a template for it in the Panels/ directory.• The order of the panels in Module.php is displayed in reverse.

Z-Ray Extensions – Custom Panels

Further Reading: https://github.com/zend-server-plugins/Documentation/blob/master/DataDisplay.md

46

Z-Ray Extensions – Custom Panels (Module.php)

class Module extends \ZRay\ZRayModule {

public function config() {

return array(

'panels' => array( 'modules' => array( 'display' => true, 'logo' => 'logo.png', 'menuTitle' => 'Extensions', 'panelTitle'=> 'Extensions', 'searchId'=> 'mage-modules-search', ),

'logs' => array(

Snippet Module.php

• Added the modules element to the panels array, renaming the tab to Extensions• Take a look at the original file and the documentation for more details

47

Z-Ray Extensions – Custom Panels (template)

<?php // Define the table HTML$tableParams = array( 'tableId' => 'mage-modules', 'tableWidth' => '4', );

?><?php echo $this->zrayTable($tableParams); //zrayTableHtml ?><!-– JAVASCRIPT GOES HERE -->

Panels/modules.phtml

• Generates the HTML for the table• Does not come with any data

48

Z-Ray Extensions – Custom Panels (template)

<script type="text/javascript">(function() { var storage = zray.getStorage('modules');

// create main table and bind it to the storage and HTML element var maintable = zray.createTable(storage, jQuery('#<?php echo $tableParams['tableId']; ?>')); maintable.setColumns([ { label: 'Name', propertyName: 'Name', }, // [snip] removed other fields – (active,code pool and version) ]);

// create search zray.createSearch(storage, jQuery('#mage-modules-search'), maintable);

// tie storage handler to data from storage zray.registerDataHandler('magento', 'modules', function(extensionData, requestData) { storage.setData(extensionData); });})();</script>

Panels/modules.phtml (continued)

49

Z-Ray – The Tree Widget• Tree widgets show a tree structured view of the data• Two types of tree widgets are available:

Tree Widget: Simple key->value with the data shown with hierarchy.

General Tree Widget: Structured with column descriptors being homogenous across all rows• Could be used for lists of data, that would need a structure like folders• The Z-Ray Wordpress plugin has a great example of this in the Cache Objects panel.

var maintable = zray.createTreeTable(storage, jQuery('#<?php echo $tableParams['tableId']; ?>'));

50

• If you’re a Magento Developer Start using Z-Ray if you don’t already. Contribute to the Magento plugin, more can be added to this thing.

• If you’re on a different platform Start using Z-Ray if you don’t already. If your platform has a plugin, contribute to it. Most of the plugins need

work. If your platform doesn’t have a plugin, hopefully this presentation will

have helped you start coding it today.

Z-Ray – Call to Action

51

Questions / Answers

52

Also Thanks to the following people: My Family – They put up with me authoring and presenting. Robofirm – They are supportive of my efforts Zend – Thank you for all the tools and support Daniel Berman – For always being there and answering questions Alan Storm – Z-Ray contributions I have made are based on data that his

Magento extension provides.

Thanks For Attending