Ç°¶Ë JS Òì³£ÄÇЩÊÂ

console.log(1)

let 1 // Uncaught SyntaxError: Unexpected number



function test() {

    console.log(1)

    await 1

}

const a = Error('a')

const b = new Error('b')

console.log(Object.getPrototypeOf(SyntaxError) === Error);    // true

console.log(Object.getPrototypeOf(TypeError) === Error);   // true

console.log(Object.getPrototypeOf(ReferenceError) === Error);   // true

console.log(Object.getPrototypeOf(RangeError) === Error);   // true

console.log(Object.getPrototypeOf(URIError) === Error);   // true

console.log(Object.getPrototypeOf(EvalError) === Error);   // true

class ApiError extends Error {

  constructor(message, code) {

    super(message);

    this.code = code

  }

}



const err = new ApiError('xxx', 404)

err instanceof  ApiError

async function doJob() {
  const rawResource = await fetch('//domain/resource-a')
    .catch(err => {
      throw new Error('Download raw resource failed', { cause: err });

    });
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('//domain/upload', { method: 'POST', body: jobResult })
    .catch(err => {
      throw new Error('Upload job result failed', { cause: err });
    });

}

try {
  await doJob();
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}
// Error: Upload job result failed
// Caused by TypeError: Failed to fetch

Error.stackTraceLimit

Error.captureStackTrace(error, constructorOpt)

function CustomError(message) {
  this.message = message;
  this.name = CustomError.name;
  Error.captureStackTrace(this); // ¸ø¶ÔÏó×·¼ÓstackÊôÐÔ

}

try {
  throw new CustomError('msg');
} catch (e) {
  console.log(e)
}

const sourceMap = require('source-map');
const SourceMapConsumer = sourceMap.SourceMapConsumer;

const Stacktracey = require('stacktracey');
const errorStack = '...'; // ´íÎóÐÅÏ¢

const sourceMapFileContent = '...'; // sourcemapÎļþÄÚÈÝ
const tracey = new Stacktracey(errorStack); // ½âÎö´íÎóÐÅÏ¢

const sourceMapContent = JSON.parse(sourceMapFileContent);

const consumer = await new SourceMapConsumer(sourceMapContent);

for (const frame of tracey) { // ÕâÀïµÄframe¾ÍÊÇstackÖеÄÒ»ÐÐËù½âÎö³öÀ´µÄÄÚÈÝ
    // originalPosition²»½ö½öÊÇÐÐÁÐÐÅÏ¢£¬»¹ÓдíÎó·¢ÉúµÄÎļþ originalPosition.source

    const originalPosition = consumer.originalPositionFor({
        line: frame.line,
        column: frame.column,
    });

    // Äõ½´íÎóËù¶ÔÓ¦µÄÔ´ÂëÒÔ¼°ÉÏÃæµÄÐÐÁкÅ
    const sourceContent = consumer.sourceContentFor(originalPosition.source);
    console.log(sourceContent);

}

const a = {}

a.b.c = 1

switch (type) {
    case a:
    break;
    case b:
    break;
    default:
     throw new Error('xxxx')

}

instance.interceptors.response.use(async (res: AxiosResponse<Result>) => {
    if (res?.data?.statusCode !== 0) {
        throw new ApiError('xx', res?.data?.statusCode)
    }
    return res

})

const res = await api()
if (res.code !==0) {
    return
}

try {
 fn()
} catch(e) {}
fn().then(() =>{}, () => {
    // catch
})

fn().catch(() => {})

try { await fn() } catch(e) {}

import to from 'await-to-js';
async function asyncTask() {

     let err, user, savedTask;
     [err, user] = await to(UserModel.findById(1));
     if(!user) throw new CustomerError('No user found');
     [err, savedTask] = await to(TaskModel({userId: user.id, name: 'Demo Task'}));

     if(err) throw new CustomError('Error occurred while saving task');

    if(user.notificationsEnabled) {
       const [err] = await to(NotificationService.sendNotification(user.id, 'Task Created'));
       if (err) console.error('Just log the error and continue flow');
    }
}

