Pr/shorten error messages (codesandbox#620)

* WIP: tried to shorten error messages in teh console

* added myself as code contributor

* added a comment and fixed trailling line breaks

Author: joeynimu

.all-contributorsrc

@@ -478,6 +478,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "joeynimu",
+      "name": "Joe Ng'ethe",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1195863?v=4",
+      "profile": "http://joey.co.ke",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-49-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-50-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -44,4 +44,5 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub><b>Haroen Viaene</b></sub>](https://twitter.com/haroenv)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=haroenv "Code") [🎨](#design-haroenv "Design") | [<img src="https://avatars1.githubusercontent.com/u/293805?v=4" width="100px;"/><br /><sub><b>Nick Nisi</b></sub>](https://nicknisi.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nicknisi "Code") | [<img src="https://avatars2.githubusercontent.com/u/9327315?v=4" width="100px;"/><br /><sub><b>Abhishek Jakhotiya</b></sub>](https://github.com/Jakhotiya)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Jakhotiya "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AJakhotiya "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/14299145?v=4" width="100px;"/><br /><sub><b>Tom Kühl</b></sub>](http://twitter.com/tomkuehl_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tomkuehl "Code") | [<img src="https://avatars2.githubusercontent.com/u/1086461?v=4" width="100px;"/><br /><sub><b>br1anchen</b></sub>](https://github.com/br1anchen)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=br1anchen "Code") | [<img src="https://avatars3.githubusercontent.com/u/11952174?v=4" width="100px;"/><br /><sub><b>Daniel Hsing</b></sub>](https://arthelon.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Arthelon "Code") | [<img src="https://avatars2.githubusercontent.com/u/5403694?v=4" width="100px;"/><br /><sub><b>Maciej Kasprzyk</b></sub>](https://twitter.com/_maciejka)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=maciej-ka "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/596727?v=4" width="100px;"/><br /><sub><b>Robert Heessels</b></sub>](https://github.com/robertheessels)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=robertheessels "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/772937?v=4" width="100px;"/><br /><sub><b>Ryan P. C. McQuen</b></sub>](https://ryanpcmcquen.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ryanpcmcquen "Code") | [<img src="https://avatars3.githubusercontent.com/u/613805?v=4" width="100px;"/><br /><sub><b>Chris</b></sub>](http://chrisrjones.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ipatch "Code") | [<img src="https://avatars3.githubusercontent.com/u/595469?v=4" width="100px;"/><br /><sub><b>Drew Smith</b></sub>](https://github.com/drewsmith)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=drewsmith "Code") | [<img src="https://avatars2.githubusercontent.com/u/12481?v=4" width="100px;"/><br /><sub><b>Eric Berry</b></sub>](https://codesponsor.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=coderberry "Code") | [<img src="https://avatars1.githubusercontent.com/u/17228477?v=4" width="100px;"/><br /><sub><b>Hum4n01d</b></sub>](https://www.hum4n01d.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Hum4n01d "Code") | [<img src="https://avatars3.githubusercontent.com/u/10888943?v=4" width="100px;"/><br /><sub><b>Malachi Willey</b></sub>](https://github.com/malwilley)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=malwilley "Code") |
 | [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
+| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/components/Preview/DevTools/Console/Message/index.js

@@ -19,6 +19,15 @@ function formatMessage(message) {
   return formattedResult;
 }
 
+function splitMessage(message) {
+  const breakIndex = message.indexOf('\n');
+  // consider that there can be line without a break
+  if (breakIndex === -1) {
+    return message;
+  }
+  return message.substr(0, breakIndex);
+}
+
 function getMessage(message) {
   if (message.type === 'return') {
     return (
@@ -50,6 +59,27 @@ function getMessage(message) {
   }
 
   if (message.arguments.every(argument => typeof argument === 'string')) {
+    if (message.logType === 'error') {
+      /* This checks for error logTypes and shortens the message in the console by wrapping
+      it a <details /> tag and putting the first line in a <summary /> tag and the other lines
+      follow after that. This creates a nice collapsible error message */
+      let otherErrorLines;
+      const msgLine = message.arguments.join(' ');
+      const firstLine = splitMessage(msgLine);
+      const msgArray = msgLine.split('\n');
+      if (msgArray.length > 1) {
+        otherErrorLines = msgArray.slice(1);
+      }
+      return (
+        <InnerItem>
+          <details>
+            <summary>{firstLine}</summary>
+            {otherErrorLines.join('\n\r')}
+          </details>
+        </InnerItem>
+      );
+    }
+
     return <InnerItem>{message.arguments.join(' ')}</InnerItem>;
   }