fix(RolePicker): add error handling to help with tracing

Server/api/servers.js

@@ -1,3 +1,7 @@
+const ksuid = require('ksuid')
+const log = new (require('../logger'))('api/servers')
+
+
 module.exports = (R, $) => {
   const getGm = async (id, userId) => {
     let gm
@@ -41,9 +45,16 @@ module.exports = (R, $) => {
       return
     }
 
-    const server = await $.P.presentableServer(srv, gm)
+    try {
+      const server = await $.P.presentableServer(srv, gm)
+      ctx.body = server
+    } catch (e) {
+      const txid = await ksuid.random()
+      log.error(`presentable render failed -- txid: ${txid}`, id, userId, gm)
+      ctx.status = 500
+      ctx.body = { err: 'render_failed', txid }
+    }
 
-    ctx.body = server
   })
 
   R.get('/api/server/:id/slug', async ctx => {

UI/src/components/role-picker/actions.js

@@ -6,6 +6,16 @@ export const setup = id => async dispatch => {
   const rsp = await superagent.get(`/api/server/${id}`)
   const data = rsp.body
 
+  if (rsp.status === 500) {
+    dispatch({
+      type:  Symbol.for('rp: error'),
+      data: {
+        txid: data.txid,
+      }
+    })
+  }
+
+
   dispatch({
     type: Symbol.for('server: set'),
     data: {

UI/src/components/role-picker/index.js

@@ -67,6 +67,12 @@ class RolePicker extends Component {
     dispatch(Actions.closeMessageEditor)
   }
 
+  renderError() {
+    return <div className={`inner role-picker`}>
+      <pre>Something went terribly wrong. Please share this magical incantation in the Roleypoly Discord: {this.props.data.error.txid}</pre>
+    </div>
+  }
+
   renderServerMessage(server) {
     const isEditing = this.props.data.get('isEditingMessage')
     const roleManager = server.getIn(['perms', 'canManageRoles'])
@@ -140,6 +146,10 @@ class RolePicker extends Component {
     const { data, server, dispatch } = this.props
     const vm = data.get('viewMap')
 
+    if (data.error) {
+      return this.renderError()
+    }
+
     if (server === undefined) {
       return null
     }

UI/src/reducers/role-picker.js

@@ -8,6 +8,7 @@ const initialState = Map({
   viewMap: OrderedMap({}), // roles in categories
   originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected
   rolesSelected: Map({}), // Map<role id, bool> -- new roles for diffing
+  error: null,
 })
 
 export default (state = initialState, { type, data }) => {
@@ -38,6 +39,9 @@ export default (state = initialState, { type, data }) => {
     // case Symbol.for('rp: zero role picker'):
     // return initialState
 
+    case Symbol.for('rp: error'):
+      return state.set('error', data)
+
     default:
       return state
   }