facade / flare-client-js Goto Github PK

I'm currently adding a custom context, user, but ideally I'd like my user info to be in the actual proprietary "user" context for Flare.

Would I do something like this?

flare.beforeSubmit = report => {
  const editedReport = _.cloneDeep(report)
  
  // Is it just under the `user` prop?
  editedReport.context.user = myUserObject

  return editedReport
}

Is there anything I should know about on how to structure the object so it plays nice?

Ah, just answered my own question but going to post it anyway for others.

Yes, but its clunky - set the project as js, get the token and change it back to Laravel - setup your js client.

Would be tidier if the js token was avaialble on laravel/php settings page as well as the serverside key.

https://twitter.com/MaybeEdward/status/1275547021882150912

public editContext(callback): void {
    this.context = callback(deepClone(this.context));
}

usage:

flare.editContext(context => {
    context.custom_parameter = 5;

    return context;
});

Discuss: Do we need limits, and what should be the defaults?

e.g.

• max x reports per second

• max x reports per session

• max x glows per report

• …

• Don't report for IE <= 9

Set min, max and default values for options

The React client is not compatible with React 17 (https://github.com/facebook/react).

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @flareapp/[email protected]
npm ERR! node_modules/@flareapp/flare-react
npm ERR!   @flareapp/flare-react@"*" from the root project

Not a blocker for me, just wanted to let you know.

Thanks

I'm creating a widget and my code will be imported into many third-party websites.

I only want to report errors that are relevant to the "widget", also it's not good manners if my code sets globals on the window object.

Looking at the code I can achieve this currently by using https://github.com/facade/flare-client-js/blob/master/packages/client/src/FlareClient.ts directly with my API key.

This also means that I need to use a forked version of the vite plugin to upload sourcemaps that enables not setting globals.

Description

We have a Laravel project with an Inertia/React/TypeScript front-end. After adding the Flare React client we get TypeScript errors from the flare-react package when running npm buid.

I've confirmed this is also the case in a fresh project.

Errors

node_modules/@flareapp/flare-react/dist/react/src/index.d.ts:6:19 
error TS2307: Cannot find module '../../client/dist/FlareClient' or its corresponding type declarations.
6     flare: import("../../client/dist/FlareClient").default | null;

node_modules/@flareapp/flare-react/dist/react/src/index.d.ts:11:96 
error TS2304: Cannot find name 'Flare'.
11 export declare function reportReactError(error: Error, reactErrorInfo: React.ErrorInfo, flare: Flare | null): void;

How to reproduce

• Install new Laravel project (laravel new react-flare-test)
• Pick the Breeze starter kit
• Pick the React with Inertia stack
• Tick the TypeScript option
• Add the Flare JS/React packages (npm install @flareapp/flare-client @flareapp/vite-plugin-sourcemap-uploader @flareapp/flare-react)
• Add flare.light() and FlareErrorBoundary wrapper to the app root (as instructed in Flare)
• Run npm run buid

For usage in a user's ts project.

see https://marcobotto.com/blog/compiling-and-bundling-typescript-libraries-with-webpack/
and also https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

We'd have to run the tsc compiler with the --declaration option separately from the webpack bundle step.

Maybe use run-p to do all the build steps in parallel

See support ticket 571.

Maybe, when flare.report is run, we could pass a copy of the current state of the client along for the ride, so it's still the same by the time the error needs to be uploaded.

How to set up the JS client using a CDN and a script tag. Also for the Vue & React libraries (not sure this will be possible for React, but Vue should be easy).

Make sure they're clear on all points

https://twitter.com/justenholter/status/1334694589039587328

When using @flareapp/flare-client with nuxt I get the following error server side.

Nuxt automatically handles errors by sending the user to the /error.vue component. Which I have a script setup like this:

<script setup lang="ts">
import { flare } from '@flareapp/flare-client';

// report error
flare.report(props.error);
</script>
<template>
...
</template>

However, when nuxt catches an error and redirects the user to this page, I get the following error from flare:

[nitro] [dev] [unhandledRejection] ReferenceError: document is not defined                                       7:58:31 AM
    at f (/Users/ianjamieson/tixel/content-nuxt/node_modules/@flareapp/flare-client/dist/index.js:1:7042)
    at /Users/ianjamieson/tixel/content-nuxt/node_modules/@flareapp/flare-client/dist/index.js:1:15761
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Now, if I only report the error client side:

if(process.client) {
  // report error
  flare.report(props.error);
}

Then the error goes away.

I have also tested to see if errors come through to flare despite the warning showing, and they don't.

I have tested by putting:

flare.report({
  message: `from store, client: ${process.client}`
});

Inside a store which is executed server side, and I do not see any error in flare, just the document undefined error.

Could not find a declaration file for module '@flareapp/flare-vue'.

Typescript error thrown when adding import { flareVue } from "@flareapp/flare-vue";

I know this error is meant to be informative but it's a bit annoying during development. Any possibility that this can be removed?

https://github.com/lerna/lerna/tree/master/commands/bootstrap

I'm seeing the following error in my javascript console when developing locally (haven't tested in production yet):

[Error] Refused to set unsafe header "Access-Control-Request-Headers"
	(anonymous function) (app.js:726:236)
	promiseReactionJob

chrome-extension: in Chrome, probably something similar in Firefox. Also check IE and maybe Opera.

Flare.log('string') or so

https://flareapp.io/docs/ignition-for-laravel/sending-logs-to-flare