12. Editor: A system error has occurred.

When an Editor request is made and the returned data is not in the expected format (JSON), Editor will show an error message stating that an error has occurred:

• 1.3.3+: A system error has occurred (more information)
• 1.3.2-: An error has occurred - Please contact the system administrator

This is a generic error message that Editor displays in the UI when it is unable to parse the returned data as JSON.

Diagnosis

If the server didn't reply to Editor's Ajax request with valid JSON data, we need to know what it did reply with, so we can take corrective action. Typically, the response will consist of an error message from the program on the server which is being used to create the JSON, which will be the starting point for resolving the issue fully.

Server data

Modern browsers all come with built in developer tools, which can be used to find out what data the server is responding to the Editor Ajax request with. Instructions on how to do this with your browser are shown below.

Safari

1. By default Safari hides its built-in developer tools. If you don't have a Develop menu shown in Safari it needs to be enabled. If you do, jump to step 3.
   • Open the Safari menu and select Preferences...
2. Enable the developer menu in the Advanced tab
   • Click the Advanced tab in the Preferences window
   • Check the box for Show Develop menu in menu bar option
   • Close the preferences - the Develop menu will now be shown
3. View the resources the page has loaded
   • Select the Show Page Resources option from the Develop menu.
   • The developer console will show at the bottom of the page
   • Reload the page so Safari can capture all network requests
4. Details about the Ajax request are shown.
   • Safari will show a list of all resources (images, scripts etc) which have been loaded for the page. Locate the Ajax request that has been made to the server and click it. Safari will show detailed information about the request.
   • Note that on pages with a large number of resources, Safari will group the resources by type into folders. If this happens on your site, look for the "XHRs" folder for the Ajax requests.

Please note that these instructions were written with Safari 7 as the version used. Newer versions might have slightly different steps.

Chrome

1. To access the developer tools in Chrome:
   • Mac: Access the View > Developer > Developer Tools menu option.
   • Windows: Click the Chrome menu (to the right of the address bar) and select Tools > Developer Tools.
2. The Developer tools are shown at the bottom of the current browser window. Chrome will show the Javascript console by default.
   • Click on the Network tab to view network requests
   • Refresh the page to allow Chrome to capture all requests
3. The network panel will show all of the requests made by Chrome to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by Editor
4. Details about the Ajax request are shown.
   • Click the Response tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Chrome 31 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

Firefox

1. To access the developer tools in Firefox:
   • Mac: Access the Tools > Web Developer > Network menu option.
   • Windows: Click the Firefox menu (top left of the window) and select Web Developer Network option.
2. The Developer tools are shown at the bottom of the current browser window.
   • Refresh the page to allow Firefox to capture all requests
3. The network panel will show all of the requests made by Firefox to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by Editor
4. Details about the Ajax request are shown.
   • Click the Reponse tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Firefox 26 Windows as the version used. Newer versions, or those on different platforms might have slightly different steps.

IE

1. To access the developer tools in IE:
   • Press F12 or,
   • Click the tools menu (top right, a cog icon) and select the F12 developer tools option.
2. The Developer tools are shown at the bottom of the current browser window. IE will show the document tree by default.
   • Click on the Network tab to view network requests
3. IE requires that network traffic be specifically tracked, which we want here.
   • Click the Start capturing button to capture network requests
   • Refresh the page to allow IE to capture all requests
4. The network panel will show all of the requests made by IE to load the page.
   • Double click the Ajax request made by Editor - it will likely be at or near the bottom of the request list
5. Details about the Ajax request are shown.
   • Click the Reponse body tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with IE 10 as the version used. Newer versions might have slightly different steps.

Opera

1. To access the developer tools in Opera:
   • Mac: Right click or ctrl click the document and select the Inspect element option.
   • Windows: Right click the document and select the Inspect element option.
2. The Developer tools are shown at the bottom of the current browser window. Opera will show information about the element that was clicked on.
   • Click on the Network tab to view network requests
   • Refresh the page to allow Opera to capture all requests
3. The network panel will show all of the requests made by Opera to load the page.
   • Click the XHR option at the bottom of the window to reduce the requests to just the Ajax (XHR) requests.
   • Double click the Ajax request made by Editor
4. Details about the Ajax request are shown.
   • Click the Reponse tab in the Ajax view to see the exact data that was returned from the server. This is what we are interested in!

Please note that these instructions were written with Opera 18 Mac as the version used. Newer versions, or those on different platforms might have slightly different steps.

Error handler

It can also be useful to use the submitError event that Editor emits when an error occurs. The event has a number of parameters passed into it which can be useful for diagnosis:

``js editor.on( 'submitError', function ( e, xhr, err, thrown, data ) { this.error( xhr.responseText ); } ); ```

Resolution

Once you have followed the instructions above to find out what the data from the server actually is, it will provide the information required to resolve the underlying issue. The most common issues are:

• PHP 5.2 or earlier is being used (the Editor PHP libraries require PHP 5.3 or newer)
• A syntax error has been introduced into the code somewhere
• A bug exists in Editor causing PHP to dump an error message.

In any support requests, please ensure that you include the data returned from the server so we can help to resolve the error.