export function CatchAsync(errorLabel = '') {
    return function (target: unknown, key: string, descriptor: PropertyDescriptor) {
        errorLabel = errorLabel || key
        const originFn = descriptor.value
        descriptor.value = async function (...rest: unknown[]) {
            try {
                return await originFn.call(this, ...rest)
            } catch (e) {
               // do something
                throw e
            }
        }
    }
}



export function CatchSync(errorLabel = '') {
    return function (target: unknown, key: string, descriptor: PropertyDescriptor) {
        errorLabel = errorLabel || key
        const originFn = descriptor.value
        descriptor.value = function (...rest: unknown[]) {
            try {
                return originFn.call(this, ...rest)
            } catch (e) {
                // do something
                throw e
            }
        }
    }
}



class A {
    @CatchAsync('1')
    async request() {
    }
}

function onReject(e) {
    // ...
    report(e)

}

window.addEventListener('unhandledrejection', onReject, true)
window.addEventListener('error', this.onError, true)

class Demo extends Component {
    state = {
        error: false
    }

    static getDerivedStateFromError(){
        return {
            error: true
        }
    }

    componentDidCatch(error, info){
        this.setState({
            error: true
        })
    }



    render() {
        if (this.state.error) {
            return <div>error</div>
        }
        // ChildÖз¢ÉúäÖȾ´íÎó

        return <div>
            <Child/>
        </div>

    }

}

// error = The error that was caught or `?developer/article/2414765/undefined` if nothing errored.

// resetError = Call this function to mark an error as resolved. It's

//   up to your app to decide what that means and if it is possible

//   to recover from errors.

const [error, resetError] = useErrorBoundary();

export function useErrorBoundary(cb) {

    const state = getHookState(currentIndex++, 10);

    const errState = useState();

    state._value = cb;

    if (!currentComponent.componentDidCatch) {

        currentComponent.componentDidCatch = err => {

            if (state._value) state._value(err);

            errState[1](err);

        };

    }

    return [

        errState[0],

        () => {

            errState[1](?developer/article/2414765/undefined);

        }

    ];

}

import {ErrorBoundary} from 'react-error-boundary'



function ErrorFallback({error, resetErrorBoundary}) {

  return (

    <div role="alert">

      <p>Something went wrong:</p>

      <pre>{error.message}</pre>

      <button onClick={resetErrorBoundary}>Try again</button>

    </div>

  )}



  const ui = (

  <ErrorBoundary

    FallbackComponent={ErrorFallback}

  >

    <ComponentThatMayError />

  </ErrorBoundary>)

import {withErrorBoundary} from 'react-error-boundary'

const ComponentWithErrorBoundary = withErrorBoundary(ComponentThatMayError, {

  FallbackComponent: ErrorBoundaryFallbackComponent,

  onError(error, info) {

    // Do something with the error

    // E.g. log to an error logging client here

  },

})

// or

@withErrorBoundary({
  FallbackComponent: ErrorBoundaryFallbackComponent,
  onError(error, info) {
    // Do something with the error
    // E.g. log to an error logging client here
  },

})

class ComponentThatMayError extends Component {}

const ui = <ComponentWithErrorBoundary />

{

    test: /.jsx?$/,

    exclude: /node_modules/,

    use: {

        loader: 'babel-loader',

        options: {

            plugins: [

                [ 'babel-plugin-transform-react-error-boundary', {

                    ErrorBoundary: 'common/components/ErrorBoundary/index.js'

                } ]

            ]

        }

    }

}

class TestComponent extends React.Component {

    render() {

        return <div />;

    }

}

// ת»»

const ErrorBoundary = require('./path/to/my/ErrorBoundary.js');

class TestComponent extends React.Component {
    render() {
        return <ErrorBoundary>{this.__r__()}</ErrorBoundary>;
    }


