Handle error when loading avatar, show default

app/components/Avatar/Avatar.js

@@ -1,10 +1,36 @@
 // @flow
+import React, { Component } from 'react';
 import styled from 'styled-components';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { color } from 'shared/styles/constants';
+import placeholder from './placeholder.png';
 
-const Avatar = styled.img`
+@observer
+class Avatar extends Component {
+  @observable error: boolean;
+
+  handleError = () => {
+    this.error = true;
+  };
+
+  render() {
+    return (
+      <CircleImg
+        {...this.props}
+        onError={this.handleError}
+        src={this.error ? placeholder : this.props.src}
+      />
+    );
+  }
+}
+
+const CircleImg = styled.img`
   width: 24px;
   height: 24px;
   border-radius: 50%;
+  border: 2px solid ${color.white};
+  flex-shrink: 0;
 `;
 
 export default Avatar;

app/components/Collaborators/Collaborators.js

@@ -2,12 +2,14 @@
 import React from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
-import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';
+import Avatar from 'components/Avatar';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
 
-const Collaborators = function({ document }: { document: Document }) {
+type Props = { document: Document };
+
+const Collaborators = ({ document }: Props) => {
   const {
     createdAt,
     updatedAt,
@@ -40,19 +42,14 @@ const StyledTooltip = styled(Tooltip)`
 `;
 
 const Avatars = styled(Flex)`
+  align-items: center;
   flex-direction: row-reverse;
-  height: 26px;
-`;
 
-const Avatar = styled.img`
-  width: 26px;
-  height: 26px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  border: 2px solid ${color.white};
-  margin-right: -10px;
+  ${Avatar} & {
+    margin-right: -10px;
+  }
 
-  &:first-child {
+  ${Avatar} &:first-child {
     margin-right: 0;
   }
 `;