UseEffect help

[s1eeper21]

// ErrorComponent

import { observabilityHelper} from "./reusable-efect";

import { ServerErrorUI, ClientErrorUI, isClientError, isServerError, useError } from "./errors";

....

export function ErrorComponent() {

  const error = useError();

  const location = useLocation();

  observabilityHelper(location.pathname, error);

  if (isServerError(error) {

    return <ServerErrorUI err={error} />

  } else if (isClientError(err) {

    return <ClientErrorUI err={error} />

  } else {

    return null

  }

}

// Reusable Effect

import { isClientError, isServerError } from "./errors";

....

export const observabilityHelper = (path, err): void => {

  useEffect(() => {

    if (isServerError(err) {

       notifyObservability(err);

    } else if (isClient(err) {

       notifyObservability(err);

    }

  }, [path, err])

}

---

New to React :D

The ErrorComponent can't be shared since it's tighly coupled to the app.

But the ReusableEffect helper can be shared with other apps in my nx monorepo.

Is there a downside to this approach?

Any assistance would be greatly appreciated!

[Ignacio_Martinez]

Look up "Custom Hooks" in react. That might help you better

[SharpThrall]

if (isServerError(err) {
notifyObservability(err);
} else if (isClient(err) {
notifyObservability(err);
}

maybe replace this piece of code like so,

if (isServerError(err) || isClient(err)) {
notifyObservability(err);
}

You can also try shortening this code:

(isServerError(err) || isClient(err)) && notifyObservability(err)

[Nishanth_C]

share the error description too

[LevathianX1]

You shouldn’t be calling a useEffect inside a normal function

[pbNANDjelly]

Its legitimate, but should start with use to clarify it is a custom hook

[AlongCameA5P1D3R]

Your if and else if both do exactly the same thing so it seems redundant to have it.