How should I handle serious errors in Vue components within Laravel apps?

Question

[Clarified]

I'm writing my first Laravel app using Vue components; it is a CRUD. I know how to report significant problems to laravel.log via the Log::error("There is an error") technique but that's only useful while I'm in the PHP code; as far as I can figure out, there's no way to write to laravel.log from within a Vue component. (Correct me if I'm wrong!!)

This raises the question of how I should report an error in a Vue component in a Laravel app. I know about console.log(), Debugger for Chrome, and Devtools and those are fine for development. But what about errors that might reasonably happen in production? Clearly, user errors like bad input on a form needs to be dealt with by notifying the user and letting the user correct their input but some errors are beyond the user's scope. For example, it's not hard to imagine my Vue component failing to access the database because it is down for some reason. Shouldn't that kind of problem be written to a log so that whoever monitors production apps can deal with it?

How would a professional app deal with that kind of situation?

My initial inclination is just to write it to laravel.log if possible but that may be either impossible or be considered a bad approach. I'd be curious to know what experienced Laravel developers do in such situations. Maybe automatically sending a text to a support person would be a better approach. I'm really not sure how this should be handled in a modern professional way.

In any case, whoever is responsible for situations beyond the user's control needs to be told somehow so they can begin the steps that would be necessary to fix the problem. Furthermore, this person needs to be given sufficient details of what happened to be able to solve the problem. I expect that would include things like stacktraces, error codes, etc. I wouldn't want to send all of that as a stream of texts, I'd want it all to be accessible in a log of some kind. Then, you simply notify the support person that there is a problem of such-and-such severity which occurred at such-and-such a time and remind them where to find the details.

My approach may be dated though and newer, better alternatives may exist. Those are what I'm looking for with my question.

@bhuchco - I want to do whatever a high-quality Laravel app with Vue components would do for situations where the problem couldn't be handled by the user. Obviously, invalid data supplied by the user should be mentioned to the user and they should be given the opportunity to fix it themselves. I'm trying to provide for cases where someone needs to be notified automatically because the problem is not something the user can handle.Logging comes to mind but maybe the right approach is to text a support person. I really don't know what is common these days. — Henry
– Henry, Commented Dec 9, 2020 at 13:06

bhucho · Accepted Answer · 2020-12-09 06:02:17Z

1

I can give a general purpose answer for your question.

React introduced the concept of ErrorBoundary,

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

Using Error Boundary in Vue

use vue-error-boundary

This simple code of handleError method shows ErrorBoundary receiving a callback function through the on-error prop.

<template>
  <ErrorBoundary :on-error="handleError">...</ErrorBoundary>
<template>
 
<script>
// ...
methods: {
  handleError (err, vm, info) {
    // do something
  }
}
// ...
</script>

read the docs for the npm module to know more.

while handling errors, you can pass the errors to a link to your production site.
eg. /logging so it would be like https://www.example.com/logging, and post the errors in a format eg Date: Error File: Error Message.
You can even use authentication tokens along this link (though no one would use it as it would be frontend errors everyone can see it at console). Then use routes to log those errors to laravel logs.

answered Dec 9, 2020 at 6:02

bhucho

3,4303 gold badges19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Henry Over a year ago

Thanks for the suggestion. I'm going to leave this question up for a day or two to get other opinions as to the best approach.

Henry Over a year ago

@bhuchco - I thought there might be additional answers but it seems yours is the only one. It seems like quite a good answer too now that I've looked at some examples. I'm giving you the "best answer" check mark.

bhucho Over a year ago

The other native option might be to use try catch but Error Boundary seems to be more refined one

Henry Over a year ago

Is there any way to write to the laravel.log from a try/catch? I can write to the laravel log easily from the PHP code but I don't know if it's even possible in a Vue component, let alone how one would do it.

bhucho Over a year ago

I don't think js would be able to handle laravel logs as they are in storage folder, you can create logs in public folder though

Collectives™ on Stack Overflow

How should I handle serious errors in Vue components within Laravel apps?

1 Answer 1

Using Error Boundary in Vue

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using Error Boundary in Vue

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related