feat: add the ability to override external errors

Author: fsdiogo

src/components/File-Lesson.vue

@@ -46,7 +46,6 @@ export default {
     onFiles: function (files) {
       this.uploadedFiles = files
       window.uploadedFiles = files
-      // console.log({uploadedFiles: this.uploadedFiles})
      }
     }
   }

src/components/Lesson.vue

@@ -168,8 +168,8 @@ import MonacoEditor from 'vue-monaco-editor'
 import Explorer from './Explorer.vue'
 import Button from './Button.vue'
 import Header from './Header.vue'
-const CID = require('cids')
-const marked = require('marked')
+import CID from 'cids'
+import marked from 'marked'
 
 const hljs = require('highlight.js/lib/highlight.js')
 hljs.registerLanguage('js', require('highlight.js/lib/languages/javascript'))
@@ -233,6 +233,7 @@ export default {
       concepts: self.$attrs.concepts,
       cachedCode: !!localStorage['cached' + self.$route.path],
       code: localStorage[self.cacheKey] || self.$attrs.code || self.defaultCode,
+      overrideErrors: self.$attrs.overrideErrors,
       isFileLesson: self.isFileLesson,
       parsedText: marked(self.$attrs.text),
       parsedExercise: marked(self.$attrs.exercise || ''),
@@ -323,13 +324,14 @@ export default {
       let modules = {}
       if (this.$attrs.modules) modules = this.$attrs.modules
       if (this.isFileLesson) args.unshift(this.uploadedFiles)
+      // Output external errors or not depending on flag
       let result = await _eval(code, ipfs, modules, args)
-
-      if (result && result.error) {
+      if (!this.$attrs.overrideErrors && result && result.error) {
         Vue.set(output, 'test', result)
         this.lessonPassed = !!localStorage[this.lessonKey]
         return
       }
+      // Run the `validate` function in the lesson
       let test = await this.$attrs.validate(result, ipfs, args)
       Vue.set(output, 'test', test)
       if (CID.isCID(result)) {

src/tutorials/Mutable-File-System/03-exercise.md

@@ -1,3 +1,3 @@
 Let's add some files to IPFS using MFS. Since `files` is an array representing the files currently available to us in the browser, we'll need to loop through the array and use `files.write()` to add each file we find there to IPFS, one at a time. (Only have a single file uploaded? No problem!)
 
-Put your files in the root directory (`/`) and be sure to add the name of each file to the path when you add it. (Hint: The file object in the browser stores the filename as `file.name`.) Be sure to set up your options so that a new file is created when one isn't found at the given path.
+Put your files in the root directory (`/`) and be sure to add the name of each file to the path when you add it (**hint:** the file object in the browser stores the filename as `file.name`). Be sure to set up your options so that a new file is created when one isn't found at the given path.

src/tutorials/Mutable-File-System/03.vue

@@ -3,6 +3,7 @@
     :text="text"
     :code="code"
     :validate="validate"
+    :overrideErrors="true"
     :modules="modules"
     :exercise="exercise"
     lessonTitle="Add a new file to MFS">
@@ -15,47 +16,40 @@ import text from './03.md'
 import exercise from './03-exercise.md'
 
 const validate = async (result, ipfs) => {
-  // The code in this exercise does not have a return value since write doesn't
-  // give anything back, so `result` should always be undefined and is irrelevant
-  // for validation. Validation will be done by matching filenames between the
+  // Validation will be done by matching filenames between the
   // uploadedFiles array and the files in IPFS and ensuring that the type of each
   // file in IPFS is 0 (file, not folder).
+  // If IPFS errors out, we try to output a clearer version to the user. If that's
+  // not possible, the error from IPFS will be the output.
 
   let uploadedFiles = window.uploadedFiles || false
 
   let ipfsFiles = await ipfs.files.ls('/', {long: true})
   console.log('Here\'s what\'s now in your root directory in IPFS:')
   console.log(ipfsFiles)
 
-  let uploadedFilenames = uploadedFiles.map( file => file.name.toString() ).sort()
-  let ipfsFilenames = ipfsFiles.map( file => file.name.toString() ).sort()
+  let uploadedFilenames = uploadedFiles.map(file => file.name.toString()).sort()
+  let ipfsFilenames = ipfsFiles.map(file => file.name.toString()).sort()
   let itemsMatch = JSON.stringify(ipfsFilenames) === JSON.stringify(uploadedFilenames)
   let itemsAreFiles = ipfsFiles.every(file => file.type === 0)
 
-  if (uploadedFiles = false) {
-    // shouldn't happen because you can't hit submit without uploading files
-    return {'fail': 'Oops! You forgot to upload files to work with :('}
-  } else if (ipfsFiles.length === 0) {
-    // if somehow no files are written to IPFS
-    return {'fail': 'Uh oh. Looks like no files made it into IPFS.'}
-  } else if (!itemsAreFiles) {
-    // if they forget the file name and just use a directory as the path
-    // this never shows because there's a native error msg showing that's unclear
-    return {'fail': 'Uh oh. It looks like you created a folder instead of a file. Did you forget to include a filename in your path?'}
-  } else if (itemsMatch && itemsAreFiles) {
-    return {'success': 'Success! Open your console to see what data is now in your root directory in IPFS.'}
-  } else {
-    return {'fail': 'Something we haven\'t anticipated is wrong. :('}
+  if (itemsMatch && itemsAreFiles) {
+    return { success: 'Success! Open your console to see what data is now in your root directory in IPFS.' }
+  } else if (uploadedFiles = false) {
+    // Shouldn't happen because you can't hit submit without uploading files
+    return { fail: 'Oops! You forgot to upload files to work with :(' }
+  } else if (result && result.error.message === 'No child name passed to addLink') {
+    // Forgot the file name and just used a directory as the path
+    return { fail: 'Uh oh. It looks like you created a folder instead of a file. Did you forget to include a filename in your path?' }
+  } else if (result && result.error.message === 'file does not exist') {
+    // Forgot the `{ create: true }` option
+    return { fail: 'The file doesn\'t exist, so you need to create it. Maybe you forgot and option...'  }
   }
 
-  // also wanted to make a custom error for if they forget {create: true}
-  // but it also has a native error msg showing that's unclear
+  // Output the default error if we haven't catched any
+  return { error: result.error }
 }
 
-//blah
-
-
-
 const code = `const run = async (files) => {
   for (let file of files) {
     // your code to add one file to MFS goes here