    __r__) {
        return <div />;

    }

}

{
    "plugins": [

        ["react-ssr-try-catch", {

            // global errorHandler

            "errorHandler": "./path/to/my/SSRErrorHandler.js",

            // component error render method

            "errorRenderMethod": "renderErrorState",

        }]

    ]

}

class MyCompoenent extends React.PureComponent {

  render() {

    return <div/>;

  }

}

// ת»»

const ReactSSRErrorHandler = require('./path/to/my/SSRErrorHandler.js');

class MyCompoenent extends React.PureComponent {

  render() {

      try {

          return this.__originalRenderMethod__();

      } catch (e) {

          return ReactSSRErrorHandler(e, this.constructor.name, this);

      }

  }



  __originalRenderMethod__() {

      return <div />;

  }

}

// Ó÷¨

const ProfilePage = lazy(() => import('./ProfilePage'));



<Suspense fallback={<Spinner />}>

  <ProfilePage />

</Suspense>

// ×î¼ò»¯ÊµÏÖLazy + Suspense

function lazy(loader) {

    let prom;

    let component;

    let error;



    function Lazy(props) {

        if (!prom) {

            prom = loader();

            prom.then(

                exports => {

                    component = exports.default || exports;

                },

                e => {

                    error = e;

                }

            );

        }



        if (error) {

            throw error;

        }



        // Lazy×é¼þµÄrenderÖУ¬Èô×é¼þδ¼ÓÔØÍê³É£¬Å׳öÒ»¸öpromiseÒì³£¹©SuspenseµÄcomponentDidCatch²¶»ñ

        if (!component) {

            throw prom;

        }



        return createElement(component, props);

    }

    return Lazy;

}



export class Suspense extends React.Component {

    state = {

        isLoading: false

    };



    componentDidCatch(error) {

        if (this._mounted) {

            if (typeof error.then === 'function') {

                this.setState({ isLoading: true });

                error.then(() => {

                    if (this._mounted) {

                        this.setState({ isLoading: false })

                    }

                });

            }

        }

    }

    componentDidMount() {

        this._mounted = true;

    }

    componentWillUnmount() {

        this._mounted = false;

    }





    render() {

        const { children, fallback } = this.props;

        const { isLoading } = this.state;



        return isLoading ? fallback : children;

    }

}

const fetchApi = () => {
   // Òì²½api
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Êý¾Ý");
        }, 3000);
    });

}



const useData = () => {
    const [data,setData] = useState()
    useEffect(() => {
        fetchApi().then((x) => setData(x))

    },[])
    return data

}

const ProfilePage = () => {
   const data = useData()
    if (!data) {
        return <Loading/>

    }

   return <div>{data}</div>

}

const fetchApi = () => {
   // Òì²½api
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Êý¾Ý");
        }, 3000);
    });
}

const getData = createFetcher(fetchApi);

const ProfilePage = () => {

   const data = getData()

   return <div>{data}</div>

}



const Demo = () => {

    return <Suspense fallback={<Loading />}>

        <ProfilePage />

    </Suspense>

}

var cached = {};

export const createFetcher = (promiseTask) => {

    let ref = cached;

    return () => {

        if (ref !== cached) {

            return ref

        }

        const task = promiseTask();

        task.then(res => {

            ref = res

        });

        if (ref === cached) {

            throw task

        }

    }

}

Vue.config.errorHandler = function (error, vm, info) {

    window.Slardar && window.Slardar('Sentry', (Sentry) => {

      Sentry.captureMessage(error);

    });

}

new Vue({

  render (h) {

    throw new Error('oops')

  },

  renderError (h, err) {

    return h('pre', { style: { color: 'red' }}, err.stack)

  }

}).$mount('#app')

Vue.config.warnHandler = function (msg, vm, trace) {

  // `trace` ÊÇ×é¼þµÄ¼Ì³Ð¹Øϵ׷×Ù

}