[Examples] Fixes realworld auth error return and display (#571)

Adds two new sections to docs as well.

examples/realworld/ext/auth/SignupPage.js

@@ -4,6 +4,8 @@ import { useHistory } from 'react-router-dom'
 import login from '@wasp/auth/login'
 import signup from '@wasp/auth/signup'
 
+import { errorMessage } from '../utils.js'
+
 const SignupPage = () => {
   const history = useHistory()
   const [username, setUsername] = useState()
@@ -29,7 +31,7 @@ const SignupPage = () => {
   return (
     <div>
       { submitError && (
-          <p> { submitError.message || submitError } </p>
+          <p> { submitError.message ? errorMessage(submitError) : submitError } </p>
       ) }
 
       <form onSubmit={handleSubmit}>

examples/realworld/ext/user/actions.js

@@ -1,20 +1,32 @@
 import HttpError from '@wasp/core/HttpError.js'
+import AuthError from '@wasp/core/AuthError.js'
+import { isPrismaError, prismaErrorToHttpError } from '@wasp/utils.js'
 
 export const updateUser = async ({ email, username, bio, profilePictureUrl, newPassword }, context) => {
   if (!context.user) { throw new HttpError(403) }
 
   // TODO: Nicer error handling! Right now everything is returned as 500 while it could be instead
   //   useful error message about username being taken / not unique, and other validation errors.
-  await context.entities.User.update({
-    where: { id: context.user.id },
-    data: {
-      email,
-      username,
-      bio,
-      profilePictureUrl,
-      ...(newPassword ? { password: newPassword } : {})
+  try {
+    await context.entities.User.update({
+      where: { id: context.user.id },
+      data: {
+        email,
+        username,
+        bio,
+        profilePictureUrl,
+        ...(newPassword ? { password: newPassword } : {})
+      }
+    })
+  } catch (e) {
+    if (e instanceof AuthError) {
+      throw new HttpError(422, 'Validation failed', { message: e.message })
+    } else if (isPrismaError(e)) {
+      throw prismaErrorToHttpError(e)
+    } else {
+      throw e
     }
-  })
+  }
 }
 
 export const followUser = async ({ username, follow }, context) => {

examples/realworld/ext/user/components/UserSettingsPage.js

@@ -11,6 +11,8 @@ import logout from '@wasp/auth/logout.js'
 
 import updateUser from '@wasp/actions/updateUser'
 
+import { errorMessage } from '../../utils'
+
 import Navbar from '../../Navbar'
 
 const UserSettingsPage = ({ user }) => {
@@ -79,7 +81,7 @@ const UserSettings = (props) => {
     <div>
       { submitError && (
         <p>
-          { submitError.message || submitError }
+          { submitError.message ? errorMessage(submitError) : submitError }
         </p>
       ) }
 

examples/realworld/ext/utils.js

@@ -0,0 +1,8 @@
+export const errorMessage = (e) => {
+  return (
+    <span>
+      Error: {e.message}
+      {e.data?.message && <span style={{display: 'block'}}>Details: {e.data.message}</span>}
+    </span>
+  );
+};

web/docs/language/features.md

@@ -422,6 +422,26 @@ In practice, this means that Wasp keeps the queries "fresh" without requiring yo
 
 On the other hand, this kind of automatic cache invalidation can become wasteful (some updates might not be necessary) and will only work for Entities. If that's an issue, you can use the mechanisms provided by _react-query_ for now, and expect more direct support in Wasp for handling those use cases in a nice, elegant way.
 
+### Prisma Error Helpers
+In your Operations, you may wish to handle general Prisma errors with HTTP-friendly responses. We have exposed two helper functions, `isPrismaError`, and `prismaErrorToHttpError`, for this purpose. As of now, we convert two specific Prisma errors (which we will continue to expand), with the rest being `500`. See the [source here](https://github.com/wasp-lang/wasp/blob/main/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/server/src/utils.js).
+
+#### `import statement`:
+```js
+import { isPrismaError, prismaErrorToHttpError } from '@wasp/utils.js'
+```
+
+##### Example of usage:
+```js
+  try {
+    await context.entities.Task.create({...})
+  } catch (e) {
+    if (isPrismaError(e)) {
+      throw prismaErrorToHttpError(e)
+    } else {
+      throw e
+    }
+  }
+```
 
 ## Dependencies
 
@@ -697,6 +717,26 @@ In order to implement access control, each operation is responsible for checking
 acting accordingly - e.g. if `context.user` is `undefined` and the operation is private then user
 should be denied access to it.
 
+### Validation Error Handling
+When creating, updating, or deleting entities, you may wish to handle validation errors. We have exposed a class called `AuthError` for this purpose. This could also be combined with [Prisma Error Helpers](/docs/language/features#prisma-error-helpers).
+
+#### `import statement`:
+```js
+import AuthError from '@wasp/core/AuthError.js'
+```
+
+##### Example of usage:
+```js
+  try {
+    await context.entities.User.update(...)
+  } catch (e) {
+    if (e instanceof AuthError) {
+      throw new HttpError(422, 'Validation failed', { message: e.message })
+    } else {
+      throw e
+    }
+  }
+```
 
 ## Server configuration