added MirageError when handling errors in route-handler

[danieltolmon]

Solved #185
I added a MirageError when catching an error on the routerHandler. So the user will have more information about the error.
Is it that you where thinking when you reported the issue?

[samselikoff]

@danieltolmon I'd like to take a broader look at how Mirage reports errors in different environments. I think there are some common situations where the errors get swallowed, and it's hard for the user to know what happened.

Maybe we can start with a single environment – Create React App. Start a new CRA, add Mirage, and then take some screenshots of the console when Mirage errors. We can bring the screens back to #185 to discuss.

What do you think?

[danieltolmon]

Yeap @samselikoff , I can do that. and we discuss it on the issue chat

[samselikoff]

Great start!

Checking this out now. So, when I drop a simple error in a route handler

this.get("/api/call", () => {
  return window.foo.bar;
});

this is what I see:

I think it's still confusing for new Mirage users, because there's no connection to the error + their Mirage code. Only if they happen to dig in a bit more to the Mirage response will they see:

but this is quite confusing.

If I change it to something that ESLint recognizes as an error

this.get("/api/call", () => {
  return foo.bar;
});

this is what I see in the console:

I think if our error messages looked like this it would be much more clear. Now, the line number stuff is tricky for us, but if you look at the messaging we do have some information:

"Mirage: Mirage: Your GET handler for the url /api/call threw an error:

ReferenceError: foo is not defined

I think if the error showed this, that would be the most helpful thing. So let's prepend Mirage to the error message, and have it say:

[ Mirage ] Your GET handler for the url /api/call threw an error:

  foo is not defined

including the formatting + new lines (indent the error and prepend message with [Mirage].

Let me know if you have any questions!

[danieltolmon]

Okay, I changed the console.error to give more information. Here I send a screenshot about how it looks:

What do you think?